@pixelmatters/markup 1.28.1 → 1.30.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.28.1'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.30.0'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.28.1'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.30.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.28.1`).
+> **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.30.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.28.1"
+  src="https://esm.sh/@pixelmatters/markup@1.30.0"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
@@ -255,15 +255,16 @@ close.
 
 ### Keyboard & mouse
 
-| Shortcut              | Action                                                                           |
-| --------------------- | -------------------------------------------------------------------------------- |
-| `c`                   | Start placing a markup (ignored while typing)                                    |
-| `@`                   | In a composer, open the member picker. `↑`/`↓` to move, `enter` or `tab` to pick |
-| `cmd/ctrl + enter`    | Post the comment being written                                                   |
-| `esc`                 | Cancel placement, dismiss the mention picker, or close the open popover / menu   |
-| `cmd/ctrl + .`        | Toggle HUD visibility                                                            |
-| `cmd/ctrl + click`    | Click the toolbar's comment button to hide the HUD with a hint toast             |
-| Drag a popover header | Move the open thread / new-thread popover; resets to the pin on reopen           |
+| Shortcut              | Action                                                                            |
+| --------------------- | --------------------------------------------------------------------------------- |
+| `c`                   | Start placing a markup (ignored while typing)                                     |
+| `@`                   | In a composer, open the member picker. `↑`/`↓` to move, `enter` or `tab` to pick  |
+| `cmd/ctrl + enter`    | Post the comment being written                                                    |
+| `enter`               | Send a reply. `shift + enter` adds a new line, as `enter` does on touch keyboards |
+| `esc`                 | Cancel placement, dismiss the mention picker, or close the open popover / menu    |
+| `cmd/ctrl + .`        | Toggle HUD visibility                                                             |
+| `cmd/ctrl + click`    | Click the toolbar's comment button to hide the HUD with a hint toast              |
+| Drag a popover header | Move the open thread / new-thread popover; resets to the pin on reopen            |
 
 ## Screenshots & privacy
 
@@ -401,7 +402,7 @@ to start from `anchorSource` and confirm it, not to trust it blindly.
 
 ## How it works
 
-- The widget mounts `<div id="markup-widget">` on `document.body` and attaches an open shadow root.
+- The widget mounts `<div id="markup-widget">` on `document.body` and attaches an open shadow root. It does so once the page is idle, or 2 s after `init()` on a page that never is, so `init()` returns before the element exists.
 - 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 toolbar and active popovers opt back in to pointer events.
 - Pins are anchored as `(x, y)` fractions of the document plus a CSS path from the nearest landmark (a stable `id`, `data-testid`, `main`, `form`, `table`, …) and the element's text. The path wins when it still resolves, relaxing from the top if a wrapper changed, and a match whose text differs is rejected; the fraction is the fallback so pins survive layout changes.
