@pixelmatters/markup 1.3.8 → 1.3.10

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.8'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.3.10'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.3.8'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.3.10'
 
   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.8`).
+> **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.10`).
 
 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.8"
+  src="https://esm.sh/@pixelmatters/markup@1.3.10"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
@@ -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.8'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.3.10'
 
   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.8"
+  src="https://esm.sh/@pixelmatters/markup@1.3.10"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."

package/dist/widget.js

@@ -3454,19 +3454,19 @@ function aa(e, t) {
 }
 function oa(e, t, n, r) {
 	let i = r, a = 28 * i, o = a / 2, s = t * i, c = n * i;
-	e.save(), e.translate(s, c), e.rotate(-Math.PI / 4);
+	e.save();
 	let l = 2 * i;
-	e.beginPath(), e.roundRect(-o - l, -o - l, a + l * 2, a + l * 2, [
+	e.beginPath(), e.roundRect(s - l, c - a - l, a + l * 2, a + l * 2, [
 		14 * i + l,
 		14 * i + l,
 		14 * i + l,
 		4 * i + l
-	]), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.roundRect(-o, -o, a, a, [
+	]), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.roundRect(s, c - a, a, a, [
 		14 * i,
 		14 * i,
 		14 * i,
 		4 * i
-	]), e.fillStyle = "#1a1614", e.fill(), e.rotate(Math.PI / 4), e.beginPath(), e.arc(0, 0, 3 * i, 0, Math.PI * 2), e.fillStyle = "rgba(255, 255, 255, 0.85)", e.fill(), e.restore();
+	]), e.fillStyle = "#1a1614", e.fill(), e.beginPath(), e.arc(s + o, c - o, 3 * i, 0, Math.PI * 2), e.fillStyle = "#e35d2a", e.fill(), e.restore();
 }
 //#endregion
 //#region src/runtime/utils.ts
