@airnauts/comments-client 0.4.0 → 0.5.1

package/dist/index.js

@@ -33750,7 +33750,7 @@ function IdentityModal({ open, onOpenChange, onSubmit }) {
             value: email3,
             onChange: (e) => setEmail(e.target.value),
             placeholder: "you@example.com",
-            className: "cmnt:block cmnt:w-full cmnt:my-3 cmnt:p-2 cmnt:border cmnt:border-gray-300 cmnt:rounded"
+            className: "cmnt:block cmnt:w-full cmnt:my-3 cmnt:p-2 cmnt:border cmnt:border-gray-300 cmnt:rounded-[4px]"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -33761,7 +33761,7 @@ function IdentityModal({ open, onOpenChange, onSubmit }) {
             value: name,
             onChange: (e) => setName(e.target.value),
             placeholder: "Name (optional)",
-            className: "cmnt:block cmnt:w-full cmnt:my-3 cmnt:p-2 cmnt:border cmnt:border-gray-300 cmnt:rounded"
+            className: "cmnt:block cmnt:w-full cmnt:my-3 cmnt:p-2 cmnt:border cmnt:border-gray-300 cmnt:rounded-[4px]"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { variant: "primary", size: "md", type: "submit", children: "Log in" })
@@ -36640,6 +36640,15 @@ function createRuntime(opts) {
     });
     if (changed) emit();
   }
+  function bumpCommentCount(id, delta) {
+    let changed = false;
+    placed = placed.map((p) => {
+      if (p.item.id !== id) return p;
+      changed = true;
+      return { ...p, item: { ...p.item, commentCount: Math.max(0, p.item.commentCount + delta) } };
+    });
+    if (changed) emit();
+  }
   function dispose() {
     resizeObs?.disconnect();
   }
@@ -36648,6 +36657,7 @@ function createRuntime(opts) {
     reposition: emit,
     rematchAll,
     setItemStatus,
+    bumpCommentCount,
     dispose,
     get placed() {
       return placed;
@@ -36717,6 +36727,9 @@ function createPanelController(dispatch, deps) {
     },
     back() {
       dispatch({ type: "BACK" });
+    },
+    bumpCommentCount(id, delta) {
+      dispatch({ type: "BUMP_COMMENT_COUNT", id, delta });
     }
   };
 }
@@ -36727,6 +36740,15 @@ var init_controller = __esm({
 });
 
 // src/panel/state.ts
+function bumpCount(list, id, delta) {
+  let changed = false;
+  const next = list.map((t) => {
+    if (t.id !== id) return t;
+    changed = true;
+    return { ...t, commentCount: Math.max(0, t.commentCount + delta) };
+  });
+  return changed ? next : list;
+}
 function reducer(state, action) {
   switch (action.type) {
     case "OPEN":
@@ -36763,6 +36785,12 @@ function reducer(state, action) {
       };
     case "LOAD_MORE_ERROR":
       return { ...state, loadingMore: false };
+    case "BUMP_COMMENT_COUNT":
+      return {
+        ...state,
+        list: bumpCount(state.list, action.id, action.delta),
+        needsReview: bumpCount(state.needsReview, action.id, action.delta)
+      };
     default:
       return state;
   }
@@ -36923,6 +36951,17 @@ function reducer2(state, action) {
       } : state;
       return mapDetail(withItem, action.id, (t) => ({ ...t, status: action.status }));
     }