@@ -495,7 +496,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.28.1'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.30.0'
 
   init({
     apiUrl: '...',
@@ -511,7 +512,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.28.1"
+  src="https://esm.sh/@pixelmatters/markup@1.30.0"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."

package/dist/react.js

@@ -1,15 +1,2 @@
-"use client";
-import { init as e, t } from "./widget.js";
-import { t as n } from "./shared-mount-DABK4arh.js";
-import { useEffect as r } from "react";
-//#region src/react.ts
-function i(i) {
-	let { enabled: a = !0, ...o } = i, s = a ? t(o) : null;
-	r(() => {
-		if (s !== null) return n(s, e);
-	}, [s]);
-}
-//#endregion
-export { i as useMarkup };
-
+"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};
 //# 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":";;;;;AA6BA,SAAgB,EAAU,GAAiC;CACzD,IAAM,EAAE,aAAU,IAAM,GAAG,MAAW,GAChC,IAAM,IAAU,EAAU,CAAM,IAAI;CAE1C,QAAgB;EACV,UAAQ,MACZ,OAAO,EAAa,GAAK,CAAI;CAC/B,GAAG,CAAC,CAAG,CAAC;AACV"}
+{"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"}

package/dist/shared-mount-B9ij4vuL.js

@@ -0,0 +1,2 @@
+var e=/* @__PURE__ */ new Map;function t(t,n){let r=n(JSON.parse(t)),i=(e.get(t)?.count??0)+1;e.delete(t),e.set(t,{count:i,dispose:r});let a=!1;return()=>{if(a)return;a=!0;let r=e.get(t);if(!r||(--r.count,r.count>0))return;e.delete(t),r.dispose();let i=[...e.entries()].at(-1);if(i)try{i[1].dispose=n(JSON.parse(i[0]))}catch(e){i[1].dispose=()=>{},console.warn(`[markup] could not remount the widget`,e)}}}export{t};
+//# sourceMappingURL=shared-mount-B9ij4vuL.js.map

package/dist/{shared-mount-DABK4arh.js.map → shared-mount-B9ij4vuL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"shared-mount-DABK4arh.js","names":[],"sources":["../src/runtime/shared-mount.ts"],"sourcesContent":["import type { WidgetConfig } from '../widget'\n\ntype Holder = { count: number; dispose: () => void }\n\nconst holders = new Map<string, Holder>()\n\n/**\n * Counts hook holders per config, so the first of two components to unmount\n * doesn't take the widget away from the other. `init` still runs on every\n * acquire: it is a no-op for the live config, and it remounts one that a\n * different config has since replaced.\n *\n * Holders of different configs contend for the one widget, and the latest to\n * acquire wins. When it lets go, the most recent remaining config is mounted\n * again, so no holder is left without a widget while it still wants one.\n */\nexport function acquireMount(key: string, init: (config: WidgetConfig) => () => void): () => void {\n  const dispose = init(JSON.parse(key) as WidgetConfig)\n  const count = (holders.get(key)?.count ?? 0) + 1\n  // Re-inserted so the map's order is recency, which the release path reads.\n  holders.delete(key)\n  holders.set(key, { count, dispose })\n\n  let isReleased = false\n  return () => {\n    if (isReleased) return\n    isReleased = true\n    const current = holders.get(key)\n    if (!current) return\n    current.count -= 1\n    if (current.count > 0) return\n    holders.delete(key)\n    current.dispose()\n    const survivor = [...holders.entries()].at(-1)\n    if (!survivor) return\n    // This runs inside some other component's cleanup; a failure to bring\n    // the survivor back must not surface as that component's error.\n    try {\n      survivor[1].dispose = init(JSON.parse(survivor[0]) as WidgetConfig)\n    } catch (error) {\n      survivor[1].dispose = () => {}\n      console.warn('[markup] could not remount the widget', error)\n    }\n  }\n}\n"],"mappings":";AAIA,IAAM,oBAAU,IAAI,IAAoB;AAYxC,SAAgB,EAAa,GAAa,GAAwD;CAChG,IAAM,IAAU,EAAK,KAAK,MAAM,CAAG,CAAiB,GAC9C,KAAS,EAAQ,IAAI,CAAG,CAAC,EAAE,SAAS,KAAK;CAG/C,AADA,EAAQ,OAAO,CAAG,GAClB,EAAQ,IAAI,GAAK;EAAE;EAAO;CAAQ,CAAC;CAEnC,IAAI,IAAa;CACjB,aAAa;EACX,IAAI,GAAY;EAChB,IAAa;EACb,IAAM,IAAU,EAAQ,IAAI,CAAG;EAG/B,IAFI,CAAC,MACL,IAAQ,OACJ,EAAQ,QAAQ,IAAG;EAEvB,AADA,EAAQ,OAAO,CAAG,GAClB,EAAQ,QAAQ;EAChB,IAAM,IAAW,CAAC,GAAG,EAAQ,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE;EACxC,OAGL,IAAI;GACF,EAAS,EAAE,CAAC,UAAU,EAAK,KAAK,MAAM,EAAS,EAAE,CAAiB;EACpE,SAAS,GAAO;GAEd,AADA,EAAS,EAAE,CAAC,gBAAgB,CAAC,GAC7B,QAAQ,KAAK,yCAAyC,CAAK;EAC7D;CACF;AACF"}
+{"version":3,"file":"shared-mount-B9ij4vuL.js","names":[],"sources":["../src/runtime/shared-mount.ts"],"sourcesContent":["import type { WidgetConfig } from '../widget'\n\ntype Holder = { count: number; dispose: () => void }\n\nconst holders = new Map<string, Holder>()\n\n/**\n * Counts hook holders per config, so the first of two components to unmount\n * doesn't take the widget away from the other. `init` still runs on every\n * acquire: it is a no-op for the live config, and it remounts one that a\n * different config has since replaced.\n *\n * Holders of different configs contend for the one widget, and the latest to\n * acquire wins. When it lets go, the most recent remaining config is mounted\n * again, so no holder is left without a widget while it still wants one.\n */\nexport function acquireMount(key: string, init: (config: WidgetConfig) => () => void): () => void {\n  const dispose = init(JSON.parse(key) as WidgetConfig)\n  const count = (holders.get(key)?.count ?? 0) + 1\n  // Re-inserted so the map's order is recency, which the release path reads.\n  holders.delete(key)\n  holders.set(key, { count, dispose })\n\n  let isReleased = false\n  return () => {\n    if (isReleased) return\n    isReleased = true\n    const current = holders.get(key)\n    if (!current) return\n    current.count -= 1\n    if (current.count > 0) return\n    holders.delete(key)\n    current.dispose()\n    const survivor = [...holders.entries()].at(-1)\n    if (!survivor) return\n    // This runs inside some other component's cleanup; a failure to bring\n    // the survivor back must not surface as that component's error.\n    try {\n      survivor[1].dispose = init(JSON.parse(survivor[0]) as WidgetConfig)\n    } catch (error) {\n      survivor[1].dispose = () => {}\n      console.warn('[markup] could not remount the widget', error)\n    }\n  }\n}\n"],"mappings":"AAIA,IAAM,kBAAU,IAAI,IAYpB,SAAgB,EAAa,EAAa,EAAwD,CAChG,IAAM,EAAU,EAAK,KAAK,MAAM,CAAG,CAAiB,EAC9C,GAAS,EAAQ,IAAI,CAAG,CAAC,EAAE,OAAS,GAAK,EAE/C,EAAQ,OAAO,CAAG,EAClB,EAAQ,IAAI,EAAK,CAAE,QAAO,SAAQ,CAAC,EAEnC,IAAI,EAAa,GACjB,UAAa,CACX,GAAI,EAAY,OAChB,EAAa,GACb,IAAM,EAAU,EAAQ,IAAI,CAAG,EAG/B,GAFI,CAAC,IACL,IAAQ,MACJ,EAAQ,MAAQ,GAAG,OACvB,EAAQ,OAAO,CAAG,EAClB,EAAQ,QAAQ,EAChB,IAAM,EAAW,CAAC,GAAG,EAAQ,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,EACxC,KAGL,GAAI,CACF,EAAS,EAAE,CAAC,QAAU,EAAK,KAAK,MAAM,EAAS,EAAE,CAAiB,CACpE,OAAS,EAAO,CACd,EAAS,EAAE,CAAC,YAAgB,CAAC,EAC7B,QAAQ,KAAK,wCAAyC,CAAK,CAC7D,CACF,CACF"}

package/dist/vue.js

@@ -1,21 +1,2 @@
-import { init as e, t } from "./widget.js";
-import { t as n } from "./shared-mount-DABK4arh.js";
-import { computed as r, onBeforeUnmount as i, onMounted as a, toValue as o, watch as s } from "vue";
-//#region src/vue.ts
-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);
-	});
-}
-//#endregion
-export { c as useMarkup };
-
+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};
 //# 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":";;;;AA4BA,SAAgB,EAAU,GAAmD;CAC3E,IAAM,IAAM,QAAe;EACzB,IAAM,EAAE,aAAU,IAAM,GAAG,MAAW,EAAQ,CAAO;EACrD,OAAO,IAAU,EAAU,CAAM,IAAI;CACvC,CAAC,GAEG,IAA+B,MAC7B,KAAS,MAAwB;EAErC,AADA,IAAU,GACV,IAAU,MAAS,OAAO,OAAO,EAAa,GAAM,CAAI;CAC1D,GAEI,IAAoC;CAKxC,AAJA,QAAgB;EAEd,AADA,EAAM,EAAI,KAAK,GACf,IAAe,EAAM,GAAK,CAAK;CACjC,CAAC,GACD,QAAsB;EAEpB,AADA,IAAe,GACf,EAAM,IAAI;CACZ,CAAC;AACH"}
+{"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"}

package/dist/widget.d.ts

@@ -132,9 +132,10 @@ export interface WidgetConfig {
     analytics?: boolean;
 }
 /**
- * Mounts the feedback widget on the page. Idempotent — calling init again
- * with the same config is a no-op; calling with different config tears down
- * the previous instance first. A host removed from the document by the page
+ * Mounts the feedback widget on the page once it is idle, or after
+ * `IDLE_MOUNT_TIMEOUT_MS` on a page that never is. Idempotent — calling init
+ * again with the same config is a no-op; calling with different config tears
+ * down the previous instance first. A host removed from the document by the page
  * (a body swap on navigation, say) is remounted even when the config matches.
  *
  * Returns a function that unmounts this instance and removes its host