@pixelmatters/markup 1.3.11 → 1.3.12

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.3.11'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.3.12'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.3.11'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.3.12'
 
   init({
     apiUrl: 'https://your-deployment.convex.site',
@@ -48,14 +48,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.3.11`).
+> **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.3.12`).
 
 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.3.11"
+  src="https://esm.sh/@pixelmatters/markup@1.3.12"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
@@ -172,16 +172,16 @@ Unmounts the widget and removes the host element. Safe to call when nothing is m
 - 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 FAB and active popovers opt back in to pointer events.
 - Pins are anchored as `(x, y)` fractions of the document plus a best-effort CSS selector (via [`@medv/finder`](https://github.com/antonmedv/finder)). The selector wins when it still resolves; the fraction is the fallback so pins survive layout changes.
-- Identity lives in **host-page** `localStorage` under `markup.identity`, keyed to the top-level site. New visitors get a random `clientId` so the backend can group their comments across sessions.
+- 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.
 
 ## Identity
 
 Anonymous by default, with two opt-in upgrade paths:
 
-- **Sign in with Markup** — opens a popup to `${apiUrl}/widget/auth`. Because the popup is first-party to the deployment origin, the better-auth session cookie is sent normally (sidestepping third-party cookie blocks). The popup `postMessage`s a JWT-backed verified identity back to the host page, which persists it under `markup.identity`.
-- **Continue as a guest** — name (and optional email), stored under the same key without `isVerified`.
+- **Sign in with Markup** — the widget POSTs to `/widget/popup-exchange` with the apiKey + Origin gate, gets back a single-use 60-second code, then opens `${apiUrl}/widget/auth?code=…` in a popup. Because the popup is first-party to the deployment origin, the better-auth session cookie is sent normally (sidestepping third-party cookie blocks). The popup `postMessage`s a verified identity plus a 7-day server-signed `Bearer` JWT back to the host page, which persists them under `markup.identity` and attaches the JWT as `Authorization: Bearer` on subsequent writes. The apiKey never appears in the popup URL.
+- **Continue as a guest** — name (and optional email), stored alongside the server-issued anonymous `clientId` + JWT minted on first load.
 
-The popup origin is validated against the project's `allowedDomains` before any identity is returned, so only embeds on approved domains can resolve dashboard sessions.
+The popup origin is validated against the project's `allowedDomains` before any identity is returned, so only embeds on approved domains can resolve dashboard sessions. Verified JWTs can be invalidated before their TTL via the dashboard's "Sign out everywhere" action.
 
 > **Why a popup, not auto-detect?** Safari ITP, Chrome Storage Partitioning, and Firefox TCP all partition third-party storage and cookies by top-level site. A cross-origin fetch from `customer.com` to `convex.site` cannot see the dashboard session. The popup is the only reliable way to bridge identity across sites without per-host configuration.
 
@@ -231,7 +231,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.3.11'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.3.12'
 
   init({
     apiUrl: '...',
@@ -247,7 +247,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.3.11"
+  src="https://esm.sh/@pixelmatters/markup@1.3.12"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."

package/dist/widget.js

@@ -2843,7 +2843,7 @@ function Nr() {
 		name: e?.name,
 		email: e?.email
 	};
-	return e ? e.isVerified && typeof e.clientId == "string" && typeof e.token == "string" && typeof e.tokenExpiresAt == "number" && typeof e.name == "string" ? {
+	return e ? e.isVerified && typeof e.clientId == "string" && typeof e.token == "string" && typeof e.tokenExpiresAt == "number" && typeof e.name == "string" && e.tokenExpiresAt > Date.now() ? {
 		state: {
 			kind: "verified",
 			identity: {
@@ -2949,7 +2949,7 @@ async function Rr(e, t) {
 			window.removeEventListener("message", i), clearInterval(a), clearTimeout(s);
 		}
 		function i(i) {
-			if (i.origin !== n) return;
+			if (i.origin !== n || i.source !== o) return;
 			let a = i.data;
 			a?.type === "MARKUP_AUTH_RESULT" && (r(), a.identity?.id && a.identity?.name ? e({
 				identity: a.identity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelmatters/markup",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "description": "Embeddable feedback widget for collecting visual bug reports, screenshots, and comments on live web apps.",
   "keywords": [
     "annotation",