@pixelmatters/markup 1.3.11 → 1.4.0

package/README.md

@@ -35,31 +35,34 @@ 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.4.0'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.3.11'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.4.0'
 
   init({
     apiUrl: 'https://your-deployment.convex.site',
     apiKey: 'markup_...',
-    position: 'bottom-right', // optional
-    theme: 'auto', // optional
+    position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+    theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+    fab: 'default', // optional: 'default' | 'icon-only'
   })
 </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.4.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.3.11"
+  src="https://esm.sh/@pixelmatters/markup@1.4.0"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
   data-position="bottom-right"
+  data-theme="auto"
+  data-fab="default"
 ></script>
 ```
 
@@ -75,8 +78,9 @@ import { init, destroy } from '@pixelmatters/markup'
 const stop = init({
   apiUrl: 'https://your-deployment.convex.site',
   apiKey: 'markup_...',
-  position: 'bottom-right', // optional
-  theme: 'light', // optional
+  position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+  theme: 'light', // optional: 'auto' | 'light' | 'dark'
+  fab: 'default', // optional: 'default' | 'icon-only'
 })
 
 // Tear down on logout / route change / page unload:
@@ -94,8 +98,9 @@ export default function App() {
     return init({
       apiUrl: import.meta.env.VITE_MARKUP_API_URL,
       apiKey: import.meta.env.VITE_MARKUP_API_KEY,
-      position: 'bottom-right', // optional
-      theme: 'auto', // optional
+      position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+      theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+      fab: 'default', // optional: 'default' | 'icon-only'
     })
   }, [])
 
@@ -115,6 +120,9 @@ onMounted(() => {
   stop = init({
     apiUrl: import.meta.env.VITE_MARKUP_API_URL,
     apiKey: import.meta.env.VITE_MARKUP_API_KEY,
+    position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+    theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+    fab: 'default', // optional: 'default' | 'icon-only'
   })
 })
 onBeforeUnmount(() => stop?.())
@@ -132,6 +140,9 @@ export default function App() {
     const stop = init({
       apiUrl: import.meta.env.VITE_MARKUP_API_URL,
       apiKey: import.meta.env.VITE_MARKUP_API_KEY,
+      position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+      theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+      fab: 'default', // optional: 'default' | 'icon-only'
     })
     onCleanup(stop)
   })
@@ -152,6 +163,7 @@ Mounts the widget. Always tears down any existing instance before mounting, so c
 | `apiKey`   | `string`                          | required         | Project API key — mint one in the dashboard                                                                              |
 | `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Initial corner for the floating action button — users can drag it across the viewport midline to flip corners at runtime |
 | `theme`    | `'light' \| 'dark' \| 'auto'`     | `'auto'`         | Visual theme — `'light'` or `'dark'`, or `'auto'` (default) to follow the host's `prefers-color-scheme`                  |
+| `fab`      | `'default' \| 'icon-only'`        | `'default'`      | Floating button variant — `'icon-only'` drops the "Markup" label for a circular icon button                              |
 
 ### `destroy()`
 
@@ -172,16 +184,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.
 
@@ -219,6 +231,7 @@ init({
   apiKey: string,                            // required
   position?: 'bottom-right' | 'bottom-left', // default 'bottom-right'
   theme?: 'light' | 'dark' | 'auto',         // default 'auto'
+  fab?: 'default' | 'icon-only',             // default 'default'
 }) // returns a destroy() function — call it on unmount / logout / route teardown
 ```
 
@@ -231,13 +244,14 @@ 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.4.0'
 
   init({
     apiUrl: '...',
     apiKey: '...',
     position: 'bottom-right',
     theme: 'auto',
+    fab: 'default',
   })
 </script>
 ```
@@ -247,11 +261,12 @@ 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.4.0"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."
   data-position="bottom-right"
+  data-fab="default"
 ></script>
 ```
 

package/dist/widget.d.ts

@@ -1,4 +1,5 @@
 export type WidgetTheme = 'light' | 'dark' | 'auto';
+export type WidgetFab = 'default' | 'icon-only';
 export interface WidgetConfig {
     /** Convex deployment site URL, e.g. `https://your-deployment.convex.site` */
     apiUrl: string;
@@ -13,6 +14,14 @@ export interface WidgetConfig {
      * - `'auto'` (default) — follow the host's `prefers-color-scheme`
      */
     theme?: WidgetTheme;
+    /**
+     * Floating action button variant.
+     * - `'default'` — pill button with icon + "Markup" label
+     * - `'icon-only'` — circular icon-only button (no label)
+     *
+     * Defaults to `'default'`.
+     */
+    fab?: WidgetFab;
 }
 /**
  * Mounts the feedback widget on the page. Idempotent — calling init again