@@ -3482,7 +3482,7 @@ function sa(e) {
 	return {
 		onPointerDown: V((e) => {
 			let n = t.current;
-			if (n.stopPropagation && e.stopPropagation(), e.button !== 0 || n.shouldStart && !n.shouldStart(e)) return;
+			if (n.preventDefault && e.preventDefault(), n.stopPropagation && e.stopPropagation(), e.button !== 0 || n.shouldStart && !n.shouldStart(e)) return;
 			let a = e.currentTarget;
 			if (!a) return;
 			let o = (n.targetRef?.current ?? a).getBoundingClientRect(), s = e.clientX, c = e.clientY, l = o.left, u = o.top, d = o.width, f = o.height, p = n.threshold ?? 4, m = n.margin ?? 8, h = e.pointerId, g = !1, _ = null;
@@ -3632,6 +3632,7 @@ function ga({ size: e = 16 }) {
 //#region src/runtime/ui/fab.tsx
 function _a({ active: e, onToggle: t, onHide: n, position: r = "bottom-right", onPositionChange: i }) {
 	let a = r === "bottom-left" ? "markup-fab-left" : "markup-fab-right", [o, s] = R(null), { onPointerDown: c, isDragging: l, consumeClickIfDragged: u } = sa({
+		preventDefault: !0,
 		stopPropagation: !0,
 		onMove: s,
 		onEnd: (e, t) => {
@@ -4365,11 +4366,6 @@ function Aa({ thread: e, authorName: t, currentClientId: n, isVerified: r, ident
 									children: [" ", "(edited)"]
 								})]
 							}),
-							!l && t.reactions.length > 0 ? /* @__PURE__ */ $(Ma, {
-								comment: t,
-								isResolved: k,
-								onToggle: (e) => g(t._id, e)
-							}) : null,
 							r === 0 && e.screenshotUrl ? /* @__PURE__ */ $("button", {
 								type: "button",
 								class: "markup-comment-screenshot",
@@ -4378,6 +4374,11 @@ function Aa({ thread: e, authorName: t, currentClientId: n, isVerified: r, ident
 									src: e.screenshotUrl,
 									alt: "Screenshot"
 								})
+							}) : null,
+							!l && t.reactions.length > 0 ? /* @__PURE__ */ $(Ma, {
+								comment: t,
+								isResolved: k,
+								onToggle: (e) => g(t._id, e)
 							}) : null
 						]
 					}, t._id);
@@ -4530,8 +4531,11 @@ function La(e) {
 		email: e.identity.email
 	};
 }
-function Ra({ apiUrl: e, apiKey: t, position: n = "bottom-right" }) {
-	let [r, i] = R(() => window.location.pathname), [a, o] = R([]), [s, c] = R(!1), [l, u] = R({ kind: "unresolved" }), [d, f] = R(n), p = B(l);
+function Ra() {
+	return window.location.host + window.location.pathname;
+}
+function za({ apiUrl: e, apiKey: t, position: n = "bottom-right" }) {
+	let [r, i] = R(Ra), [a, o] = R([]), [s, c] = R(!1), [l, u] = R({ kind: "unresolved" }), [d, f] = R(n), p = B(l);
 	p.current = l;
 	let [m, h] = R(0), g = Ce(() => Or({
 		apiUrl: e,
@@ -4642,7 +4646,7 @@ function Ra({ apiUrl: e, apiKey: t, position: n = "bottom-right" }) {
 	}, [a, s]), z(() => {
 		let e = !0;
 		function t() {
-			e && i(window.location.pathname);
+			e && i(Ra());
 		}
 		window.addEventListener("popstate", t);
 		let n = history.pushState, r = history.replaceState;
@@ -4968,11 +4972,11 @@ function Ra({ apiUrl: e, apiKey: t, position: n = "bottom-right" }) {
 				position: d,
 				onPositionChange: f
 			}) : null,
-			C && T ? /* @__PURE__ */ $(za, { position: d }) : null
+			C && T ? /* @__PURE__ */ $(Ba, { position: d }) : null
 		]
 	});
 }
-function za({ position: e }) {
+function Ba({ position: e }) {
 	let t = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? "⌘" : "Ctrl";
 	return /* @__PURE__ */ $("div", {
 		class: Q("markup-hud-hidden-toast", e === "bottom-left" ? "markup-hud-hidden-toast-left" : "markup-hud-hidden-toast-right"),
@@ -4994,7 +4998,7 @@ function za({ position: e }) {
 }
 //#endregion
 //#region src/runtime/mount.tsx
-function Ba(e, t) {
+function Va(e, t) {
 	e.style.position = "fixed", e.style.inset = "0", e.style.zIndex = "2147483647", e.style.pointerEvents = "none";
 	let n = t.theme ?? "auto";
 	n !== "auto" && (e.dataset.theme = n);
@@ -5003,23 +5007,24 @@ function Ba(e, t) {
 	let a = document.createElement("div");
 	a.className = "markup-shadow-root", r.appendChild(a);
 	let { theme: o, ...s } = t;
-	return le(/* @__PURE__ */ $(Ra, { ...s }), a), () => le(null, a);
+	return le(/* @__PURE__ */ $(za, { ...s }), a), () => le(null, a);
 }
 //#endregion
 //#region src/widget.ts
-var Va = null, Ha = null;
-function Ua(e) {
-	Wa();
+var Ha = null, Ua = null;
+function Wa(e) {
+	if (!e.apiUrl || !e.apiKey) return console.warn("[markup] init() requires both apiUrl and apiKey — widget not mounted"), () => {};
+	Ga();
 	let t = document.createElement("div");
-	return t.id = "markup-widget", document.body.appendChild(t), Ha = t, Va = Ba(t, e), Wa;
+	return t.id = "markup-widget", document.body.appendChild(t), Ua = t, Ha = Va(t, e), Ga;
 }
-function Wa() {
-	Va &&= (Va(), null), Ha?.parentNode && Ha.parentNode.removeChild(Ha), Ha = null;
+function Ga() {
+	Ha &&= (Ha(), null), Ua?.parentNode && Ua.parentNode.removeChild(Ua), Ua = null;
 }
 if (typeof document < "u") {
 	let e = document.currentScript ?? document.querySelector("script[data-markup-widget=\"true\"]"), t = e?.dataset.apiUrl, n = e?.dataset.apiKey;
 	if (t && n) {
-		let r = e?.dataset.position, i = e?.dataset.theme, a = () => Ua({
+		let r = e?.dataset.position, i = e?.dataset.theme, a = () => Wa({
 			apiUrl: t,
 			apiKey: n,
 			position: r,
@@ -5029,4 +5034,4 @@ if (typeof document < "u") {
 	}
 }
 //#endregion
-export { Wa as destroy, Ua as init };
+export { Ga as destroy, Wa as init };

package/package.json

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