+    case "BUMP_COMMENT_COUNT": {
+      const item = state.itemsById[action.id];
+      if (!item) return state;
+      return {
+        ...state,
+        itemsById: {
+          ...state.itemsById,
+          [action.id]: { ...item, commentCount: Math.max(0, item.commentCount + action.delta) }
+        }
+      };
+    }
     case "REQUEST_FOCUS":
       return {
         ...state,
@@ -36975,8 +37014,9 @@ var init_state3 = __esm({
 
 // src/threads/controller.ts
 function createController(dispatch, deps) {
-  let patchRuntime = null;
+  let runtime = null;
   let statusListener = null;
+  let commentCountListener = null;
   const lazyFetchDetail = (id) => {
     if (deps.isCached(id) || deps.isLoading(id)) return;
     dispatch({ type: "DETAIL_LOADING", id });
@@ -36984,7 +37024,12 @@ function createController(dispatch, deps) {
   };
   const patchStatus = (id, status) => {
     dispatch({ type: "SET_STATUS", id, status });
-    patchRuntime?.(id, status);
+    runtime?.setStatus(id, status);
+  };
+  const bumpCommentCount = (id, delta) => {
+    dispatch({ type: "BUMP_COMMENT_COUNT", id, delta });
+    runtime?.bumpCommentCount(id, delta);
+    commentCountListener?.(id, delta);
   };
   return {
     openThread(id) {
@@ -36998,9 +37043,10 @@ function createController(dispatch, deps) {
       dispatch({ type: "SET_SHOW_RESOLVED", value });
     },
     registerRuntime(patch2) {
-      patchRuntime = patch2;
+      runtime = patch2;
     },
     patchStatus,
+    bumpCommentCount,
     async setStatus(id, status) {
       const prev = status === "resolved" ? "open" : "resolved";
       patchStatus(id, status);
@@ -37022,6 +37068,9 @@ function createController(dispatch, deps) {
     },
     registerStatusListener(fn) {
       statusListener = fn;
+    },
+    registerCommentCountListener(fn) {
+      commentCountListener = fn;
     }
   };
 }
@@ -37083,6 +37132,9 @@ function useDispatch() {
 function useVisiblePlacements() {
   return visiblePlacements(useCtx2().state);
 }
+function useShowResolved() {
+  return useCtx2().state.showResolved;
+}
 function useOpenThread() {
   const { state } = useCtx2();
   const id = state.openId;
@@ -37168,7 +37220,7 @@ var init_Pin = __esm({
             "cmnt:absolute cmnt:w-[42px] cmnt:h-[42px] cmnt:-ml-[21px] cmnt:-mt-[42px] cmnt:p-0 cmnt:border-none cmnt:bg-transparent cmnt:cursor-pointer cmnt:pointer-events-auto",
             className
           ),
-          style: { transform: `translate(${pin.x}px, ${pin.y}px)`, ...style },
+          style: { transform: `translate(${Math.round(pin.x)}px, ${Math.round(pin.y)}px)`, ...style },
           children: [
             focused && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "span",
@@ -37279,8 +37331,8 @@ function CommentList({
         children: [0, 1].map((i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cmnt:flex cmnt:gap-[9px] cmnt:mb-3.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cmnt:w-[26px] cmnt:h-[26px] cmnt:rounded-full cmnt:bg-gray-200" }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cmnt:flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cmnt:w-2/5 cmnt:h-2.5 cmnt:bg-gray-200 cmnt:rounded" }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cmnt:w-[85%] cmnt:h-2.5 cmnt:bg-gray-100 cmnt:rounded cmnt:mt-1.5" })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cmnt:w-2/5 cmnt:h-2.5 cmnt:bg-gray-200 cmnt:rounded-[4px]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cmnt:w-[85%] cmnt:h-2.5 cmnt:bg-gray-100 cmnt:rounded-[4px] cmnt:mt-1.5" })
           ] })
         ] }, i))
       }
@@ -37335,7 +37387,7 @@ function CommentList({
                   "span",
                   {
                     "aria-hidden": true,
-                    className: "cmnt:absolute cmnt:top-1 cmnt:right-1 cmnt:flex cmnt:items-center cmnt:justify-center cmnt:w-5 cmnt:h-5 cmnt:rounded cmnt:bg-black/55 cmnt:text-white cmnt:opacity-80 cmnt:group-hover:opacity-100 cmnt:transition-opacity",
+                    className: "cmnt:absolute cmnt:top-1 cmnt:right-1 cmnt:flex cmnt:items-center cmnt:justify-center cmnt:w-5 cmnt:h-5 cmnt:rounded-[4px] cmnt:bg-black/55 cmnt:text-white cmnt:opacity-80 cmnt:group-hover:opacity-100 cmnt:transition-opacity",
                     children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                       "svg",
                       {
@@ -37675,6 +37727,7 @@ function ThreadConversation({
   const { detail, loading, error: error51 } = useThreadDetail(id);
   const toast = useToast();
   const resolved = (detail?.status ?? item.status) === "resolved";
+  const commentCount = detail ? detail.comments.length : item.commentCount;
   async function submitReply({ text, attachmentIds, who }) {
     const tempId = `temp-${nextTempId++}`;
     const optimistic = {
@@ -37685,6 +37738,7 @@ function ThreadConversation({
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     dispatch({ type: "ADD_OPTIMISTIC_COMMENT", id, comment: optimistic });
+    controller.bumpCommentCount(id, 1);
     const wasResolved = resolved;
     if (wasResolved) controller.patchStatus(id, "open");
     let saved;
@@ -37696,6 +37750,7 @@ function ThreadConversation({
       });
     } catch {
       dispatch({ type: "REMOVE_OPTIMISTIC_COMMENT", id, tempId });
+      controller.bumpCommentCount(id, -1);
       if (wasResolved) controller.patchStatus(id, "resolved");
       toast("Failed to post reply");
       return;
@@ -37732,7 +37787,7 @@ function ThreadConversation({
                 "cmnt:text-[11px] cmnt:font-semibold",
                 resolved ? "cmnt:text-green-600" : "cmnt:text-blue-600"
               ),
-              children: resolved ? "\u2713 Resolved" : `Open \xB7 ${item.commentCount} ${item.commentCount === 1 ? "comment" : "comments"}`
+              children: resolved ? "\u2713 Resolved" : `Open \xB7 ${commentCount} ${commentCount === 1 ? "comment" : "comments"}`
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cmnt:flex cmnt:items-center cmnt:gap-1.5 cmnt:text-gray-500", children: [
@@ -37842,7 +37897,7 @@ function ThreadPopover({
               const target = e.detail.originalEvent.target;
               if (target?.closest("[data-comments-root]")) e.preventDefault();
             },
-            className: "cmnt:pointer-events-auto",
+            className: "cmnt:z-[var(--cmnt-z-surface)] cmnt:pointer-events-auto",
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               ThreadConversation,
               {
@@ -37999,9 +38054,9 @@ function DetachedThread({ client, identity, onNeedIdentity }) {
     "div",
     {
       "data-testid": "comments-detached",
-      className: "cmnt:fixed cmnt:top-4 cmnt:left-1/2 cmnt:-translate-x-1/2 cmnt:z-50 cmnt:pointer-events-auto",
+      className: "cmnt:fixed cmnt:top-4 cmnt:left-1/2 cmnt:-translate-x-1/2 cmnt:z-[var(--cmnt-z-surface)] cmnt:pointer-events-auto",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "cmnt:mb-1 cmnt:w-80 cmnt:max-w-[calc(100vw-16px)] cmnt:flex cmnt:items-center cmnt:gap-1 cmnt:px-2 cmnt:py-1 cmnt:rounded cmnt:bg-amber-100 cmnt:text-amber-700 cmnt:text-[11px] cmnt:font-medium", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "cmnt:mb-1 cmnt:w-80 cmnt:max-w-[calc(100vw-16px)] cmnt:flex cmnt:items-center cmnt:gap-1 cmnt:px-2 cmnt:py-1 cmnt:rounded-[4px] cmnt:bg-amber-100 cmnt:text-amber-700 cmnt:text-[11px] cmnt:font-medium", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": true, children: "\u26A0" }),
           " This comment's anchor was lost"
         ] }),
@@ -38029,80 +38084,168 @@ var init_DetachedThread = __esm({
   }
 });
 
+// src/launcher/storage.ts
+function clampTop(top) {
+  return Math.min(95, Math.max(5, top));
+}
+function loadLauncherPosition(store = localStorage) {
+  try {
+    const raw = store.getItem(STORAGE_KEY3);
+    if (!raw) return DEFAULT_LAUNCHER_POSITION;
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object") {
+      const { edge, top } = parsed;
+      if ((edge === "left" || edge === "right") && typeof top === "number" && Number.isFinite(top)) {
+        return { edge, top: clampTop(top) };
+      }
+    }
+    return DEFAULT_LAUNCHER_POSITION;
+  } catch {
+    return DEFAULT_LAUNCHER_POSITION;
+  }
+}
+function saveLauncherPosition(pos, store = localStorage) {
+  store.setItem(STORAGE_KEY3, JSON.stringify(pos));
+}
+var STORAGE_KEY3, DEFAULT_LAUNCHER_POSITION;
+var init_storage2 = __esm({
+  "src/launcher/storage.ts"() {
+    "use strict";
+    STORAGE_KEY3 = "comments:launcher-position";
+    DEFAULT_LAUNCHER_POSITION = { edge: "right", top: 92 };
+  }
+});
+
+// src/launcher/useDraggablePosition.ts
+function useDraggablePosition() {
+  const [position, setPosition] = (0, import_react16.useState)(() => loadLauncherPosition());
+  const [dragging, setDragging] = (0, import_react16.useState)(false);
+  const movedRef = (0, import_react16.useRef)(false);
+  const onPointerDown = (0, import_react16.useCallback)((e) => {
+    if (e.button !== 0) return;
+    movedRef.current = false;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let moved = false;
+    let next = null;
+    const onMove = (ev) => {
+      if (!moved && Math.hypot(ev.clientX - startX, ev.clientY - startY) < DRAG_THRESHOLD) return;
+      if (!moved) {
+        moved = true;
+        movedRef.current = true;
+        setDragging(true);
+      }
+      next = {
+        edge: ev.clientX < window.innerWidth / 2 ? "left" : "right",
+        top: clampTop(ev.clientY / window.innerHeight * 100)
+      };
+      setPosition(next);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      if (moved && next) {
+        setDragging(false);
+        saveLauncherPosition(next);
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, []);
+  const onClickCapture = (0, import_react16.useCallback)(
+    (e) => {
+      if (movedRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+        movedRef.current = false;
+      }
+    },
+    []
+  );
+  const style = {
+    top: `${position.top}%`,
+    transform: "translateY(-50%)",
+    ...position.edge === "left" ? { left: EDGE_INSET } : { right: EDGE_INSET }
+  };
+  return { position, dragging, style, onPointerDown, onClickCapture };
+}
+var import_react16, DRAG_THRESHOLD, EDGE_INSET;
+var init_useDraggablePosition = __esm({
+  "src/launcher/useDraggablePosition.ts"() {
+    "use strict";
+    import_react16 = __toESM(require_react(), 1);
+    init_storage2();
+    DRAG_THRESHOLD = 4;
+    EDGE_INSET = "16px";
+  }
+});
+
 // src/ui/Launcher.tsx
 function Launcher({
   placing,
   onTogglePlace,
-  showResolved,
-  onShowResolved,
   openCount,
+  panelOpen,
   onTogglePanel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "cmnt:fixed cmnt:bottom-4 cmnt:right-4 cmnt:flex cmnt:items-center cmnt:gap-2 cmnt:bg-white cmnt:border cmnt:border-gray-200 cmnt:rounded-full cmnt:py-1.5 cmnt:pl-3 cmnt:pr-2 cmnt:pointer-events-auto cmnt:shadow-[0_6px_20px_rgba(0,0,0,0.18)]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        "aria-label": "Open comments panel",
-        "data-testid": "comments-panel-open",
-        onClick: onTogglePanel,
-        className: "cmnt:hover:bg-gray-100",
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": true, children: "\u2630" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      "button",
-      {
-        type: "button",
-        role: "switch",
-        "aria-checked": showResolved,
-        "aria-label": "Show resolved threads",
-        onClick: () => onShowResolved(!showResolved),
-        className: "cmnt:inline-flex cmnt:items-center cmnt:gap-1.5 cmnt:bg-transparent cmnt:border-none cmnt:cursor-pointer cmnt:text-xs cmnt:text-gray-500",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "span",
-            {
-              "aria-hidden": true,
-              className: cn(
-                "cmnt:w-7 cmnt:h-4 cmnt:rounded-full cmnt:relative cmnt:transition-colors",
-                showResolved ? "cmnt:bg-blue-600" : "cmnt:bg-gray-300"
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const { style, dragging, onPointerDown, onClickCapture } = useDraggablePosition();
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      style,
+      onPointerDown,
+      onClickCapture,
+      className: cn(
+        "cmnt:fixed cmnt:z-[var(--cmnt-z-launcher)] cmnt:flex cmnt:items-center cmnt:gap-1 cmnt:bg-white cmnt:border cmnt:border-gray-200 cmnt:rounded-full cmnt:p-1 cmnt:pointer-events-auto cmnt:select-none cmnt:touch-none cmnt:shadow-[0_6px_20px_rgba(0,0,0,0.18)]",
+        dragging ? "cmnt:cursor-grabbing" : "cmnt:cursor-grab"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            "aria-label": panelOpen ? "Close comments panel" : "Open comments panel",
+            "aria-expanded": panelOpen,
+            "data-testid": "comments-panel-open",
+            onClick: onTogglePanel,
+            className: "cmnt:hover:bg-gray-100",
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": true, children: "\u2630" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          Button,
+          {
+            variant: "primary",
+            size: "icon",
+            "data-comments-place": true,
+            "data-testid": "comments-place",
+            "aria-pressed": placing,
+            "aria-label": placing ? "Click on the page to comment" : "Add comment",
+            onClick: onTogglePlace,
+            className: cn("cmnt:relative", placing && "cmnt:bg-blue-800"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": true, children: placing ? "\u270E" : "\uFF0B" }),
+              !placing && openCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "span",
                 {
-                  className: cn(
-                    "cmnt:absolute cmnt:top-0.5 cmnt:w-3 cmnt:h-3 cmnt:rounded-full cmnt:bg-white cmnt:transition-all",
-                    showResolved ? "cmnt:left-[14px]" : "cmnt:left-0.5"
-                  )
+                  "aria-hidden": true,
+                  className: "cmnt:absolute cmnt:-top-1 cmnt:-right-1 cmnt:min-w-4 cmnt:h-4 cmnt:px-1 cmnt:rounded-full cmnt:bg-blue-800 cmnt:text-white cmnt:text-[10px] cmnt:leading-4 cmnt:text-center cmnt:pointer-events-none",
+                  children: openCount
                 }
               )
-            }
-          ),
-          "Resolved"
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Button,
-      {
-        variant: "primary",
-        size: "md",
-        "data-comments-place": true,
-        "data-testid": "comments-place",
-        "aria-pressed": placing,
-        onClick: onTogglePlace,
-        className: cn(placing && "cmnt:bg-blue-800"),
-        children: placing ? "Click to comment\u2026" : `+ Comment${openCount ? ` (${openCount})` : ""}`
-      }
-    )
-  ] });
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 var import_jsx_runtime26;
 var init_Launcher = __esm({
   "src/ui/Launcher.tsx"() {
     "use strict";
+    init_useDraggablePosition();
     init_cn();
     init_Button();
     import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
@@ -38119,7 +38262,7 @@ function useFocusPin({
   toast,
   timeoutMs = 2e3
 }) {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!pendingFocusId) return;
     if (placed) {
       const el = getElement(pendingFocusId);
@@ -38136,17 +38279,17 @@ function useFocusPin({
     }, timeoutMs);
     return () => window.clearTimeout(giveUp);
   }, [pendingFocusId, placed, getElement, dispatch, toast, timeoutMs]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!focusedId) return;
     const clear = window.setTimeout(() => dispatch({ type: "CLEAR_FOCUS" }), PULSE_MS);
     return () => window.clearTimeout(clear);
   }, [focusedId, dispatch]);
 }
-var import_react16, PULSE_MS;
+var import_react17, PULSE_MS;
 var init_useFocusPin = __esm({
   "src/marker/useFocusPin.ts"() {
     "use strict";
-    import_react16 = __toESM(require_react(), 1);
+    import_react17 = __toESM(require_react(), 1);
     PULSE_MS = 1500;
   }
 });
@@ -38166,16 +38309,17 @@ function MarkerLayer({
   const controller = useController();
   const state = useThreadsState();
   const placements2 = useVisiblePlacements();
-  const [placing, setPlacing] = (0, import_react17.useState)(false);
-  const [activeKey, setActiveKey] = (0, import_react17.useState)(pageKey);
+  const [placing, setPlacing] = (0, import_react18.useState)(false);
+  const [activeKey, setActiveKey] = (0, import_react18.useState)(pageKey);
   const toast = useToast();
   const container = usePortalContainer();
-  const runtime = (0, import_react17.useRef)(null);
+  const runtime = (0, import_react18.useRef)(null);
   const openCount = Object.values(state.itemsById).filter((i) => i.status === "open").length;
   const panel = usePanelController();
+  const panelOpen = usePanelState().open;
   const pendingFocusId = state.pendingFocusId;
   const placed = pendingFocusId ? Boolean(state.placementsById[pendingFocusId]) : false;
-  const getElement = (0, import_react17.useCallback)(
+  const getElement = (0, import_react18.useCallback)(
     (id) => runtime.current?.placed.find((p) => p.item.id === id)?.el ?? null,
     []
   );
@@ -38187,7 +38331,7 @@ function MarkerLayer({
     dispatch,
     toast
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const rt = createRuntime({
       client,
       pageKey: activeKey,
@@ -38198,7 +38342,10 @@ function MarkerLayer({
       onPlacements: (next) => dispatch({ type: "INGEST_PLACEMENTS", placements: next })
     });
     runtime.current = rt;
-    controller.registerRuntime((id, status) => rt.setItemStatus(id, status));
+    controller.registerRuntime({
+      setStatus: (id, status) => rt.setItemStatus(id, status),
+      bumpCommentCount: (id, delta) => rt.bumpCommentCount(id, delta)
+    });
     void rt.refresh().then(() => {
       const handoff = takeFocusHandoff();
       if (handoff) {
@@ -38227,13 +38374,13 @@ function MarkerLayer({
       runtime.current = null;
     };
   }, [client, activeKey, dispatch, controller, panel]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (state.lostOpenId) {
       toast("This comment\u2019s anchor was lost");
       dispatch({ type: "CLEAR_LOST_OPEN" });
     }
   }, [state.lostOpenId, toast, dispatch]);
-  const createThread = (0, import_react17.useCallback)(
+  const createThread = (0, import_react18.useCallback)(
     async ({ text, attachmentIds, who }, anchor) => {
       try {
         const created = await client.createThread({
@@ -38255,7 +38402,7 @@ function MarkerLayer({
     },
     [client, activeKey, provenance, toast, dispatch]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!placing) return;
     const onClick = (e) => {
       const target = e.target;
@@ -38333,7 +38480,7 @@ function MarkerLayer({
           collisionPadding: 8,
           onOpenAutoFocus: (e) => e.preventDefault(),
           "data-testid": "comments-draft",
-          className: "cmnt:w-80 cmnt:max-w-[calc(100vw-16px)] cmnt:bg-white cmnt:border cmnt:border-gray-200 cmnt:rounded-xl cmnt:pointer-events-auto cmnt:overflow-hidden cmnt:shadow-[0_12px_32px_rgba(0,0,0,0.18)]",
+          className: "cmnt:z-[var(--cmnt-z-surface)] cmnt:w-80 cmnt:max-w-[calc(100vw-16px)] cmnt:bg-white cmnt:border cmnt:border-gray-200 cmnt:rounded-xl cmnt:pointer-events-auto cmnt:overflow-hidden cmnt:shadow-[0_12px_32px_rgba(0,0,0,0.18)]",
           children: [
             state.draft.anchor.selection?.quote && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "cmnt:mx-3 cmnt:mt-2 cmnt:px-2 cmnt:py-1.5 cmnt:border-l-[3px] cmnt:border-blue-600 cmnt:bg-[#f3f6fc] cmnt:text-xs cmnt:text-gray-700 cmnt:italic", children: [
               "\u201C",
@@ -38361,20 +38508,19 @@ function MarkerLayer({
       {
         placing,
         onTogglePlace: () => setPlacing((p) => !p),
-        showResolved: state.showResolved,
-        onShowResolved: (v) => controller.setShowResolved(v),
         openCount,
-        onTogglePanel: () => void panel.openPanel()
+        panelOpen,
+        onTogglePanel: () => void (panelOpen ? panel.closePanel() : panel.openPanel())
       }
     )
   ] });
 }
-var import_react17, import_jsx_runtime27;
+var import_react18, import_jsx_runtime27;
 var init_MarkerLayer = __esm({
   "src/marker/MarkerLayer.tsx"() {
     "use strict";
     init_dist21();
-    import_react17 = __toESM(require_react(), 1);
+    import_react18 = __toESM(require_react(), 1);
     init_capture();
     init_runtime();
     init_errors3();
@@ -38403,6 +38549,16 @@ function PanelRow({ item, onSelect, onReply, onResolve }) {
   const rootText = item.rootComment?.text ?? "";
   const author = item.createdBy;
   const context = item.pageTitle ?? item.pageUrl;
+  const [copied, setCopied] = (0, import_react19.useState)(false);
+  const copiedTimer = (0, import_react19.useRef)(void 0);
+  (0, import_react19.useEffect)(() => () => clearTimeout(copiedTimer.current), []);
+  const onCopy = () => {
+    void navigator.clipboard?.writeText(threadLink(item.pageUrl, item.id))?.catch(() => {
+    });
+    setCopied(true);
+    clearTimeout(copiedTimer.current);
+    copiedTimer.current = setTimeout(() => setCopied(false), 1e3);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "data-thread-id": item.id, className: "cmnt:border-b cmnt:border-[#f1f3f5]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "button",
@@ -38426,7 +38582,7 @@ function PanelRow({ item, onSelect, onReply, onResolve }) {
             /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "cmnt:flex cmnt:items-center cmnt:gap-1.5", children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("b", { className: "cmnt:text-xs cmnt:truncate", children: author.name ?? author.email }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "cmnt:text-gray-400 cmnt:text-[11px]", children: relativeTime(item.updatedAt) }),
-              orphaned && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "cmnt:ml-1 cmnt:px-1.5 cmnt:py-0.5 cmnt:rounded cmnt:bg-amber-100 cmnt:text-amber-700 cmnt:font-medium cmnt:text-[11px]", children: [
+              orphaned && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "cmnt:ml-1 cmnt:px-1.5 cmnt:py-0.5 cmnt:rounded-[4px] cmnt:bg-amber-100 cmnt:text-amber-700 cmnt:font-medium cmnt:text-[11px]", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, children: "\u26A0" }),
                 " anchor lost"
               ] })
@@ -38469,19 +38625,19 @@ function PanelRow({ item, onSelect, onReply, onResolve }) {
           variant: "link",
           size: "inline",
           "aria-label": "Copy link",
-          onClick: () => void navigator.clipboard?.writeText(threadLink(item.pageUrl, item.id))?.catch(() => {
-          }),
+          onClick: onCopy,
           className: "cmnt:ml-3 cmnt:text-[11px] cmnt:text-gray-500",
-          children: "Copy link"
+          children: copied ? "Copied!" : "Copy link"
         }
       )
     ] })
   ] });
 }
-var import_jsx_runtime28;
+var import_react19, import_jsx_runtime28;
 var init_PanelRow = __esm({
   "src/panel/PanelRow.tsx"() {
     "use strict";
+    import_react19 = __toESM(require_react(), 1);
     init_config();
     init_relativeTime();
     init_avatar();
@@ -38525,13 +38681,19 @@ function PanelDrawer({
   const state = usePanelState();
   const panel = usePanelController();
   const threads = useController();
+  const showResolved = useShowResolved();
   const container = usePortalContainer();
   const mainList = mainListExcludingReview(state);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!state.open) return;
     threads.registerStatusListener(() => void panel.refresh());
     return () => threads.registerStatusListener(null);
   }, [state.open, threads, panel]);
+  (0, import_react20.useEffect)(() => {
+    if (!state.open) return;
+    threads.registerCommentCountListener((id, delta) => panel.bumpCommentCount(id, delta));
+    return () => threads.registerCommentCountListener(null);
+  }, [state.open, threads, panel]);
   function onSelect(row) {
     const here = resolvePageKey2(window.location.href);
     if (row.pageKey === here) {
@@ -38548,7 +38710,7 @@ function PanelDrawer({
       "data-testid": "comments-panel",
       onInteractOutside: (e) => e.preventDefault(),
       onOpenAutoFocus: (e) => e.preventDefault(),
-      className: "cmnt:fixed cmnt:top-0 cmnt:right-0 cmnt:bottom-0 cmnt:w-[360px] cmnt:max-w-[calc(100vw-16px)] cmnt:bg-white cmnt:border-l cmnt:border-gray-200 cmnt:flex cmnt:flex-col cmnt:pointer-events-auto cmnt:shadow-[-8px_0_24px_rgba(0,0,0,0.12)]",
+      className: "cmnt:fixed cmnt:z-[var(--cmnt-z-surface)] cmnt:top-0 cmnt:right-0 cmnt:bottom-0 cmnt:w-[360px] cmnt:max-w-[calc(100vw-16px)] cmnt:bg-white cmnt:border-l cmnt:border-gray-200 cmnt:flex cmnt:flex-col cmnt:pointer-events-auto cmnt:shadow-[-8px_0_24px_rgba(0,0,0,0.12)]",
       children: state.view === "detail" && state.detailThreadId ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "cmnt:flex cmnt:items-center cmnt:justify-between cmnt:px-3 cmnt:py-2 cmnt:border-b cmnt:border-gray-200", children: [
           /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
@@ -38601,6 +38763,39 @@ function PanelDrawer({
             f.value
           )) })
         ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "cmnt:flex cmnt:items-center cmnt:justify-between cmnt:px-3 cmnt:py-2 cmnt:border-b cmnt:border-gray-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "cmnt:text-xs cmnt:text-gray-500", children: "Show resolved pins on page" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": showResolved,
+              "aria-label": "Show resolved threads",
+              onClick: () => threads.setShowResolved(!showResolved),
+              className: "cmnt:inline-flex cmnt:items-center cmnt:bg-transparent cmnt:border-0 cmnt:cursor-pointer cmnt:p-0",
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "cmnt:w-7 cmnt:h-4 cmnt:rounded-full cmnt:relative cmnt:transition-colors",
+                    showResolved ? "cmnt:bg-blue-600" : "cmnt:bg-gray-300"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "cmnt:absolute cmnt:top-0.5 cmnt:w-3 cmnt:h-3 cmnt:rounded-full cmnt:bg-white cmnt:transition-all",
+                        showResolved ? "cmnt:left-[14px]" : "cmnt:left-0.5"
+                      )
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "cmnt:flex-1 cmnt:overflow-y-auto", children: [
           state.needsReview.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { "data-testid": "comments-needs-review", children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "cmnt:px-3 cmnt:py-1.5 cmnt:text-[11px] cmnt:font-semibold cmnt:text-amber-700 cmnt:bg-amber-50", children: [
@@ -38679,12 +38874,12 @@ function PanelDrawer({
     }
   ) }) });
 }
-var import_react18, import_jsx_runtime29, FILTERS;
+var import_react20, import_jsx_runtime29, FILTERS;
 var init_PanelDrawer = __esm({
   "src/panel/PanelDrawer.tsx"() {
     "use strict";
     init_dist17();
-    import_react18 = __toESM(require_react(), 1);
+    import_react20 = __toESM(require_react(), 1);
     init_providers();
     init_DraftsProvider();
     init_cn();
@@ -38706,26 +38901,41 @@ var init_PanelDrawer = __esm({
 
 // src/ui/LoginLauncher.tsx
 function LoginLauncher({ onLogIn }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "cmnt:fixed cmnt:bottom-4 cmnt:right-4 cmnt:flex cmnt:items-center cmnt:pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    Button,
+  const { style, dragging, onPointerDown, onClickCapture } = useDraggablePosition();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "div",
     {
-      variant: "primary",
-      size: "md",
-      "aria-label": "Log in",
-      "data-testid": "comments-login",
-      onClick: onLogIn,
-      className: "cmnt:gap-1.5 cmnt:shadow-[0_6px_20px_rgba(0,0,0,0.18)]",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": true, children: "\u{1F511}" }),
-        " Log In"
-      ]
+      style,
+      onPointerDown,
+      onClickCapture,
+      className: cn(
+        "cmnt:fixed cmnt:z-[var(--cmnt-z-launcher)] cmnt:flex cmnt:items-center cmnt:pointer-events-auto cmnt:select-none cmnt:touch-none",
+        dragging ? "cmnt:cursor-grabbing" : "cmnt:cursor-grab"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        Button,
+        {
+          variant: "primary",
+          size: "md",
+          "aria-label": "Log in",
+          "data-testid": "comments-login",
+          onClick: onLogIn,
+          className: "cmnt:gap-1.5 cmnt:shadow-[0_6px_20px_rgba(0,0,0,0.18)]",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": true, children: "\u{1F511}" }),
+            " Log In"
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 var import_jsx_runtime30;
 var init_LoginLauncher = __esm({
   "src/ui/LoginLauncher.tsx"() {
     "use strict";
+    init_useDraggablePosition();
+    init_cn();
     init_Button();
     import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
   }
@@ -38733,12 +38943,12 @@ var init_LoginLauncher = __esm({
 
 // src/app/app.tsx
 function WidgetApp({ options, client: injected }) {
-  const [client] = (0, import_react19.useState)(
+  const [client] = (0, import_react21.useState)(
     () => injected ?? createApiClient({ endpoint: options.endpoint, key: options.key })
   );
-  const [identity, setIdentity] = (0, import_react19.useState)(() => loadIdentity());
-  const [modalOpen, setModalOpen] = (0, import_react19.useState)(false);
-  const resumeRef = (0, import_react19.useRef)(null);
+  const [identity, setIdentity] = (0, import_react21.useState)(() => loadIdentity());
+  const [modalOpen, setModalOpen] = (0, import_react21.useState)(false);
+  const resumeRef = (0, import_react21.useRef)(null);
   const pageUrl = window.location.href;
   const pageKey = resolvePageKey(options, pageUrl);
   function onNeedIdentity(resume) {
@@ -38790,11 +39000,11 @@ function WidgetApp({ options, client: injected }) {
     )
   ] }) }) }) });
 }
-var import_react19, import_jsx_runtime31;
+var import_react21, import_jsx_runtime31;
 var init_app = __esm({
   "src/app/app.tsx"() {
     "use strict";
-    import_react19 = __toESM(require_react(), 1);
+    import_react21 = __toESM(require_react(), 1);
     init_client();
     init_config();
     init_DraftsProvider();
@@ -38817,7 +39027,7 @@ var widgetCss;
 var init_widget_css_generated = __esm({
   "src/app/widget-css.generated.ts"() {
     "use strict";
-    widgetCss = '/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--cmnt-color-red-500:oklch(63.7% .237 25.331);--cmnt-color-red-700:oklch(50.5% .213 27.518);--cmnt-color-amber-50:oklch(98.7% .022 95.277);--cmnt-color-amber-100:oklch(96.2% .059 95.617);--cmnt-color-amber-700:oklch(55.5% .163 48.998);--cmnt-color-green-600:oklch(62.7% .194 149.214);--cmnt-color-blue-500:oklch(62.3% .214 259.815);--cmnt-color-blue-600:oklch(54.6% .245 262.881);--cmnt-color-blue-800:oklch(42.4% .199 265.638);--cmnt-color-slate-300:oklch(86.9% .022 252.894);--cmnt-color-slate-500:oklch(55.4% .046 257.417);--cmnt-color-gray-50:oklch(98.5% .002 247.839);--cmnt-color-gray-100:oklch(96.7% .003 264.542);--cmnt-color-gray-200:oklch(92.8% .006 264.531);--cmnt-color-gray-300:oklch(87.2% .01 258.338);--cmnt-color-gray-400:oklch(70.7% .022 261.325);--cmnt-color-gray-500:oklch(55.1% .027 264.364);--cmnt-color-gray-600:oklch(44.6% .03 256.802);--cmnt-color-gray-700:oklch(37.3% .034 259.733);--cmnt-color-gray-800:oklch(27.8% .033 256.848);--cmnt-color-gray-900:oklch(21% .034 264.665);--cmnt-color-black:#000;--cmnt-color-white:#fff;--cmnt-spacing:.25rem;--cmnt-text-xs:.75rem;--cmnt-text-xs--line-height:calc(1 / .75);--cmnt-text-sm:.875rem;--cmnt-text-sm--line-height:calc(1.25 / .875);--cmnt-text-base:1rem;--cmnt-text-base--line-height:calc(1.5 / 1);--cmnt-font-weight-normal:400;--cmnt-font-weight-medium:500;--cmnt-font-weight-semibold:600;--cmnt-font-weight-bold:700;--cmnt-leading-relaxed:1.625;--cmnt-radius-md:.375rem;--cmnt-radius-lg:.5rem;--cmnt-radius-xl:.75rem;--cmnt-animate-spin:spin 1s linear infinite;--cmnt-animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--cmnt-default-transition-duration:.15s;--cmnt-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base{[data-comments-root] button,[data-comments-root] input,[data-comments-root] textarea,[data-comments-root] select{font-family:inherit}[data-comments-root],[data-comments-root] *,[data-comments-root] :before,[data-comments-root] :after{box-sizing:border-box}}@layer components;.cmnt\\:pointer-events-auto{pointer-events:auto}.cmnt\\:pointer-events-none{pointer-events:none}.cmnt\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cmnt\\:absolute{position:absolute}.cmnt\\:fixed{position:fixed}.cmnt\\:relative{position:relative}.cmnt\\:inset-0{inset:calc(var(--cmnt-spacing) * 0)}.cmnt\\:-top-1\\.5{top:calc(var(--cmnt-spacing) * -1.5)}.cmnt\\:top-0{top:calc(var(--cmnt-spacing) * 0)}.cmnt\\:top-0\\.5{top:calc(var(--cmnt-spacing) * .5)}.cmnt\\:top-1{top:calc(var(--cmnt-spacing) * 1)}.cmnt\\:top-1\\.5{top:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:top-1\\/2{top:50%}.cmnt\\:top-4{top:calc(var(--cmnt-spacing) * 4)}.cmnt\\:-right-\\[7px\\]{right:-7px}.cmnt\\:right-0{right:calc(var(--cmnt-spacing) * 0)}.cmnt\\:right-0\\.5{right:calc(var(--cmnt-spacing) * .5)}.cmnt\\:right-1{right:calc(var(--cmnt-spacing) * 1)}.cmnt\\:right-4{right:calc(var(--cmnt-spacing) * 4)}.cmnt\\:bottom-0{bottom:calc(var(--cmnt-spacing) * 0)}.cmnt\\:bottom-4{bottom:calc(var(--cmnt-spacing) * 4)}.cmnt\\:left-0\\.5{left:calc(var(--cmnt-spacing) * .5)}.cmnt\\:left-1\\.5{left:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:left-1\\/2{left:50%}.cmnt\\:left-\\[14px\\]{left:14px}.cmnt\\:z-50{z-index:50}.cmnt\\:m-0{margin:calc(var(--cmnt-spacing) * 0)}.cmnt\\:mx-3{margin-inline:calc(var(--cmnt-spacing) * 3)}.cmnt\\:my-3{margin-block:calc(var(--cmnt-spacing) * 3)}.cmnt\\:-mt-\\[42px\\]{margin-top:-42px}.cmnt\\:mt-0{margin-top:calc(var(--cmnt-spacing) * 0)}.cmnt\\:mt-0\\.5{margin-top:calc(var(--cmnt-spacing) * .5)}.cmnt\\:mt-1\\.5{margin-top:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:mt-2{margin-top:calc(var(--cmnt-spacing) * 2)}.cmnt\\:mb-1{margin-bottom:calc(var(--cmnt-spacing) * 1)}.cmnt\\:mb-2{margin-bottom:calc(var(--cmnt-spacing) * 2)}.cmnt\\:mb-3\\.5{margin-bottom:calc(var(--cmnt-spacing) * 3.5)}.cmnt\\:-ml-\\[21px\\]{margin-left:-21px}.cmnt\\:ml-1{margin-left:calc(var(--cmnt-spacing) * 1)}.cmnt\\:ml-3{margin-left:calc(var(--cmnt-spacing) * 3)}.cmnt\\:block{display:block}.cmnt\\:flex{display:flex}.cmnt\\:hidden{display:none}.cmnt\\:inline-flex{display:inline-flex}.cmnt\\:h-2\\.5{height:calc(var(--cmnt-spacing) * 2.5)}.cmnt\\:h-3{height:calc(var(--cmnt-spacing) * 3)}.cmnt\\:h-4{height:calc(var(--cmnt-spacing) * 4)}.cmnt\\:h-5{height:calc(var(--cmnt-spacing) * 5)}.cmnt\\:h-7{height:calc(var(--cmnt-spacing) * 7)}.cmnt\\:h-\\[22px\\]{height:22px}.cmnt\\:h-\\[26px\\]{height:26px}.cmnt\\:h-\\[30px\\]{height:30px}.cmnt\\:h-\\[42px\\]{height:42px}.cmnt\\:h-\\[58px\\]{height:58px}.cmnt\\:h-full{height:100%}.cmnt\\:h-px{height:1px}.cmnt\\:max-h-\\[230px\\]{max-height:230px}.cmnt\\:min-h-0{min-height:calc(var(--cmnt-spacing) * 0)}.cmnt\\:w-2\\/5{width:40%}.cmnt\\:w-3{width:calc(var(--cmnt-spacing) * 3)}.cmnt\\:w-4{width:calc(var(--cmnt-spacing) * 4)}.cmnt\\:w-5{width:calc(var(--cmnt-spacing) * 5)}.cmnt\\:w-7{width:calc(var(--cmnt-spacing) * 7)}.cmnt\\:w-80{width:calc(var(--cmnt-spacing) * 80)}.cmnt\\:w-\\[26px\\]{width:26px}.cmnt\\:w-\\[30px\\]{width:30px}.cmnt\\:w-\\[42px\\]{width:42px}.cmnt\\:w-\\[85\\%\\]{width:85%}.cmnt\\:w-\\[88px\\]{width:88px}.cmnt\\:w-\\[360px\\]{width:360px}.cmnt\\:w-full{width:100%}.cmnt\\:w-max{width:max-content}.cmnt\\:max-w-\\[160px\\]{max-width:160px}.cmnt\\:max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.cmnt\\:min-w-0{min-width:calc(var(--cmnt-spacing) * 0)}.cmnt\\:min-w-80{min-width:calc(var(--cmnt-spacing) * 80)}.cmnt\\:min-w-\\[22px\\]{min-width:22px}.cmnt\\:flex-1{flex:1}.cmnt\\:shrink-0{flex-shrink:0}.cmnt\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.cmnt\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.cmnt\\:animate-ping{animation:var(--cmnt-animate-ping)}.cmnt\\:animate-spin{animation:var(--cmnt-animate-spin)}.cmnt\\:cursor-pointer{cursor:pointer}.cmnt\\:flex-col{flex-direction:column}.cmnt\\:items-baseline{align-items:baseline}.cmnt\\:items-center{align-items:center}.cmnt\\:items-start{align-items:flex-start}.cmnt\\:justify-between{justify-content:space-between}.cmnt\\:justify-center{justify-content:center}.cmnt\\:gap-1{gap:calc(var(--cmnt-spacing) * 1)}.cmnt\\:gap-1\\.5{gap:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:gap-2{gap:calc(var(--cmnt-spacing) * 2)}.cmnt\\:gap-\\[9px\\]{gap:9px}.cmnt\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cmnt\\:overflow-auto{overflow:auto}.cmnt\\:overflow-hidden{overflow:hidden}.cmnt\\:overflow-y-auto{overflow-y:auto}.cmnt\\:rounded{border-radius:.25rem}.cmnt\\:rounded-\\[11px\\]{border-radius:11px}.cmnt\\:rounded-full{border-radius:3.40282e38px}.cmnt\\:rounded-lg{border-radius:var(--cmnt-radius-lg)}.cmnt\\:rounded-md{border-radius:var(--cmnt-radius-md)}.cmnt\\:rounded-xl{border-radius:var(--cmnt-radius-xl)}.cmnt\\:border{border-style:var(--tw-border-style);border-width:1px}.cmnt\\:border-0{border-style:var(--tw-border-style);border-width:0}.cmnt\\:border-2{border-style:var(--tw-border-style);border-width:2px}.cmnt\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.cmnt\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.cmnt\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.cmnt\\:border-l-\\[3px\\]{border-left-style:var(--tw-border-style);border-left-width:3px}.cmnt\\:border-none{--tw-border-style:none;border-style:none}.cmnt\\:border-\\[\\#f1f3f5\\]{border-color:#f1f3f5}.cmnt\\:border-blue-600{border-color:var(--cmnt-color-blue-600)}.cmnt\\:border-gray-200{border-color:var(--cmnt-color-gray-200)}.cmnt\\:border-gray-300{border-color:var(--cmnt-color-gray-300)}.cmnt\\:border-slate-300{border-color:var(--cmnt-color-slate-300)}.cmnt\\:border-white{border-color:var(--cmnt-color-white)}.cmnt\\:border-t-transparent{border-top-color:#0000}.cmnt\\:bg-\\[\\#93b4f5\\]{background-color:#93b4f5}.cmnt\\:bg-\\[\\#dbe3f0\\]{background-color:#dbe3f0}.cmnt\\:bg-\\[\\#f3f6fc\\]{background-color:#f3f6fc}.cmnt\\:bg-\\[\\#f7fdf9\\]{background-color:#f7fdf9}.cmnt\\:bg-amber-50{background-color:var(--cmnt-color-amber-50)}.cmnt\\:bg-amber-100{background-color:var(--cmnt-color-amber-100)}.cmnt\\:bg-black\\/40{background-color:var(--cmnt-color-black)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-black\\/40{background-color:color-mix(in oklab, var(--cmnt-color-black) 40%, transparent)}}.cmnt\\:bg-black\\/55{background-color:var(--cmnt-color-black)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-black\\/55{background-color:color-mix(in oklab, var(--cmnt-color-black) 55%, transparent)}}.cmnt\\:bg-blue-500\\/40{background-color:var(--cmnt-color-blue-500)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-blue-500\\/40{background-color:color-mix(in oklab, var(--cmnt-color-blue-500) 40%, transparent)}}.cmnt\\:bg-blue-600,.cmnt\\:bg-blue-600\\/20{background-color:var(--cmnt-color-blue-600)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-blue-600\\/20{background-color:color-mix(in oklab, var(--cmnt-color-blue-600) 20%, transparent)}}.cmnt\\:bg-blue-800{background-color:var(--cmnt-color-blue-800)}.cmnt\\:bg-gray-50{background-color:var(--cmnt-color-gray-50)}.cmnt\\:bg-gray-100{background-color:var(--cmnt-color-gray-100)}.cmnt\\:bg-gray-200{background-color:var(--cmnt-color-gray-200)}.cmnt\\:bg-gray-300{background-color:var(--cmnt-color-gray-300)}.cmnt\\:bg-gray-400{background-color:var(--cmnt-color-gray-400)}.cmnt\\:bg-gray-800{background-color:var(--cmnt-color-gray-800)}.cmnt\\:bg-gray-900{background-color:var(--cmnt-color-gray-900)}.cmnt\\:bg-red-500\\/15{background-color:var(--cmnt-color-red-500)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-red-500\\/15{background-color:color-mix(in oklab, var(--cmnt-color-red-500) 15%, transparent)}}.cmnt\\:bg-transparent{background-color:#0000}.cmnt\\:bg-white,.cmnt\\:bg-white\\/55{background-color:var(--cmnt-color-white)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-white\\/55{background-color:color-mix(in oklab, var(--cmnt-color-white) 55%, transparent)}}.cmnt\\:object-cover{object-fit:cover}.cmnt\\:p-0{padding:calc(var(--cmnt-spacing) * 0)}.cmnt\\:p-1{padding:calc(var(--cmnt-spacing) * 1)}.cmnt\\:p-2{padding:calc(var(--cmnt-spacing) * 2)}.cmnt\\:p-3{padding:calc(var(--cmnt-spacing) * 3)}.cmnt\\:p-6{padding:calc(var(--cmnt-spacing) * 6)}.cmnt\\:px-1{padding-inline:calc(var(--cmnt-spacing) * 1)}.cmnt\\:px-1\\.5{padding-inline:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:px-2{padding-inline:calc(var(--cmnt-spacing) * 2)}.cmnt\\:px-3{padding-inline:calc(var(--cmnt-spacing) * 3)}.cmnt\\:px-4{padding-inline:calc(var(--cmnt-spacing) * 4)}.cmnt\\:px-\\[5px\\]{padding-inline:5px}.cmnt\\:py-0\\.5{padding-block:calc(var(--cmnt-spacing) * .5)}.cmnt\\:py-1{padding-block:calc(var(--cmnt-spacing) * 1)}.cmnt\\:py-1\\.5{padding-block:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:py-2{padding-block:calc(var(--cmnt-spacing) * 2)}.cmnt\\:py-2\\.5{padding-block:calc(var(--cmnt-spacing) * 2.5)}.cmnt\\:py-4{padding-block:calc(var(--cmnt-spacing) * 4)}.cmnt\\:py-6{padding-block:calc(var(--cmnt-spacing) * 6)}.cmnt\\:py-\\[9px\\]{padding-block:9px}.cmnt\\:pt-2\\.5{padding-top:calc(var(--cmnt-spacing) * 2.5)}.cmnt\\:pr-2{padding-right:calc(var(--cmnt-spacing) * 2)}.cmnt\\:pb-1{padding-bottom:calc(var(--cmnt-spacing) * 1)}.cmnt\\:pb-2{padding-bottom:calc(var(--cmnt-spacing) * 2)}.cmnt\\:pl-3{padding-left:calc(var(--cmnt-spacing) * 3)}.cmnt\\:pl-\\[46px\\]{padding-left:46px}.cmnt\\:text-center{text-align:center}.cmnt\\:text-left{text-align:left}.cmnt\\:text-base{font-size:var(--cmnt-text-base);line-height:var(--tw-leading,var(--cmnt-text-base--line-height))}.cmnt\\:text-sm{font-size:var(--cmnt-text-sm);line-height:var(--tw-leading,var(--cmnt-text-sm--line-height))}.cmnt\\:text-xs{font-size:var(--cmnt-text-xs);line-height:var(--tw-leading,var(--cmnt-text-xs--line-height))}.cmnt\\:text-\\[10px\\]{font-size:10px}.cmnt\\:text-\\[11px\\]{font-size:11px}.cmnt\\:text-\\[13px\\]{font-size:13px}.cmnt\\:leading-\\[0\\]{--tw-leading:0;line-height:0}.cmnt\\:leading-relaxed{--tw-leading:var(--cmnt-leading-relaxed);line-height:var(--cmnt-leading-relaxed)}.cmnt\\:font-bold{--tw-font-weight:var(--cmnt-font-weight-bold);font-weight:var(--cmnt-font-weight-bold)}.cmnt\\:font-medium{--tw-font-weight:var(--cmnt-font-weight-medium);font-weight:var(--cmnt-font-weight-medium)}.cmnt\\:font-normal{--tw-font-weight:var(--cmnt-font-weight-normal);font-weight:var(--cmnt-font-weight-normal)}.cmnt\\:font-semibold{--tw-font-weight:var(--cmnt-font-weight-semibold);font-weight:var(--cmnt-font-weight-semibold)}.cmnt\\:whitespace-pre-wrap{white-space:pre-wrap}.cmnt\\:text-amber-700{color:var(--cmnt-color-amber-700)}.cmnt\\:text-blue-600{color:var(--cmnt-color-blue-600)}.cmnt\\:text-gray-400{color:var(--cmnt-color-gray-400)}.cmnt\\:text-gray-500{color:var(--cmnt-color-gray-500)}.cmnt\\:text-gray-600{color:var(--cmnt-color-gray-600)}.cmnt\\:text-gray-700{color:var(--cmnt-color-gray-700)}.cmnt\\:text-gray-900{color:var(--cmnt-color-gray-900)}.cmnt\\:text-green-600{color:var(--cmnt-color-green-600)}.cmnt\\:text-red-700{color:var(--cmnt-color-red-700)}.cmnt\\:text-slate-500{color:var(--cmnt-color-slate-500)}.cmnt\\:text-white{color:var(--cmnt-color-white)}.cmnt\\:italic{font-style:italic}.cmnt\\:underline{text-decoration-line:underline}.cmnt\\:opacity-80{opacity:.8}.cmnt\\:shadow-\\[-8px_0_24px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:-8px 0 24px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:shadow-\\[0_6px_20px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 6px 20px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:shadow-\\[0_12px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 12px 32px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--cmnt-default-transition-timing-function));transition-duration:var(--tw-duration,var(--cmnt-default-transition-duration))}.cmnt\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--cmnt-default-transition-timing-function));transition-duration:var(--tw-duration,var(--cmnt-default-transition-duration))}.cmnt\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--cmnt-default-transition-timing-function));transition-duration:var(--tw-duration,var(--cmnt-default-transition-duration))}.cmnt\\:outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.cmnt\\:group-hover\\:opacity-100:is(:where(.cmnt\\:group):hover *){opacity:1}}.cmnt\\:first\\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}@media (hover:hover){.cmnt\\:hover\\:bg-gray-50:hover{background-color:var(--cmnt-color-gray-50)}.cmnt\\:hover\\:bg-gray-100:hover{background-color:var(--cmnt-color-gray-100)}.cmnt\\:hover\\:no-underline:hover{text-decoration-line:none}.cmnt\\:hover\\:underline:hover{text-decoration-line:underline}}.cmnt\\:disabled\\:cursor-default:disabled{cursor:default}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}';
+    widgetCss = '/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--cmnt-color-red-500:oklch(63.7% .237 25.331);--cmnt-color-red-700:oklch(50.5% .213 27.518);--cmnt-color-amber-50:oklch(98.7% .022 95.277);--cmnt-color-amber-100:oklch(96.2% .059 95.617);--cmnt-color-amber-700:oklch(55.5% .163 48.998);--cmnt-color-green-600:oklch(62.7% .194 149.214);--cmnt-color-blue-500:oklch(62.3% .214 259.815);--cmnt-color-blue-600:oklch(54.6% .245 262.881);--cmnt-color-blue-800:oklch(42.4% .199 265.638);--cmnt-color-slate-300:oklch(86.9% .022 252.894);--cmnt-color-slate-500:oklch(55.4% .046 257.417);--cmnt-color-gray-50:oklch(98.5% .002 247.839);--cmnt-color-gray-100:oklch(96.7% .003 264.542);--cmnt-color-gray-200:oklch(92.8% .006 264.531);--cmnt-color-gray-300:oklch(87.2% .01 258.338);--cmnt-color-gray-400:oklch(70.7% .022 261.325);--cmnt-color-gray-500:oklch(55.1% .027 264.364);--cmnt-color-gray-600:oklch(44.6% .03 256.802);--cmnt-color-gray-700:oklch(37.3% .034 259.733);--cmnt-color-gray-800:oklch(27.8% .033 256.848);--cmnt-color-gray-900:oklch(21% .034 264.665);--cmnt-color-black:#000;--cmnt-color-white:#fff;--cmnt-spacing:4px;--cmnt-text-xs:12px;--cmnt-text-xs--line-height:calc(1 / .75);--cmnt-text-sm:14px;--cmnt-text-sm--line-height:calc(1.25 / .875);--cmnt-text-base:16px;--cmnt-text-base--line-height:calc(1.5 / 1);--cmnt-font-weight-normal:400;--cmnt-font-weight-medium:500;--cmnt-font-weight-semibold:600;--cmnt-font-weight-bold:700;--cmnt-leading-relaxed:1.625;--cmnt-radius-md:6px;--cmnt-radius-lg:8px;--cmnt-radius-xl:12px;--cmnt-animate-spin:spin 1s linear infinite;--cmnt-animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--cmnt-default-transition-duration:.15s;--cmnt-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base{[data-comments-root] button,[data-comments-root] input,[data-comments-root] textarea,[data-comments-root] select{font-family:inherit}[data-comments-root],[data-comments-root] *,[data-comments-root] :before,[data-comments-root] :after{box-sizing:border-box}[data-comments-root] :is(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit;margin:0}}@layer components;.cmnt\\:pointer-events-auto{pointer-events:auto}.cmnt\\:pointer-events-none{pointer-events:none}.cmnt\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cmnt\\:absolute{position:absolute}.cmnt\\:fixed{position:fixed}.cmnt\\:relative{position:relative}.cmnt\\:inset-0{inset:calc(var(--cmnt-spacing) * 0)}.cmnt\\:-top-1{top:calc(var(--cmnt-spacing) * -1)}.cmnt\\:-top-1\\.5{top:calc(var(--cmnt-spacing) * -1.5)}.cmnt\\:top-0{top:calc(var(--cmnt-spacing) * 0)}.cmnt\\:top-0\\.5{top:calc(var(--cmnt-spacing) * .5)}.cmnt\\:top-1{top:calc(var(--cmnt-spacing) * 1)}.cmnt\\:top-1\\.5{top:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:top-1\\/2{top:50%}.cmnt\\:top-4{top:calc(var(--cmnt-spacing) * 4)}.cmnt\\:-right-1{right:calc(var(--cmnt-spacing) * -1)}.cmnt\\:-right-\\[7px\\]{right:-7px}.cmnt\\:right-0{right:calc(var(--cmnt-spacing) * 0)}.cmnt\\:right-0\\.5{right:calc(var(--cmnt-spacing) * .5)}.cmnt\\:right-1{right:calc(var(--cmnt-spacing) * 1)}.cmnt\\:right-4{right:calc(var(--cmnt-spacing) * 4)}.cmnt\\:bottom-0{bottom:calc(var(--cmnt-spacing) * 0)}.cmnt\\:bottom-4{bottom:calc(var(--cmnt-spacing) * 4)}.cmnt\\:left-0\\.5{left:calc(var(--cmnt-spacing) * .5)}.cmnt\\:left-1\\.5{left:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:left-1\\/2{left:50%}.cmnt\\:left-\\[14px\\]{left:14px}.cmnt\\:z-\\[var\\(--cmnt-z-launcher\\)\\]{z-index:var(--cmnt-z-launcher)}.cmnt\\:z-\\[var\\(--cmnt-z-surface\\)\\]{z-index:var(--cmnt-z-surface)}.cmnt\\:m-0{margin:calc(var(--cmnt-spacing) * 0)}.cmnt\\:mx-3{margin-inline:calc(var(--cmnt-spacing) * 3)}.cmnt\\:my-3{margin-block:calc(var(--cmnt-spacing) * 3)}.cmnt\\:-mt-\\[42px\\]{margin-top:-42px}.cmnt\\:mt-0{margin-top:calc(var(--cmnt-spacing) * 0)}.cmnt\\:mt-0\\.5{margin-top:calc(var(--cmnt-spacing) * .5)}.cmnt\\:mt-1\\.5{margin-top:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:mt-2{margin-top:calc(var(--cmnt-spacing) * 2)}.cmnt\\:mb-1{margin-bottom:calc(var(--cmnt-spacing) * 1)}.cmnt\\:mb-2{margin-bottom:calc(var(--cmnt-spacing) * 2)}.cmnt\\:mb-3\\.5{margin-bottom:calc(var(--cmnt-spacing) * 3.5)}.cmnt\\:-ml-\\[21px\\]{margin-left:-21px}.cmnt\\:ml-1{margin-left:calc(var(--cmnt-spacing) * 1)}.cmnt\\:ml-3{margin-left:calc(var(--cmnt-spacing) * 3)}.cmnt\\:block{display:block}.cmnt\\:flex{display:flex}.cmnt\\:hidden{display:none}.cmnt\\:inline-flex{display:inline-flex}.cmnt\\:h-2\\.5{height:calc(var(--cmnt-spacing) * 2.5)}.cmnt\\:h-3{height:calc(var(--cmnt-spacing) * 3)}.cmnt\\:h-4{height:calc(var(--cmnt-spacing) * 4)}.cmnt\\:h-5{height:calc(var(--cmnt-spacing) * 5)}.cmnt\\:h-7{height:calc(var(--cmnt-spacing) * 7)}.cmnt\\:h-\\[22px\\]{height:22px}.cmnt\\:h-\\[26px\\]{height:26px}.cmnt\\:h-\\[30px\\]{height:30px}.cmnt\\:h-\\[42px\\]{height:42px}.cmnt\\:h-\\[58px\\]{height:58px}.cmnt\\:h-full{height:100%}.cmnt\\:h-px{height:1px}.cmnt\\:max-h-\\[230px\\]{max-height:230px}.cmnt\\:min-h-0{min-height:calc(var(--cmnt-spacing) * 0)}.cmnt\\:w-2\\/5{width:40%}.cmnt\\:w-3{width:calc(var(--cmnt-spacing) * 3)}.cmnt\\:w-4{width:calc(var(--cmnt-spacing) * 4)}.cmnt\\:w-5{width:calc(var(--cmnt-spacing) * 5)}.cmnt\\:w-7{width:calc(var(--cmnt-spacing) * 7)}.cmnt\\:w-80{width:calc(var(--cmnt-spacing) * 80)}.cmnt\\:w-\\[26px\\]{width:26px}.cmnt\\:w-\\[30px\\]{width:30px}.cmnt\\:w-\\[42px\\]{width:42px}.cmnt\\:w-\\[85\\%\\]{width:85%}.cmnt\\:w-\\[88px\\]{width:88px}.cmnt\\:w-\\[360px\\]{width:360px}.cmnt\\:w-full{width:100%}.cmnt\\:w-max{width:max-content}.cmnt\\:max-w-\\[160px\\]{max-width:160px}.cmnt\\:max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.cmnt\\:min-w-0{min-width:calc(var(--cmnt-spacing) * 0)}.cmnt\\:min-w-4{min-width:calc(var(--cmnt-spacing) * 4)}.cmnt\\:min-w-80{min-width:calc(var(--cmnt-spacing) * 80)}.cmnt\\:min-w-\\[22px\\]{min-width:22px}.cmnt\\:flex-1{flex:1}.cmnt\\:shrink-0{flex-shrink:0}.cmnt\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.cmnt\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.cmnt\\:animate-ping{animation:var(--cmnt-animate-ping)}.cmnt\\:animate-spin{animation:var(--cmnt-animate-spin)}.cmnt\\:cursor-grab{cursor:grab}.cmnt\\:cursor-grabbing{cursor:grabbing}.cmnt\\:cursor-pointer{cursor:pointer}.cmnt\\:touch-none{touch-action:none}.cmnt\\:flex-col{flex-direction:column}.cmnt\\:items-baseline{align-items:baseline}.cmnt\\:items-center{align-items:center}.cmnt\\:items-start{align-items:flex-start}.cmnt\\:justify-between{justify-content:space-between}.cmnt\\:justify-center{justify-content:center}.cmnt\\:gap-1{gap:calc(var(--cmnt-spacing) * 1)}.cmnt\\:gap-1\\.5{gap:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:gap-2{gap:calc(var(--cmnt-spacing) * 2)}.cmnt\\:gap-\\[9px\\]{gap:9px}.cmnt\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cmnt\\:overflow-auto{overflow:auto}.cmnt\\:overflow-hidden{overflow:hidden}.cmnt\\:overflow-y-auto{overflow-y:auto}.cmnt\\:rounded-\\[4px\\]{border-radius:4px}.cmnt\\:rounded-\\[11px\\]{border-radius:11px}.cmnt\\:rounded-full{border-radius:3.40282e38px}.cmnt\\:rounded-lg{border-radius:var(--cmnt-radius-lg)}.cmnt\\:rounded-md{border-radius:var(--cmnt-radius-md)}.cmnt\\:rounded-xl{border-radius:var(--cmnt-radius-xl)}.cmnt\\:border{border-style:var(--tw-border-style);border-width:1px}.cmnt\\:border-0{border-style:var(--tw-border-style);border-width:0}.cmnt\\:border-2{border-style:var(--tw-border-style);border-width:2px}.cmnt\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.cmnt\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.cmnt\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.cmnt\\:border-l-\\[3px\\]{border-left-style:var(--tw-border-style);border-left-width:3px}.cmnt\\:border-none{--tw-border-style:none;border-style:none}.cmnt\\:border-\\[\\#f1f3f5\\]{border-color:#f1f3f5}.cmnt\\:border-blue-600{border-color:var(--cmnt-color-blue-600)}.cmnt\\:border-gray-200{border-color:var(--cmnt-color-gray-200)}.cmnt\\:border-gray-300{border-color:var(--cmnt-color-gray-300)}.cmnt\\:border-slate-300{border-color:var(--cmnt-color-slate-300)}.cmnt\\:border-white{border-color:var(--cmnt-color-white)}.cmnt\\:border-t-transparent{border-top-color:#0000}.cmnt\\:bg-\\[\\#93b4f5\\]{background-color:#93b4f5}.cmnt\\:bg-\\[\\#dbe3f0\\]{background-color:#dbe3f0}.cmnt\\:bg-\\[\\#f3f6fc\\]{background-color:#f3f6fc}.cmnt\\:bg-\\[\\#f7fdf9\\]{background-color:#f7fdf9}.cmnt\\:bg-amber-50{background-color:var(--cmnt-color-amber-50)}.cmnt\\:bg-amber-100{background-color:var(--cmnt-color-amber-100)}.cmnt\\:bg-black\\/40{background-color:var(--cmnt-color-black)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-black\\/40{background-color:color-mix(in oklab, var(--cmnt-color-black) 40%, transparent)}}.cmnt\\:bg-black\\/55{background-color:var(--cmnt-color-black)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-black\\/55{background-color:color-mix(in oklab, var(--cmnt-color-black) 55%, transparent)}}.cmnt\\:bg-blue-500\\/40{background-color:var(--cmnt-color-blue-500)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-blue-500\\/40{background-color:color-mix(in oklab, var(--cmnt-color-blue-500) 40%, transparent)}}.cmnt\\:bg-blue-600,.cmnt\\:bg-blue-600\\/20{background-color:var(--cmnt-color-blue-600)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-blue-600\\/20{background-color:color-mix(in oklab, var(--cmnt-color-blue-600) 20%, transparent)}}.cmnt\\:bg-blue-800{background-color:var(--cmnt-color-blue-800)}.cmnt\\:bg-gray-50{background-color:var(--cmnt-color-gray-50)}.cmnt\\:bg-gray-100{background-color:var(--cmnt-color-gray-100)}.cmnt\\:bg-gray-200{background-color:var(--cmnt-color-gray-200)}.cmnt\\:bg-gray-300{background-color:var(--cmnt-color-gray-300)}.cmnt\\:bg-gray-400{background-color:var(--cmnt-color-gray-400)}.cmnt\\:bg-gray-800{background-color:var(--cmnt-color-gray-800)}.cmnt\\:bg-gray-900{background-color:var(--cmnt-color-gray-900)}.cmnt\\:bg-red-500\\/15{background-color:var(--cmnt-color-red-500)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-red-500\\/15{background-color:color-mix(in oklab, var(--cmnt-color-red-500) 15%, transparent)}}.cmnt\\:bg-transparent{background-color:#0000}.cmnt\\:bg-white,.cmnt\\:bg-white\\/55{background-color:var(--cmnt-color-white)}@supports (color:color-mix(in lab, red, red)){.cmnt\\:bg-white\\/55{background-color:color-mix(in oklab, var(--cmnt-color-white) 55%, transparent)}}.cmnt\\:object-cover{object-fit:cover}.cmnt\\:p-0{padding:calc(var(--cmnt-spacing) * 0)}.cmnt\\:p-1{padding:calc(var(--cmnt-spacing) * 1)}.cmnt\\:p-2{padding:calc(var(--cmnt-spacing) * 2)}.cmnt\\:p-3{padding:calc(var(--cmnt-spacing) * 3)}.cmnt\\:p-6{padding:calc(var(--cmnt-spacing) * 6)}.cmnt\\:px-1{padding-inline:calc(var(--cmnt-spacing) * 1)}.cmnt\\:px-1\\.5{padding-inline:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:px-2{padding-inline:calc(var(--cmnt-spacing) * 2)}.cmnt\\:px-3{padding-inline:calc(var(--cmnt-spacing) * 3)}.cmnt\\:px-4{padding-inline:calc(var(--cmnt-spacing) * 4)}.cmnt\\:px-\\[5px\\]{padding-inline:5px}.cmnt\\:py-0\\.5{padding-block:calc(var(--cmnt-spacing) * .5)}.cmnt\\:py-1{padding-block:calc(var(--cmnt-spacing) * 1)}.cmnt\\:py-1\\.5{padding-block:calc(var(--cmnt-spacing) * 1.5)}.cmnt\\:py-2{padding-block:calc(var(--cmnt-spacing) * 2)}.cmnt\\:py-2\\.5{padding-block:calc(var(--cmnt-spacing) * 2.5)}.cmnt\\:py-4{padding-block:calc(var(--cmnt-spacing) * 4)}.cmnt\\:py-6{padding-block:calc(var(--cmnt-spacing) * 6)}.cmnt\\:py-\\[9px\\]{padding-block:9px}.cmnt\\:pt-2\\.5{padding-top:calc(var(--cmnt-spacing) * 2.5)}.cmnt\\:pb-1{padding-bottom:calc(var(--cmnt-spacing) * 1)}.cmnt\\:pb-2{padding-bottom:calc(var(--cmnt-spacing) * 2)}.cmnt\\:pl-\\[46px\\]{padding-left:46px}.cmnt\\:text-center{text-align:center}.cmnt\\:text-left{text-align:left}.cmnt\\:text-base{font-size:var(--cmnt-text-base);line-height:var(--tw-leading,var(--cmnt-text-base--line-height))}.cmnt\\:text-sm{font-size:var(--cmnt-text-sm);line-height:var(--tw-leading,var(--cmnt-text-sm--line-height))}.cmnt\\:text-xs{font-size:var(--cmnt-text-xs);line-height:var(--tw-leading,var(--cmnt-text-xs--line-height))}.cmnt\\:text-\\[10px\\]{font-size:10px}.cmnt\\:text-\\[11px\\]{font-size:11px}.cmnt\\:text-\\[13px\\]{font-size:13px}.cmnt\\:leading-4{--tw-leading:calc(var(--cmnt-spacing) * 4);line-height:calc(var(--cmnt-spacing) * 4)}.cmnt\\:leading-\\[0\\]{--tw-leading:0;line-height:0}.cmnt\\:leading-relaxed{--tw-leading:var(--cmnt-leading-relaxed);line-height:var(--cmnt-leading-relaxed)}.cmnt\\:font-bold{--tw-font-weight:var(--cmnt-font-weight-bold);font-weight:var(--cmnt-font-weight-bold)}.cmnt\\:font-medium{--tw-font-weight:var(--cmnt-font-weight-medium);font-weight:var(--cmnt-font-weight-medium)}.cmnt\\:font-normal{--tw-font-weight:var(--cmnt-font-weight-normal);font-weight:var(--cmnt-font-weight-normal)}.cmnt\\:font-semibold{--tw-font-weight:var(--cmnt-font-weight-semibold);font-weight:var(--cmnt-font-weight-semibold)}.cmnt\\:whitespace-pre-wrap{white-space:pre-wrap}.cmnt\\:text-amber-700{color:var(--cmnt-color-amber-700)}.cmnt\\:text-blue-600{color:var(--cmnt-color-blue-600)}.cmnt\\:text-gray-400{color:var(--cmnt-color-gray-400)}.cmnt\\:text-gray-500{color:var(--cmnt-color-gray-500)}.cmnt\\:text-gray-600{color:var(--cmnt-color-gray-600)}.cmnt\\:text-gray-700{color:var(--cmnt-color-gray-700)}.cmnt\\:text-gray-900{color:var(--cmnt-color-gray-900)}.cmnt\\:text-green-600{color:var(--cmnt-color-green-600)}.cmnt\\:text-red-700{color:var(--cmnt-color-red-700)}.cmnt\\:text-slate-500{color:var(--cmnt-color-slate-500)}.cmnt\\:text-white{color:var(--cmnt-color-white)}.cmnt\\:italic{font-style:italic}.cmnt\\:underline{text-decoration-line:underline}.cmnt\\:opacity-80{opacity:.8}.cmnt\\:shadow-\\[-8px_0_24px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:-8px 0 24px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:shadow-\\[0_6px_20px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 6px 20px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:shadow-\\[0_12px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 12px 32px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.cmnt\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--cmnt-default-transition-timing-function));transition-duration:var(--tw-duration,var(--cmnt-default-transition-duration))}.cmnt\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--cmnt-default-transition-timing-function));transition-duration:var(--tw-duration,var(--cmnt-default-transition-duration))}.cmnt\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--cmnt-default-transition-timing-function));transition-duration:var(--tw-duration,var(--cmnt-default-transition-duration))}.cmnt\\:outline-none{--tw-outline-style:none;outline-style:none}.cmnt\\:select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.cmnt\\:group-hover\\:opacity-100:is(:where(.cmnt\\:group):hover *){opacity:1}}.cmnt\\:first\\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}@media (hover:hover){.cmnt\\:hover\\:bg-gray-50:hover{background-color:var(--cmnt-color-gray-50)}.cmnt\\:hover\\:bg-gray-100:hover{background-color:var(--cmnt-color-gray-100)}.cmnt\\:hover\\:no-underline:hover{text-decoration-line:none}.cmnt\\:hover\\:underline:hover{text-decoration-line:underline}}.cmnt\\:disabled\\:cursor-default:disabled{cursor:default}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}';
   }
 });
 
@@ -38829,7 +39039,7 @@ __export(mount_exports, {
 function mount(options) {
   const host = document.createElement("div");
   host.setAttribute("data-comments-root", "");
-  host.style.cssText = 'all: revert; position: fixed; inset: 0; pointer-events: none; z-index: 2147483600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";';
+  host.style.cssText = 'all: revert; position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; --cmnt-z-surface: 2147400100; --cmnt-z-launcher: 2147400200; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";';
   const style = document.createElement("style");
   style.setAttribute("data-comments-style", "");
   style.textContent = widgetCss;