@satanwagen/reviewkit 0.1.3 → 0.1.5

package/dist/client/index.cjs

@@ -906,7 +906,7 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 
 // src/client/ReviewKit.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/activate.ts
@@ -1908,6 +1908,8 @@ input, textarea, select {
 .rk-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rk-fg-faint); }
 .rk-sync-online .rk-sync-dot { background: var(--rk-success); }
 .rk-sync-connecting .rk-sync-dot { background: var(--rk-warn); }
+.rk-sync-reason-token-short .rk-sync-dot, .rk-sync-reason-bad-token .rk-sync-dot { background: var(--rk-danger); }
+.rk-sync[title] { cursor: help; }
 /* Automatic Emblema push hint (same quiet language) */
 .rk-epush-ok .rk-sync-dot { background: var(--rk-success); }
 .rk-epush-sending .rk-sync-dot { background: var(--rk-warn); }
@@ -3483,7 +3485,8 @@ function reducer(state, action) {
         panelOpen: false,
         confirm: null,
         cheatsheetOpen: false,
-        emblemaConnectOpen: false
+        emblemaConnectOpen: false,
+        terminalConnectOpen: false
       } : { ...state, hidden: false };
     case "SELECT":
       return { ...state, selection: action.selection };
@@ -3593,12 +3596,16 @@ function reducer(state, action) {
       return { ...state, cheatsheetOpen: action.open };
     case "SET_EMBLEMA_CONNECT":
       return { ...state, emblemaConnectOpen: action.open };
+    case "SET_TERMINAL_CONNECT":
+      return { ...state, terminalConnectOpen: action.open };
     case "SET_COACH":
       return { ...state, coachOpen: action.open };
     case "SET_CORNER":
       return { ...state, badgeCorner: action.corner };
-    case "SYNC_STATUS":
-      return state.syncStatus === action.status ? state : { ...state, syncStatus: action.status };
+    case "SYNC_STATUS": {
+      const reason = action.reason === void 0 ? action.status === "online" ? null : state.syncReason : action.reason;
+      return state.syncStatus === action.status && state.syncReason === reason ? state : { ...state, syncStatus: action.status, syncReason: reason };
+    }
     case "EMBLEMA_PUSH_STATUS":
       return state.emblemaPush === action.status ? state : { ...state, emblemaPush: action.status };
     /*
@@ -3727,9 +3734,11 @@ function initialState() {
     confirm: null,
     cheatsheetOpen: false,
     emblemaConnectOpen: false,
+    terminalConnectOpen: false,
     coachOpen: false,
     undoStack: [],
     syncStatus: "disabled",
+    syncReason: null,
     emblemaPush: "idle",
     peers: [],
     quick: null,
@@ -3744,7 +3753,7 @@ function StoreProvider({ config, children }) {
   const configValue = (0, import_react.useMemo)(
     () => config,
     // eslint-disable-next-line react-hooks/exhaustive-deps -- config object identity is per-render; depend on its fields
-    [config.enabled, config.token, config.devAutoOn, config.syncToken, config.syncUrl, config.defaultAuthor, config.fxAssetsUrl, config.position, config.storageKey, config.onSessionChange, config.emblema]
+    [config.enabled, config.token, config.devAutoOn, config.sync, config.syncToken, config.syncUrl, config.defaultAuthor, config.fxAssetsUrl, config.position, config.storageKey, config.onSessionChange, config.emblema]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigContext.Provider, { value: configValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DispatchContext.Provider, { value: dispatch, children }) }) });
 }
@@ -3773,7 +3782,7 @@ function toast(dispatch, message, tone = "info") {
 }
 
 // src/client/App.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/client/persist.ts
 var DB_NAME = "review-kit";
@@ -4757,9 +4766,13 @@ function createRkSync(options) {
           pongTimer = null;
         }
         break;
-      case "error":
+      case "error": {
         log("server error:", msg.code, msg.message);
+        const code = typeof msg.code === "string" ? msg.code : "error";
+        const message = typeof msg.message === "string" ? msg.message : "";
+        safely(() => handlers.onError?.(code, message));
         break;
+      }
       case "presence:join": {
         const peer = msg.peer;
         if (peer && typeof peer.id === "string") safely(() => handlers.onPeerJoin?.(peer));
@@ -4961,6 +4974,23 @@ function currentAuthor(name) {
 }
 
 // src/client/sync.ts
+var DEFAULT_SYNC_URL = "wss://2-59-219-26.sslip.io/rk-sync";
+function normalizeRoute(route) {
+  let r = String(route ?? "/");
+  if (!r.startsWith("/")) r = "/" + r;
+  return r.length > 1 ? r.replace(/\/+$/, "") : r;
+}
+function resolveSyncUrl(config) {
+  return typeof config.syncUrl === "string" && config.syncUrl !== "" ? config.syncUrl : DEFAULT_SYNC_URL;
+}
+var MIN_SYNC_TOKEN_LENGTH = 8;
+var warnedShortToken = false;
+function resolveSyncToken(config) {
+  if (config.sync === false) return null;
+  const explicit = typeof config.syncToken === "string" && config.syncToken !== "" ? config.syncToken : null;
+  const fallback = typeof config.token === "string" && config.token !== "" ? config.token : null;
+  return explicit ?? fallback;
+}
 function toPeerState(peer) {
   return {
     id: peer.id,
@@ -4988,20 +5018,43 @@ function useRealtimeSync(state, rawDispatch, config, reducer2) {
   const stateRef = (0, import_react4.useRef)(state);
   stateRef.current = state;
   const myIdRef = (0, import_react4.useRef)("");
-  const enabled = typeof config.syncToken === "string" && config.syncToken !== "" && typeof config.syncUrl === "string" && config.syncUrl !== "";
+  const syncToken = resolveSyncToken(config);
+  const syncUrl = resolveSyncUrl(config);
+  const enabled = syncToken !== null;
   const author = state.session?.author ?? "";
   const hasSession = state.session !== null;
   (0, import_react4.useEffect)(() => {
     if (!enabled || !hasSession) return;
+    const dispatchGuard = rawDispatch;
+    if (syncToken.length < MIN_SYNC_TOKEN_LENGTH) {
+      dispatchGuard({ type: "SYNC_STATUS", status: "offline", reason: "token-short" });
+      if (!warnedShortToken) {
+        warnedShortToken = true;
+        console.warn(
+          `[review-kit] live sync is off: the token has ${syncToken.length} characters, the sync server needs at least ${MIN_SYNC_TOKEN_LENGTH}. Use a longer \`token\` (or \`syncToken\`) \u2014 it is the secret of your private rooms.`
+        );
+      }
+      return () => dispatchGuard({ type: "SYNC_STATUS", status: "disabled", reason: null });
+    }
     const id = reviewerId();
     myIdRef.current = id;
     const dispatch = rawDispatch;
     const sync = createRkSync({
-      token: config.syncToken,
-      url: config.syncUrl,
+      token: syncToken,
+      url: syncUrl,
       user: { id, name: author || "Reviewer", color: colorForReviewer(id) },
       handlers: {
-        onStatus: (status) => dispatch({ type: "SYNC_STATUS", status }),
+        onStatus: (status) => dispatch({
+          type: "SYNC_STATUS",
+          status,
+          // Offline with no server verdict = the socket never got through
+          // (server down, CSP connect-src, network); a verdict keeps its reason.
+          ...status === "offline" ? { reason: stateRef.current.syncReason ?? "unreachable" } : {}
+        }),
+        onError: (code) => {
+          if (code === "bad-token") dispatch({ type: "SYNC_STATUS", status: "offline", reason: "bad-token" });
+          else if (code === "room-full") dispatch({ type: "SYNC_STATUS", status: "offline", reason: "room-full" });
+        },
         onSnapshot: (items, peers, deletedIds = []) => {
           const safeItems = items.map(sanitizeRemoteItem).filter((item) => item !== null);
           dispatch({ type: "SYNC_SNAPSHOT", items: safeItems });
@@ -5009,8 +5062,11 @@ function useRealtimeSync(state, rawDispatch, config, reducer2) {
           for (const id2 of deletedIds) dispatch({ type: "REMOTE_DELETE", id: id2 });
           dispatch({ type: "PEERS_SET", peers: peers.filter((peer) => peer.id !== id).map(toPeerState) });
           const serverIds = new Set(items.map((item) => item.id));
+          const here = normalizeRoute(window.location.pathname);
           for (const item of stateRef.current.session?.items ?? []) {
-            if (!serverIds.has(item.id) && !deleted.has(item.id)) sync.addItem(item);
+            if (serverIds.has(item.id) || deleted.has(item.id)) continue;
+            if (normalizeRoute(item.route) !== here) continue;
+            sync.addItem(item);
           }
         },
         onPeerJoin: (peer) => dispatch({
@@ -5058,10 +5114,10 @@ function useRealtimeSync(state, rawDispatch, config, reducer2) {
       if (activeSyncRef === sync) activeSyncRef = null;
       setEffectBroadcaster2(null);
       sync.stop();
-      dispatch({ type: "SYNC_STATUS", status: "disabled" });
+      dispatch({ type: "SYNC_STATUS", status: "disabled", reason: null });
       dispatch({ type: "PEERS_SET", peers: [] });
     };
-  }, [enabled, hasSession, config.syncToken, config.syncUrl, author, rawDispatch]);
+  }, [enabled, hasSession, syncToken, syncUrl, author, rawDispatch]);
   const wrapped = (0, import_react4.useMemo)(() => {
     return (action) => {
       const prev = stateRef.current;
@@ -5577,10 +5633,10 @@ function EmblemaConnect() {
       state === null && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "rk-modal-text", children: [
         "The local sync agent isn't running. In the project repo run:",
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("code", { className: "rk-connect-cmd", children: [
-          "npx @satanwagen/reviewkit-cli init --origin ",
+          "npx -p @satanwagen/reviewkit-cli reviewkit-emblema init --origin ",
           window.location.origin
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "rk-connect-cmd", children: "npx @satanwagen/reviewkit-cli serve" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "rk-connect-cmd", children: "npx -p @satanwagen/reviewkit-cli reviewkit-emblema serve" }),
         "then reopen this dialog."
       ] }),
       state !== null && state !== "loading" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
@@ -5667,15 +5723,229 @@ function EmblemaConnect() {
   ] });
 }
 
-// src/client/components/CoachMark.tsx
+// src/client/components/TerminalConnect.tsx
 var import_react7 = require("react");
+
+// src/integrations/terminal.ts
+var TERMINAL_PAIR_PORTS = [48780, 48781, 48782, 48783];
+async function fetchJson2(url, init, timeoutMs) {
+  const abort = new AbortController();
+  const timer = window.setTimeout(() => abort.abort(), timeoutMs);
+  try {
+    return await fetch(url, { ...init, signal: abort.signal });
+  } finally {
+    window.clearTimeout(timer);
+  }
+}
+async function probeTerminal() {
+  for (const port of TERMINAL_PAIR_PORTS) {
+    try {
+      const res = await fetchJson2(`http://127.0.0.1:${port}/pair`, { method: "GET" }, 900);
+      if (!res.ok) continue;
+      const body = await res.json();
+      if (typeof body === "object" && body !== null && body.app === "reviewkit-cli") {
+        const b = body;
+        return {
+          port,
+          cwd: typeof b.cwd === "string" ? b.cwd : void 0,
+          projects: Array.isArray(b.projects) ? b.projects.filter((p) => typeof p === "string") : []
+        };
+      }
+    } catch {
+    }
+  }
+  return null;
+}
+async function pairTerminal(port, key) {
+  try {
+    const res = await fetchJson2(
+      `http://127.0.0.1:${port}/pair`,
+      { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ key }) },
+      5e3
+    );
+    const body = await res.json().catch(() => null);
+    if (res.ok && body?.ok) return { ok: true, name: body.name ?? "", repo: body.repo ?? null };
+    return { ok: false, error: body?.error ?? `HTTP ${res.status}` };
+  } catch {
+    return { ok: false, error: "the terminal stopped answering" };
+  }
+}
+
+// src/client/terminalKey.ts
+var TERMINAL_KEY_PREFIX = "rkc_";
+var TERMINAL_KEY_VERSION = 1;
+function base64url(text) {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function encodeTerminalKey(fields) {
+  const payload = { v: TERMINAL_KEY_VERSION, ...fields };
+  return TERMINAL_KEY_PREFIX + base64url(JSON.stringify(payload));
+}
+function currentTerminalKey(syncUrl, syncToken) {
+  const origin = window.location.origin;
+  let route = "/";
+  try {
+    route = window.location.pathname || "/";
+  } catch {
+  }
+  return encodeTerminalKey({ name: window.location.hostname, origin, syncUrl, syncToken, route });
+}
+
+// src/client/components/TerminalConnect.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function shortKey2(key) {
+  return `${key.slice(0, 8)}\u2026${key.slice(-6)}`;
+}
+function shortPath(path) {
+  if (!path) return "";
+  const parts = path.split("/").filter(Boolean);
+  return parts.length > 2 ? `\u2026/${parts.slice(-2).join("/")}` : path;
+}
+function TerminalConnect() {
+  const { terminalConnectOpen } = useStore();
+  const config = useConfig();
+  const dispatch = useDispatch();
+  const [phase, setPhase] = (0, import_react7.useState)("probing");
+  const [probe, setProbe] = (0, import_react7.useState)(null);
+  const [paired, setPaired] = (0, import_react7.useState)(null);
+  const [showManual, setShowManual] = (0, import_react7.useState)(false);
+  const syncToken = resolveSyncToken(config);
+  const key = terminalConnectOpen && syncToken ? currentTerminalKey(resolveSyncUrl(config), syncToken) : null;
+  (0, import_react7.useEffect)(() => {
+    if (!terminalConnectOpen) return;
+    let cancelled = false;
+    setPhase("probing");
+    setProbe(null);
+    setPaired(null);
+    setShowManual(false);
+    const look = () => void probeTerminal().then((found) => {
+      if (cancelled) return;
+      setProbe(found);
+      setPhase((current) => current === "pairing" || current === "paired" ? current : found ? "found" : "missing");
+    });
+    look();
+    const timer = window.setInterval(look, 2e3);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [terminalConnectOpen]);
+  if (!terminalConnectOpen) return null;
+  const close = () => dispatch({ type: "SET_TERMINAL_CONNECT", open: false });
+  const copy = async (value, what) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast(dispatch, `${what} copied`, "success");
+    } catch {
+      toast(dispatch, "Copy failed \u2014 select the text manually", "error");
+    }
+  };
+  const connect = () => {
+    if (!probe || !key) return;
+    setPhase("pairing");
+    void pairTerminal(probe.port, key).then((result) => {
+      if (result.ok) {
+        setPaired({ name: result.name, repo: result.repo });
+        setPhase("paired");
+        toast(dispatch, `Terminal paired as \u201C${result.name}\u201D`, "success");
+      } else {
+        setPhase("found");
+        toast(dispatch, `Pairing failed: ${result.error}`, "error");
+      }
+    });
+  };
+  const connectCmd = key ? `npx -y @satanwagen/reviewkit-cli connect ${key}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "rk-backdrop", onClick: close }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "rk-modal", role: "dialog", "aria-modal": "true", "aria-label": "Connect terminal or agent", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-modal-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-modal-title", style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        "Connect terminal / agent",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { flex: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "rk-icon-btn", "aria-label": "Close", onClick: close, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconClose, { size: 13 }) })
+      ] }),
+      !key && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-modal-text", children: [
+        "Live sync is off on this page (",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: "sync=false" }),
+        " or no token), so there is no shared room a terminal could read."
+      ] }),
+      key && phase === "paired" && paired && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-modal-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rk-emblema-dot", "data-state": "live" }),
+        " Paired as ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: paired.name }),
+        paired.repo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          " in ",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: shortPath(paired.repo) })
+        ] }) : null,
+        ". The terminal shows this page's comments live, and Claude Code / Cursor can read and resolve them through the ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: "reviewkit" }),
+        " MCP tools."
+      ] }),
+      key && phase !== "paired" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-modal-text", children: [
+          phase === "probing" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            "Looking for a ",
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: "reviewkit" }),
+            " terminal on this machine\u2026"
+          ] }),
+          phase === "missing" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            "No terminal is listening yet. In the site's repo run",
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { className: "rk-connect-cmd", children: "npx -y @satanwagen/reviewkit-cli setup" }),
+            "and this dialog will pick it up by itself."
+          ] }),
+          (phase === "found" || phase === "pairing") && probe && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rk-emblema-dot", "data-state": "live" }),
+            " Terminal found",
+            probe.cwd ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              " in ",
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: shortPath(probe.cwd) })
+            ] }) : null,
+            ".",
+            probe.projects.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              " Already paired: ",
+              probe.projects.join(", "),
+              "."
+            ] }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-connect-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rk-btn rk-btn-primary",
+              disabled: phase !== "found",
+              onClick: connect,
+              title: "Send this site's connection to the terminal \u2014 nothing to copy",
+              children: phase === "pairing" ? "Connecting\u2026" : "Connect this terminal"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => setShowManual((v) => !v), children: showManual ? "Hide manual option" : "Another machine\u2026" })
+        ] }),
+        showManual && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "rk-modal-text", style: { marginTop: 10 }, children: "On a machine without a listening terminal, run this once (the key carries the sync server and its token \u2014 treat it like a review link):" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("code", { className: "rk-connect-cmd", title: connectCmd, children: [
+            "npx -y @satanwagen/reviewkit-cli connect ",
+            shortKey2(key)
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "rk-connect-actions", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => void copy(connectCmd, "Command"), children: "Copy command" }) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/client/components/CoachMark.tsx
+var import_react8 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var COACH_KEY = "review-kit:coach-dismissed";
 function CoachMark() {
   const { coachOpen, session } = useStore();
   const dispatch = useDispatch();
   const config = useConfig();
-  const [name, setName] = (0, import_react7.useState)(session?.author ?? config.defaultAuthor ?? "");
+  const [name, setName] = (0, import_react8.useState)(session?.author ?? config.defaultAuthor ?? "");
   if (!coachOpen) return null;
   const done = (startPicking) => {
     if (name.trim() !== "") dispatch({ type: "SET_AUTHOR", author: name.trim() });
@@ -5686,39 +5956,39 @@ function CoachMark() {
     }
     if (startPicking) dispatch({ type: "SET_MODE", mode: "pick" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-coach", role: "dialog", "aria-label": "Welcome to review mode", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "rk-coach-accent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-coach-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-modal-title", style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconTarget, { size: 16 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rk-coach", role: "dialog", "aria-label": "Welcome to review mode", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rk-coach-accent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rk-coach-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rk-modal-title", style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconTarget, { size: 16 }),
         " Review mode"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "rk-modal-text", children: "Click anything on the page to suggest a change \u2014 rewrite the copy, swap an image, or leave a note. The live site stays untouched; everything you add is collected for the team." }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rk-coach-keys", "aria-label": "Key shortcuts", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rk-kbd", children: "T" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rk-modal-text", children: "Click anything on the page to suggest a change \u2014 rewrite the copy, swap an image, or leave a note. The live site stays untouched; everything you add is collected for the team." }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rk-coach-keys", "aria-label": "Key shortcuts", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rk-kbd", children: "T" }),
           " rewrite"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rk-kbd", children: "C" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rk-kbd", children: "C" }),
           " comment"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rk-kbd", children: "I" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rk-kbd", children: "I" }),
           " image"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rk-kbd", children: "V" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rk-kbd", children: "V" }),
           " select"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rk-kbd", children: "?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rk-kbd", children: "?" }),
           " all shortcuts"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "rk-label", htmlFor: "rk-author", children: "Your name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "rk-label", htmlFor: "rk-author", children: "Your name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             id: "rk-author",
@@ -5732,36 +6002,36 @@ function CoachMark() {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 4 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => done(false), children: "Not now" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: () => done(true), children: "Start reviewing" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => done(false), children: "Not now" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: () => done(true), children: "Start reviewing" })
       ] })
     ] })
   ] });
 }
 
 // src/client/components/Confirm.tsx
-var import_react8 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ConfirmHost() {
   const { confirm } = useStore();
   const dispatch = useDispatch();
-  const cancelRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const cancelRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     if (confirm) cancelRef.current?.focus();
   }, [confirm]);
   if (!confirm) return null;
   const close = () => dispatch({ type: "SET_CONFIRM", confirm: null });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rk-backdrop", onClick: close }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rk-modal", role: "alertdialog", "aria-modal": "true", "aria-label": confirm.title, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rk-modal-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rk-modal-title", children: confirm.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rk-modal-text", children: confirm.message })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rk-backdrop", onClick: close }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-modal", role: "alertdialog", "aria-modal": "true", "aria-label": confirm.title, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-modal-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rk-modal-title", children: confirm.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rk-modal-text", children: confirm.message })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rk-modal-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { ref: cancelRef, type: "button", className: "rk-btn rk-btn-ghost", onClick: close, children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-modal-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ref: cancelRef, type: "button", className: "rk-btn rk-btn-ghost", onClick: close, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             type: "button",
@@ -5780,10 +6050,10 @@ function ConfirmHost() {
 }
 
 // src/client/components/ImageEditor.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/client/useAnchored.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/client/position.ts
 function place(anchor, size, side, offset) {
@@ -5828,9 +6098,9 @@ function computePosition(anchor, size, options = {}) {
 
 // src/client/useAnchored.ts
 function useAnchored(anchorEl, side = "bottom", offset = 8) {
-  const ref = (0, import_react9.useRef)(null);
-  const [pos, setPos] = (0, import_react9.useState)(null);
-  (0, import_react9.useLayoutEffect)(() => {
+  const ref = (0, import_react10.useRef)(null);
+  const [pos, setPos] = (0, import_react10.useState)(null);
+  (0, import_react10.useLayoutEffect)(() => {
     if (!anchorEl) {
       setPos(null);
       return;
@@ -5861,7 +6131,7 @@ function anchoredStyle(pos) {
 }
 
 // src/client/components/ImageEditor.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MAX_BYTES = 2 * 1024 * 1024;
 var FETCH_TIMEOUT_MS = 12e3;
 var PROBE_TIMEOUT_MS = 8e3;
@@ -5919,15 +6189,15 @@ function urlFromDataTransfer(dt) {
 function ImageEditor({ editor }) {
   const dispatch = useDispatch();
   const { route, session } = useStore();
-  const [replacement, setReplacement] = (0, import_react10.useState)(null);
-  const [urlValue, setUrlValue] = (0, import_react10.useState)("");
-  const [loading2, setLoading] = (0, import_react10.useState)(false);
-  const [description, setDescription] = (0, import_react10.useState)("");
-  const [priority, setPriority] = (0, import_react10.useState)("nice");
-  const [over, setOver] = (0, import_react10.useState)(false);
-  const fileInput = (0, import_react10.useRef)(null);
-  const abortRef = (0, import_react10.useRef)(null);
-  const debounceRef = (0, import_react10.useRef)(null);
+  const [replacement, setReplacement] = (0, import_react11.useState)(null);
+  const [urlValue, setUrlValue] = (0, import_react11.useState)("");
+  const [loading2, setLoading] = (0, import_react11.useState)(false);
+  const [description, setDescription] = (0, import_react11.useState)("");
+  const [priority, setPriority] = (0, import_react11.useState)("nice");
+  const [over, setOver] = (0, import_react11.useState)(false);
+  const fileInput = (0, import_react11.useRef)(null);
+  const abortRef = (0, import_react11.useRef)(null);
+  const debounceRef = (0, import_react11.useRef)(null);
   const { ref, pos } = useAnchored(editor.element, "bottom", 12);
   const image = findImage(editor.element);
   const beforeSrc = image?.currentSrc || image?.src || "";
@@ -5991,7 +6261,7 @@ function ImageEditor({ editor }) {
       }
     }
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (debounceRef.current !== null) window.clearTimeout(debounceRef.current);
     if (urlValue.trim() === "" || replacement !== null) return;
     debounceRef.current = window.setTimeout(() => {
@@ -6001,8 +6271,8 @@ function ImageEditor({ editor }) {
       if (debounceRef.current !== null) window.clearTimeout(debounceRef.current);
     };
   }, [urlValue, replacement]);
-  (0, import_react10.useEffect)(() => () => abortRef.current?.abort(), []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => () => abortRef.current?.abort(), []);
+  (0, import_react11.useEffect)(() => {
     const onPaste = (event) => {
       const data = event.clipboardData;
       if (!data) return;
@@ -6080,23 +6350,23 @@ function ImageEditor({ editor }) {
     toast(dispatch, "Image proposal saved", "success");
   };
   const previewSrc = replacement?.kind === "data" ? replacement.dataUrl : replacement?.url;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: "rk-card", style: anchoredStyle(pos), role: "dialog", "aria-label": "Replace image", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-card-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconImage, { size: 14 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref, className: "rk-card", style: anchoredStyle(pos), role: "dialog", "aria-label": "Replace image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-card-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconImage, { size: 14 }),
       "Replace image"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-card-body", children: [
-      replacement && previewSrc ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rk-thumbs", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-thumb-pair", title: "Hover to compare with the current image", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("figure", { className: "rk-thumb", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: beforeSrc, alt: "Current" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("figcaption", { children: "Before" })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-card-body", children: [
+      replacement && previewSrc ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "rk-thumbs", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-thumb-pair", title: "Hover to compare with the current image", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("figure", { className: "rk-thumb", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: beforeSrc, alt: "Current" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("figcaption", { children: "Before" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("figure", { className: "rk-thumb", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: previewSrc, alt: "Proposed replacement" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("figcaption", { children: replacement.kind === "url" ? "After \xB7 linked" : "After" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("figure", { className: "rk-thumb", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: previewSrc, alt: "Proposed replacement" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("figcaption", { children: replacement.kind === "url" ? "After \xB7 linked" : "After" })
         ] })
-      ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "button",
           {
             type: "button",
@@ -6109,18 +6379,18 @@ function ImageEditor({ editor }) {
             onDragLeave: () => setOver(false),
             onDrop,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconUpload, { size: 18 }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconUpload, { size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
                 "Drop an image \u2014 from your disk or another tab \u2014",
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("br", {}),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", {}),
                 "or click to browse (max 2 MB)"
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-url", children: [
-          loading2 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rk-spinner", "aria-label": "Loading image" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconLink, { size: 13 }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-url", children: [
+          loading2 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-spinner", "aria-label": "Loading image" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconLink, { size: 13 }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "input",
             {
               className: "rk-input",
@@ -6135,9 +6405,9 @@ function ImageEditor({ editor }) {
           )
         ] })
       ] }),
-      replacement && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: clearReplacement, children: "Remove replacement" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref: fileInput, type: "file", accept: "image/*", hidden: true, onChange: onPick }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      replacement && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: clearReplacement, children: "Remove replacement" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ref: fileInput, type: "file", accept: "image/*", hidden: true, onChange: onPick }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "textarea",
         {
           className: "rk-textarea",
@@ -6147,43 +6417,43 @@ function ImageEditor({ editor }) {
           rows: 2
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "aria-pressed": priority === "must", onClick: () => setPriority("must"), children: "Must" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", "aria-pressed": priority === "nice", onClick: () => setPriority("nice"), children: "Nice to have" })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": priority === "must", onClick: () => setPriority("must"), children: "Must" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": priority === "nice", onClick: () => setPriority("nice"), children: "Nice to have" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-card-foot", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "rk-hint", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rk-kbd", children: "esc" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-card-foot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "rk-hint", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-kbd", children: "esc" }),
         " cancel"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rk-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => dispatch({ type: "CLOSE_EDITOR" }), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: save, children: "Save" })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => dispatch({ type: "CLOSE_EDITOR" }), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: save, children: "Save" })
       ] })
     ] })
   ] });
 }
 
 // src/client/components/InlineEditor.tsx
-var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function InlineEditor({ editor }) {
   const dispatch = useDispatch();
   const { route, session } = useStore();
-  const [after, setAfter] = (0, import_react11.useState)(() => editor.element.innerText);
-  const [priority, setPriority] = (0, import_react11.useState)("nice");
-  const [note, setNote] = (0, import_react11.useState)("");
-  const original = (0, import_react11.useRef)(null);
-  const baseline = (0, import_react11.useRef)(null);
-  const [sizeDelta, setSizeDelta] = (0, import_react11.useState)(0);
-  const [widthDelta, setWidthDelta] = (0, import_react11.useState)(0);
-  const [clipped, setClipped] = (0, import_react11.useState)(false);
-  const ringRef = (0, import_react11.useRef)(null);
-  const afterRef = (0, import_react11.useRef)(null);
+  const [after, setAfter] = (0, import_react12.useState)(() => editor.element.innerText);
+  const [priority, setPriority] = (0, import_react12.useState)("nice");
+  const [note, setNote] = (0, import_react12.useState)("");
+  const original = (0, import_react12.useRef)(null);
+  const baseline = (0, import_react12.useRef)(null);
+  const [sizeDelta, setSizeDelta] = (0, import_react12.useState)(0);
+  const [widthDelta, setWidthDelta] = (0, import_react12.useState)(0);
+  const [clipped, setClipped] = (0, import_react12.useState)(false);
+  const ringRef = (0, import_react12.useRef)(null);
+  const afterRef = (0, import_react12.useRef)(null);
   const { ref, pos } = useAnchored(editor.element, "bottom", 12);
   const element = editor.element;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const el = element;
     original.current = { html: el.innerHTML, text: el.innerText, styleAttr: el.getAttribute("style") };
     const rect = el.getBoundingClientRect();
@@ -6213,8 +6483,8 @@ function InlineEditor({ editor }) {
       }
     };
   }, [element]);
-  const focusedOnce = (0, import_react11.useRef)(false);
-  (0, import_react11.useEffect)(() => {
+  const focusedOnce = (0, import_react12.useRef)(false);
+  (0, import_react12.useEffect)(() => {
     const field = afterRef.current;
     if (pos === null || focusedOnce.current || !field) return;
     focusedOnce.current = true;
@@ -6222,7 +6492,7 @@ function InlineEditor({ editor }) {
     const end = field.value.length;
     field.setSelectionRange(end, end);
   }, [pos]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const field = afterRef.current;
     if (!field) return;
     field.style.height = "auto";
@@ -6232,7 +6502,7 @@ function InlineEditor({ editor }) {
     setAfter(value);
     if (element.innerText !== value) setElementText(element, value);
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let raf = 0;
     let lastDelta = 0;
     let lastWidth = 0;
@@ -6302,7 +6572,7 @@ function InlineEditor({ editor }) {
       cancel();
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const el = element;
     const onKeyDown = (event) => {
       if (event.key === "Enter" && !event.shiftKey) {
@@ -6320,19 +6590,19 @@ function InlineEditor({ editor }) {
   });
   const before = original.current?.text ?? "";
   const delta = after.length - before.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: ringRef, className: "rk-edit-ring" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref, className: "rk-card", style: anchoredStyle(pos), role: "dialog", "aria-label": "Rewrite text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-card-head", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconText, { size: 14 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: ringRef, className: "rk-edit-ring" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref, className: "rk-card", style: anchoredStyle(pos), role: "dialog", "aria-label": "Rewrite text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-card-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconText, { size: 14 }),
         "Rewrite text",
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "rk-delta", "aria-live": "polite", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "rk-delta", "aria-live": "polite", children: [
           before.length,
           " \u2192 ",
           after.length,
           " ",
-          delta !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: delta > 0 ? "rk-plus" : "rk-minus", children: [
+          delta !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: delta > 0 ? "rk-plus" : "rk-minus", children: [
             "(",
             delta > 0 ? "+" : "",
             delta,
@@ -6340,15 +6610,15 @@ function InlineEditor({ editor }) {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-card-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-diff", "aria-label": "Before and after", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-diff-row rk-diff-before", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-diff-tag", children: "Before" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-diff-text", children: before })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-card-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-diff", "aria-label": "Before and after", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-diff-row rk-diff-before", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-diff-tag", children: "Before" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-diff-text", children: before })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-diff-row rk-diff-after", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-diff-tag", children: "After" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-diff-row rk-diff-after", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-diff-tag", children: "After" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "textarea",
               {
                 ref: afterRef,
@@ -6362,11 +6632,11 @@ function InlineEditor({ editor }) {
             )
           ] })
         ] }),
-        (Math.abs(sizeDelta) > 2 || Math.abs(widthDelta) > 4 || clipped) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-size-note", role: "status", children: [
+        (Math.abs(sizeDelta) > 2 || Math.abs(widthDelta) > 4 || clipped) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-size-note", role: "status", children: [
           Math.abs(sizeDelta) > 2 && (() => {
             const lines = baseline.current ? Math.round(Math.abs(sizeDelta) / baseline.current.lineHeight) : 0;
             const lineNote = lines >= 1 ? ` (~${lines} line${lines === 1 ? "" : "s"})` : "";
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
               "Block ",
               sizeDelta > 0 ? "grew" : "shrank",
               " by ",
@@ -6376,16 +6646,16 @@ function InlineEditor({ editor }) {
               " \u2014 as it would with this text live."
             ] });
           })(),
-          Math.abs(sizeDelta) <= 2 && Math.abs(widthDelta) > 4 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+          Math.abs(sizeDelta) <= 2 && Math.abs(widthDelta) > 4 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
             "Block got ",
             widthDelta > 0 ? "wider" : "narrower",
             " by ",
             Math.abs(widthDelta),
             " px \u2014 as it would with this text live."
           ] }),
-          clipped && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-clip-note", children: "Text exceeds the visible crop here and will be cut off." })
+          clipped && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-clip-note", children: "Text exceeds the visible crop here and will be cut off." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "input",
           {
             className: "rk-input",
@@ -6394,24 +6664,24 @@ function InlineEditor({ editor }) {
             onChange: (event) => setNote(event.target.value)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": priority === "must", onClick: () => setPriority("must"), children: "Must" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-pressed": priority === "nice", onClick: () => setPriority("nice"), children: "Nice to have" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-pressed": priority === "must", onClick: () => setPriority("must"), children: "Must" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-pressed": priority === "nice", onClick: () => setPriority("nice"), children: "Nice to have" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-card-foot", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "rk-hint", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-kbd", children: "\u21B5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-card-foot", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "rk-hint", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-kbd", children: "\u21B5" }),
           " save \xB7 ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-kbd", children: "\u21E7\u21B5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-kbd", children: "\u21E7\u21B5" }),
           " newline \xB7",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "rk-kbd", children: "esc" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-kbd", children: "esc" }),
           " cancel"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rk-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: cancel, children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: commit, children: "Save" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: cancel, children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: commit, children: "Save" })
         ] })
       ] })
     ] })
@@ -6419,8 +6689,8 @@ function InlineEditor({ editor }) {
 }
 
 // src/client/components/NoteComposer.tsx
-var import_react12 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var TITLES = {
   comment: "Comment",
   delete: "Mark for deletion",
@@ -6436,14 +6706,14 @@ var PLACEHOLDERS = {
 function NoteComposer({ editor }) {
   const dispatch = useDispatch();
   const { route, session } = useStore();
-  const [text, setText] = (0, import_react12.useState)("");
-  const [direction, setDirection] = (0, import_react12.useState)(void 0);
-  const [priority, setPriority] = (0, import_react12.useState)("nice");
-  const textareaRef = (0, import_react12.useRef)(null);
+  const [text, setText] = (0, import_react13.useState)("");
+  const [direction, setDirection] = (0, import_react13.useState)(void 0);
+  const [priority, setPriority] = (0, import_react13.useState)("nice");
+  const textareaRef = (0, import_react13.useRef)(null);
   const { ref, pos } = useAnchored(editor.element, "bottom", 12);
   const { kind } = editor;
-  const focusedOnce = (0, import_react12.useRef)(false);
-  (0, import_react12.useEffect)(() => {
+  const focusedOnce = (0, import_react13.useRef)(false);
+  (0, import_react13.useEffect)(() => {
     const field = textareaRef.current;
     if (pos === null || focusedOnce.current || !field) return;
     focusedOnce.current = true;
@@ -6502,13 +6772,13 @@ function NoteComposer({ editor }) {
       save();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref, className: "rk-card", style: anchoredStyle(pos), role: "dialog", "aria-label": TITLES[kind], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-card-head", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className: "rk-card", style: anchoredStyle(pos), role: "dialog", "aria-label": TITLES[kind], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-card-head", children: [
       iconForType(kind),
       TITLES[kind]
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-card-body", children: [
-      kind === "move" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "rk-seg", role: "group", "aria-label": "Direction", children: ["up", "down", "first", "last"].map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-card-body", children: [
+      kind === "move" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-seg", role: "group", "aria-label": "Direction", children: ["up", "down", "first", "last"].map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           type: "button",
@@ -6518,7 +6788,7 @@ function NoteComposer({ editor }) {
         },
         option
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "textarea",
         {
           ref: textareaRef,
@@ -6530,29 +6800,29 @@ function NoteComposer({ editor }) {
           rows: 3
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-pressed": priority === "must", onClick: () => setPriority("must"), children: "Must" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-pressed": priority === "nice", onClick: () => setPriority("nice"), children: "Nice to have" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", "aria-pressed": priority === "must", onClick: () => setPriority("must"), children: "Must" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", "aria-pressed": priority === "nice", onClick: () => setPriority("nice"), children: "Nice to have" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-card-foot", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "rk-hint", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-kbd", children: "\u2318\u21B5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-card-foot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-hint", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-kbd", children: "\u2318\u21B5" }),
         " save \xB7 ",
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rk-kbd", children: "esc" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-kbd", children: "esc" }),
         " cancel"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rk-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => dispatch({ type: "CLOSE_EDITOR" }), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: save, children: "Save" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => dispatch({ type: "CLOSE_EDITOR" }), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "rk-btn rk-btn-primary", onClick: save, children: "Save" })
       ] })
     ] })
   ] });
 }
 
 // src/client/components/Panel.tsx
-var import_react13 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function changeSummary(item) {
   if (isCopyItem(item)) return `\u201C${item.payload.after}\u201D`;
   if (isImageItem(item)) {
@@ -6634,24 +6904,24 @@ function formatBytes(bytes) {
 function CopyDiff({ before, after }) {
   const parts = diffParts(before, after);
   const delta = after.length - before.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-diffview", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-diff-row rk-diff-before", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-diff-tag", children: "Before" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-diff-text", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-diffview", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-diff-row rk-diff-before", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-diff-tag", children: "Before" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-diff-text", children: [
         parts.prefix,
-        parts.delMid && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("mark", { className: "rk-del", children: parts.delMid }),
+        parts.delMid && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("mark", { className: "rk-del", children: parts.delMid }),
         parts.suffix
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-diff-row rk-diff-after", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-diff-tag", children: "After" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-diff-text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-diff-row rk-diff-after", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-diff-tag", children: "After" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-diff-text", children: [
         parts.prefix,
-        parts.insMid && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("mark", { className: "rk-ins", children: parts.insMid }),
+        parts.insMid && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("mark", { className: "rk-ins", children: parts.insMid }),
         parts.suffix
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-diff-len", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-diff-len", children: [
       before.length,
       " \u2192 ",
       after.length,
@@ -6662,8 +6932,8 @@ function CopyDiff({ before, after }) {
 }
 function ImageDetail({ beforeSrc, afterSrc, afterDataUrl }) {
   const replacement = afterDataUrl ?? afterSrc;
-  const [dims, setDims] = (0, import_react13.useState)("");
-  (0, import_react13.useEffect)(() => {
+  const [dims, setDims] = (0, import_react14.useState)("");
+  (0, import_react14.useEffect)(() => {
     if (!replacement) return;
     const img = new Image();
     img.onload = () => setDims(`${img.naturalWidth}\xD7${img.naturalHeight}px`);
@@ -6688,55 +6958,67 @@ function ImageDetail({ beforeSrc, afterSrc, afterDataUrl }) {
       window.open(replacement, "_blank", "noopener");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-imgdetail", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-thumbs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("figure", { className: "rk-thumb", children: [
-        beforeSrc ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: beforeSrc, alt: "Current" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-thumb-missing", children: "no image" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("figcaption", { children: "Before" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-imgdetail", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-thumbs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("figure", { className: "rk-thumb", children: [
+        beforeSrc ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: beforeSrc, alt: "Current" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-thumb-missing", children: "no image" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("figcaption", { children: "Before" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("figure", { className: "rk-thumb", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: replacement, alt: "Proposed replacement" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("figcaption", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("figure", { className: "rk-thumb", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: replacement, alt: "Proposed replacement" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("figcaption", { children: [
           "After",
           embedded ? "" : " \xB7 linked"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-imgdetail-meta", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-imgdetail-meta", children: [
       embedded ? "Embedded image" : "Linked image",
       dims ? ` \xB7 ${dims}` : "",
       bytes !== null ? ` \xB7 ${formatBytes(bytes)}` : ""
     ] }),
-    !embedded && afterSrc && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { className: "rk-imgdetail-url", href: afterSrc, target: "_blank", rel: "noopener noreferrer", title: afterSrc, children: afterSrc }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-imgdetail-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => void download(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconDownload, { size: 12 }),
+    !embedded && afterSrc && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { className: "rk-imgdetail-url", href: afterSrc, target: "_blank", rel: "noopener noreferrer", title: afterSrc, children: afterSrc }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-imgdetail-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => void download(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconDownload, { size: 12 }),
         " Download"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => window.open(replacement, "_blank", "noopener"), children: "Open" })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => window.open(replacement, "_blank", "noopener"), children: "Open" })
     ] })
   ] });
 }
+var SYNC_REASON_LABEL = {
+  "token-short": "token too short",
+  "bad-token": "token rejected",
+  "room-full": "room full",
+  unreachable: "server unreachable"
+};
+var SYNC_REASON_HELP = {
+  "token-short": "The sync server needs a token of at least 8 characters. Use a longer `token` (or `syncToken`) in <ReviewKit /> and everyone with the link shares items live.",
+  "bad-token": "The sync server rejected the token. Check `syncToken` / `token` in <ReviewKit />.",
+  "room-full": "This page already has the maximum number of reviewers online (16). Try again later.",
+  unreachable: "Could not reach the sync server. Usually the page's Content-Security-Policy is missing the server in connect-src, or the server is down. Items stay on this device meanwhile."
+};
 function Panel() {
-  const { session, panelOpen, activeItemId, badgeCorner, undoStack, preview, unapplied, syncStatus, emblemaPush, peers } = useStore();
+  const { session, panelOpen, activeItemId, badgeCorner, undoStack, preview, unapplied, syncStatus, syncReason, emblemaPush, peers } = useStore();
   const dispatch = useDispatch();
   const config = useConfig();
-  const [sticky, setStickyState] = (0, import_react13.useState)(() => isStickyEnabled(config.token));
-  const [query, setQuery] = (0, import_react13.useState)("");
-  const [typeFilter, setTypeFilter] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
-  const [prioFilter, setPrioFilter] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
-  const [statusFilter, setStatusFilter] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
-  const [filterOpen, setFilterOpen] = (0, import_react13.useState)(false);
-  const [settingsOpen, setSettingsOpen] = (0, import_react13.useState)(false);
-  const [emblemaAlive, setEmblemaAlive] = (0, import_react13.useState)(null);
-  const [emblemaSending, setEmblemaSending] = (0, import_react13.useState)(false);
-  const [emblemaSync, setEmblemaSync] = (0, import_react13.useState)("unknown");
-  const panelRef = (0, import_react13.useRef)(null);
-  const searchRef = (0, import_react13.useRef)(null);
-  const importRef = (0, import_react13.useRef)(null);
-  const sheetDrag = (0, import_react13.useRef)(null);
-  const items = (0, import_react13.useMemo)(() => session?.items ?? [], [session]);
-  const { orphanIds, hiddenIds } = (0, import_react13.useMemo)(() => {
+  const [sticky, setStickyState] = (0, import_react14.useState)(() => isStickyEnabled(config.token));
+  const [query, setQuery] = (0, import_react14.useState)("");
+  const [typeFilter, setTypeFilter] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
+  const [prioFilter, setPrioFilter] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
+  const [statusFilter, setStatusFilter] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
+  const [filterOpen, setFilterOpen] = (0, import_react14.useState)(false);
+  const [settingsOpen, setSettingsOpen] = (0, import_react14.useState)(false);
+  const [emblemaAlive, setEmblemaAlive] = (0, import_react14.useState)(null);
+  const [emblemaSending, setEmblemaSending] = (0, import_react14.useState)(false);
+  const [emblemaSync, setEmblemaSync] = (0, import_react14.useState)("unknown");
+  const panelRef = (0, import_react14.useRef)(null);
+  const searchRef = (0, import_react14.useRef)(null);
+  const importRef = (0, import_react14.useRef)(null);
+  const sheetDrag = (0, import_react14.useRef)(null);
+  const items = (0, import_react14.useMemo)(() => session?.items ?? [], [session]);
+  const { orphanIds, hiddenIds } = (0, import_react14.useMemo)(() => {
     const orphans = /* @__PURE__ */ new Set();
     const hiddens = /* @__PURE__ */ new Set();
     for (const item of items) {
@@ -6747,15 +7029,15 @@ function Panel() {
     }
     return { orphanIds: orphans, hiddenIds: hiddens };
   }, [items, panelOpen]);
-  const activeFilter = (0, import_react13.useMemo)(
+  const activeFilter = (0, import_react14.useMemo)(
     () => typeFilter.size + prioFilter.size + statusFilter.size > 0 ? { types: [...typeFilter], priorities: [...prioFilter], statuses: [...statusFilter] } : null,
     [typeFilter, prioFilter, statusFilter]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     dispatch({ type: "SET_FILTER", filter: activeFilter });
     return () => dispatch({ type: "SET_FILTER", filter: null });
   }, [activeFilter, dispatch]);
-  const filtered = (0, import_react13.useMemo)(() => {
+  const filtered = (0, import_react14.useMemo)(() => {
     const q = query.trim().toLowerCase();
     return items.map((item, index) => ({ item, number: index + 1 })).filter(({ item }) => {
       if (!itemMatchesFilter(item, activeFilter)) return false;
@@ -6764,22 +7046,22 @@ function Panel() {
       return haystack.includes(q);
     });
   }, [items, query, activeFilter]);
-  const typeCounts = (0, import_react13.useMemo)(() => {
+  const typeCounts = (0, import_react14.useMemo)(() => {
     const counts = /* @__PURE__ */ new Map();
     for (const item of items) counts.set(item.type, (counts.get(item.type) ?? 0) + 1);
     return counts;
   }, [items]);
-  const prioCounts = (0, import_react13.useMemo)(() => {
+  const prioCounts = (0, import_react14.useMemo)(() => {
     const counts = /* @__PURE__ */ new Map();
     for (const item of items) counts.set(item.priority, (counts.get(item.priority) ?? 0) + 1);
     return counts;
   }, [items]);
-  const statusCounts = (0, import_react13.useMemo)(() => {
+  const statusCounts = (0, import_react14.useMemo)(() => {
     const counts = /* @__PURE__ */ new Map();
     for (const item of items) counts.set(item.status, (counts.get(item.status) ?? 0) + 1);
     return counts;
   }, [items]);
-  const groups = (0, import_react13.useMemo)(() => {
+  const groups = (0, import_react14.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of filtered) {
       const list = map.get(entry.item.route) ?? [];
@@ -6788,7 +7070,7 @@ function Panel() {
     }
     return Array.from(map.entries());
   }, [filtered]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!filterOpen && !settingsOpen) return;
     const onDown = (event) => {
       const path = event.composedPath();
@@ -6799,7 +7081,7 @@ function Panel() {
     document.addEventListener("pointerdown", onDown, true);
     return () => document.removeEventListener("pointerdown", onDown, true);
   }, [filterOpen, settingsOpen]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!settingsOpen) return;
     let alive = true;
     const probe = () => {
@@ -6823,7 +7105,7 @@ function Panel() {
     live: "paired",
     off: "not paired"
   }[emblemaPairState];
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!panelOpen || activeItemId === null) return;
     const row = panelRef.current?.querySelector(`[data-item-id="${activeItemId}"]`);
     row?.scrollIntoView({ block: "nearest" });
@@ -6939,7 +7221,7 @@ function Panel() {
     panel.style.transform = "";
     if (dy > 110) dispatch({ type: "SET_PANEL", open: false });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       ref: panelRef,
@@ -6949,7 +7231,7 @@ function Panel() {
       "aria-label": "Review feedback panel",
       onKeyDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: "rk-sheet-handle",
@@ -6960,34 +7242,41 @@ function Panel() {
             onPointerCancel: onSheetHandleUp
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-panel-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-panel-title", children: "Feedback" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-panel-sub", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-panel-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-panel-title", children: "Feedback" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-panel-sub", children: [
               items.length,
               " item",
               items.length === 1 ? "" : "s",
               session.author ? ` \xB7 ${session.author}` : "",
-              syncStatus !== "disabled" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: `rk-sync rk-sync-${syncStatus}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-sync-dot" }),
-                syncStatus === "online" ? `live${peers.length > 0 ? ` \xB7 ${peers.length} other${peers.length === 1 ? "" : "s"}` : ""}` : syncStatus === "connecting" ? "connecting\u2026" : "local only"
-              ] }),
-              config.emblema && emblemaPush !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              syncStatus !== "disabled" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                "span",
+                {
+                  className: `rk-sync rk-sync-${syncStatus}${syncReason ? ` rk-sync-reason-${syncReason}` : ""}`,
+                  title: syncStatus === "online" ? "Live: everyone with this review link shares these items in real time" : syncStatus === "connecting" ? "Connecting to the sync server\u2026" : SYNC_REASON_HELP[syncReason ?? "unreachable"],
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-sync-dot" }),
+                    syncStatus === "online" ? `live${peers.length > 0 ? ` \xB7 ${peers.length} other${peers.length === 1 ? "" : "s"}` : ""}` : syncStatus === "connecting" ? "connecting\u2026" : `local only \xB7 ${SYNC_REASON_LABEL[syncReason ?? "unreachable"]}`
+                  ]
+                }
+              ),
+              config.emblema && emblemaPush !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "span",
                 {
                   className: `rk-sync rk-epush-${emblemaPush}`,
                   title: emblemaPush === "ok" ? "Review items stream to Emblema automatically" : emblemaPush === "sending" ? "Sending items to Emblema\u2026" : "Emblema isn't reachable \u2014 items resend on the next change, or use Resend all in the menu",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-sync-dot" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-sync-dot" }),
                     emblemaPush === "ok" ? "emblema" : emblemaPush === "sending" ? "emblema\u2026" : emblemaPush === "rejected" ? "emblema rejected" : "emblema offline"
                   ]
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-spacer" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-menu-scope rk-menu-anchor", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-spacer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-menu-scope rk-menu-anchor", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 type: "button",
@@ -7003,11 +7292,11 @@ function Panel() {
                     void pingEmblema(config.emblema).then((port) => setEmblemaAlive(port !== null));
                   }
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconGear, { size: 15 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconGear, { size: 15 })
               }
             ),
-            settingsOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-menu", role: "menu", "aria-label": "Session settings", children: [
-              config.token && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            settingsOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-menu", role: "menu", "aria-label": "Session settings", children: [
+              config.token && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -7022,12 +7311,12 @@ function Panel() {
                     toast(dispatch, next ? "Review stays on in this tab" : "Review active only via the link", "info");
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `rk-menu-check${sticky ? " rk-on" : ""}` }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `rk-menu-check${sticky ? " rk-on" : ""}` }),
                     "Keep review on in this tab"
                   ]
                 }
               ),
-              config.emblema && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              config.emblema && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -7057,7 +7346,7 @@ function Panel() {
                     }).finally(() => setEmblemaSending(false));
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "span",
                       {
                         className: "rk-emblema-dot",
@@ -7068,25 +7357,40 @@ function Panel() {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "button",
                 {
                   type: "button",
                   role: "menuitem",
                   className: "rk-menu-item",
-                  title: emblemaPairState === "stale" ? "The local sync agent is not answering \u2014 run `npx @satanwagen/reviewkit-cli serve` in the project" : "Pair this project with the Emblema app via a sync key",
+                  title: emblemaPairState === "stale" ? "The local sync agent is not answering \u2014 run `npx -p @satanwagen/reviewkit-cli reviewkit-emblema serve` in the project" : "Pair this project with the Emblema app via a sync key",
                   onClick: () => {
                     setSettingsOpen(false);
                     dispatch({ type: "SET_EMBLEMA_CONNECT", open: true });
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-emblema-dot", "data-state": emblemaPairState }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-emblema-dot", "data-state": emblemaPairState }),
                     "Connect to Emblema\u2026",
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-menu-count", children: emblemaPairLabel })
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-menu-count", children: emblemaPairLabel })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "rk-menu-item",
+                  title: resolveSyncToken(config) ? "Pair the reviewkit terminal CLI / Claude Code MCP bridge with this site" : "Needs live sync (sync is off on this page) \u2014 the terminal reads the shared room",
+                  disabled: !resolveSyncToken(config),
+                  onClick: () => {
+                    setSettingsOpen(false);
+                    dispatch({ type: "SET_TERMINAL_CONNECT", open: true });
+                  },
+                  children: "Connect terminal / agent\u2026"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "button",
                 {
                   type: "button",
@@ -7099,31 +7403,31 @@ function Panel() {
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
               className: "rk-icon-btn",
               "aria-label": "Keyboard shortcuts",
               onClick: () => dispatch({ type: "SET_CHEATSHEET", open: true }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconKeyboard, { size: 15 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconKeyboard, { size: 15 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
               className: "rk-icon-btn",
               "aria-label": "Close panel",
               onClick: () => dispatch({ type: "SET_PANEL", open: false }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconClose, { size: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconClose, { size: 14 })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-view-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-view-info", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-view-title", children: "Page view" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-seg rk-view-toggle", role: "group", "aria-label": "Page view (P to toggle)", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-view-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-view-info", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-view-title", children: "Page view" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-seg rk-view-toggle", role: "group", "aria-label": "Page view (P to toggle)", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 type: "button",
@@ -7133,7 +7437,7 @@ function Panel() {
                 children: "Original"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 type: "button",
@@ -7145,8 +7449,8 @@ function Panel() {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-panel-tools", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-panel-tools", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "button",
             {
               type: "button",
@@ -7157,15 +7461,15 @@ function Panel() {
                 dispatch({ type: "SET_MODE", mode: "pick" });
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconTarget, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconTarget, { size: 14 }),
                 " Pick an element"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-search-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-search", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconSearch, { size: 13 }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-search-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-search", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconSearch, { size: 13 }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "input",
                 {
                   ref: searchRef,
@@ -7177,8 +7481,8 @@ function Panel() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-menu-scope rk-menu-anchor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-menu-scope rk-menu-anchor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -7190,15 +7494,15 @@ function Panel() {
                     setSettingsOpen(false);
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconFilter, { size: 13 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconFilter, { size: 13 }),
                     "Filter",
-                    typeFilter.size + prioFilter.size + statusFilter.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-badge-count", children: typeFilter.size + prioFilter.size + statusFilter.size })
+                    typeFilter.size + prioFilter.size + statusFilter.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-badge-count", children: typeFilter.size + prioFilter.size + statusFilter.size })
                   ]
                 }
               ),
-              filterOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-menu", role: "menu", "aria-label": "Filter items", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-menu-title", children: "Type" }),
-                TYPE_FILTERS.map((type) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              filterOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-menu", role: "menu", "aria-label": "Filter items", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-menu-title", children: "Type" }),
+                TYPE_FILTERS.map((type) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -7212,16 +7516,16 @@ function Panel() {
                       setTypeFilter(next);
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `rk-menu-check${typeFilter.has(type) ? " rk-on" : ""}` }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `rk-menu-check${typeFilter.has(type) ? " rk-on" : ""}` }),
                       iconForType(type, 12),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-menu-label", children: type }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-menu-count", children: typeCounts.get(type) ?? 0 })
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-menu-label", children: type }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-menu-count", children: typeCounts.get(type) ?? 0 })
                     ]
                   },
                   type
                 )),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-menu-title", children: "Priority" }),
-                PRIORITY_FILTERS.map((priority) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-menu-title", children: "Priority" }),
+                PRIORITY_FILTERS.map((priority) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -7235,15 +7539,15 @@ function Panel() {
                       setPrioFilter(next);
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `rk-menu-check${prioFilter.has(priority) ? " rk-on" : ""}` }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-menu-label", children: PRIORITY_LABELS[priority] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-menu-count", children: prioCounts.get(priority) ?? 0 })
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `rk-menu-check${prioFilter.has(priority) ? " rk-on" : ""}` }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-menu-label", children: PRIORITY_LABELS[priority] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-menu-count", children: prioCounts.get(priority) ?? 0 })
                     ]
                   },
                   priority
                 )),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-menu-title", children: "Status" }),
-                STATUSES.map((status) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-menu-title", children: "Status" }),
+                STATUSES.map((status) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -7257,15 +7561,15 @@ function Panel() {
                       setStatusFilter(next);
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `rk-menu-check${statusFilter.has(status) ? " rk-on" : ""}` }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `rk-status-dot rk-st-${status}` }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-menu-label", children: status }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-menu-count", children: statusCounts.get(status) ?? 0 })
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `rk-menu-check${statusFilter.has(status) ? " rk-on" : ""}` }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `rk-status-dot rk-st-${status}` }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-menu-label", children: status }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-menu-count", children: statusCounts.get(status) ?? 0 })
                     ]
                   },
                   status
                 )),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "button",
                   {
                     type: "button",
@@ -7285,24 +7589,24 @@ function Panel() {
             ] })
           ] })
         ] }),
-        preview && unapplied > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-unplaced", role: "status", children: [
+        preview && unapplied > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-unplaced", role: "status", children: [
           unapplied,
           " saved change",
           unapplied === 1 ? "" : "s",
           " couldn\u2019t be placed on the current page \u2014 the page has changed since they were captured."
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-panel-list", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-empty", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-empty-art", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconTarget, { size: 22 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-empty-title", children: items.length === 0 ? "Nothing here yet" : "No matches" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-empty-text", children: items.length === 0 ? "Choose \u201CPick an element\u201D, then click anything on the page. Your suggestions collect here, ready to hand off." : "Try a different search, or clear the filters." })
-        ] }) : groups.map(([route, entries]) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-group-title", children: route }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-panel-list", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-empty", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-empty-art", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconTarget, { size: 22 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-empty-title", children: items.length === 0 ? "Nothing here yet" : "No matches" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-empty-text", children: items.length === 0 ? "Choose \u201CPick an element\u201D, then click anything on the page. Your suggestions collect here, ready to hand off." : "Try a different search, or clear the filters." })
+        ] }) : groups.map(([route, entries]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-group-title", children: route }),
           entries.map(({ item, number }) => {
             const active2 = item.id === activeItemId;
             const orphan = orphanIds.has(item.id);
             const hiddenEl = hiddenIds.has(item.id);
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "div",
                 {
                   "data-item-id": item.id,
@@ -7317,18 +7621,18 @@ function Panel() {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-item-num", children: number }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-item-icon", children: iconForType(item.type) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-item-body", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-item-snippet", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-item-num", children: number }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-item-icon", children: iconForType(item.type) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-item-body", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-item-snippet", children: [
                         item.target.tagName,
                         " \xB7 ",
                         item.target.textSnippet || item.target.selector
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-item-change", children: changeSummary(item) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-item-meta", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-author", title: new Date(item.createdAt).toLocaleString(), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-item-change", children: changeSummary(item) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-item-meta", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-author", title: new Date(item.createdAt).toLocaleString(), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                             "span",
                             {
                               className: "rk-author-dot",
@@ -7336,15 +7640,15 @@ function Panel() {
                             }
                           ),
                           item.author?.name ?? "Unknown",
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-time", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-time", children: [
                             " \xB7 ",
                             timeAgo(item.createdAt)
                           ] })
                         ] }),
-                        item.priority === "must" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-badge-mini rk-must", children: "must" }),
-                        item.status !== "open" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `rk-badge-mini rk-${item.status}`, children: item.status }),
-                        orphan && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-badge-mini rk-orphaned", children: "unanchored" }),
-                        hiddenEl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        item.priority === "must" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-badge-mini rk-must", children: "must" }),
+                        item.status !== "open" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `rk-badge-mini rk-${item.status}`, children: item.status }),
+                        orphan && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-badge-mini rk-orphaned", children: "unanchored" }),
+                        hiddenEl && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                           "span",
                           {
                             className: "rk-badge-mini rk-hidden-el",
@@ -7352,14 +7656,14 @@ function Panel() {
                             children: "hidden"
                           }
                         ),
-                        item.note && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-badge-mini", children: "note" }),
-                        peers.filter((peer) => peer.typingActive && peer.typingItemId === item.id).map((peer) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "rk-badge-mini", style: { color: peer.color }, children: [
+                        item.note && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-badge-mini", children: "note" }),
+                        peers.filter((peer) => peer.typingActive && peer.typingItemId === item.id).map((peer) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-badge-mini", style: { color: peer.color }, children: [
                           peer.name || "peer",
                           " is writing\u2026"
                         ] }, peer.id))
                       ] })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-item-actions", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-item-actions", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "button",
                       {
                         type: "button",
@@ -7374,15 +7678,15 @@ function Panel() {
                             "info"
                           );
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconTrash, { size: 13 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconTrash, { size: 13 })
                       }
                     ) })
                   ]
                 }
               ),
-              active2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-item-edit", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-detail-byline", title: new Date(item.createdAt).toLocaleString(), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              active2 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-item-edit", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-detail-byline", title: new Date(item.createdAt).toLocaleString(), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     "span",
                     {
                       className: "rk-author-dot",
@@ -7393,8 +7697,8 @@ function Panel() {
                   " \xB7 ",
                   timeAgo(item.createdAt)
                 ] }),
-                isCopyItem(item) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CopyDiff, { before: item.payload.before, after: item.payload.after }),
-                isImageItem(item) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                isCopyItem(item) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CopyDiff, { before: item.payload.before, after: item.payload.after }),
+                isImageItem(item) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   ImageDetail,
                   {
                     beforeSrc: item.payload.beforeSrc,
@@ -7402,7 +7706,7 @@ function Panel() {
                     afterDataUrl: item.payload.afterDataUrl
                   }
                 ),
-                isKnownItemType(item.type) && item.type !== "move" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                isKnownItemType(item.type) && item.type !== "move" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "textarea",
                   {
                     className: "rk-textarea",
@@ -7412,7 +7716,7 @@ function Panel() {
                     onChange: (event) => dispatch({ type: "UPDATE_ITEM", id: item.id, patch: withPayloadText(item, event.target.value) })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "input",
                   {
                     className: "rk-input",
@@ -7422,9 +7726,9 @@ function Panel() {
                     onChange: (event) => dispatch({ type: "UPDATE_ITEM", id: item.id, patch: { note: event.target.value } })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-seg", role: "group", "aria-label": "Priority", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "button",
                       {
                         type: "button",
@@ -7433,7 +7737,7 @@ function Panel() {
                         children: "Must"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "button",
                       {
                         type: "button",
@@ -7443,7 +7747,7 @@ function Panel() {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rk-seg", role: "group", "aria-label": "Status", children: STATUSES.map((status) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rk-seg", role: "group", "aria-label": "Status", children: STATUSES.map((status) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     "button",
                     {
                       type: "button",
@@ -7458,22 +7762,22 @@ function Panel() {
             ] }, item.id);
           })
         ] }, route)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rk-panel-foot", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: onExport, disabled: items.length === 0, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconDownload, { size: 13 }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-panel-foot", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: onExport, disabled: items.length === 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconDownload, { size: 13 }),
             " Export"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => void onCopy(), disabled: items.length === 0, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconCopyClipboard, { size: 13 }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => void onCopy(), disabled: items.length === 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconCopyClipboard, { size: 13 }),
             " Copy"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => importRef.current?.click(), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconUpload, { size: 13 }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { type: "button", className: "rk-btn rk-btn-ghost", onClick: () => importRef.current?.click(), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconUpload, { size: 13 }),
             " Import"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rk-spacer" }),
-          undoStack.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "rk-icon-btn", "aria-label": "Undo last change (\u2318Z)", onClick: () => dispatch({ type: "UNDO" }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconUndo, { size: 14 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rk-spacer" }),
+          undoStack.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "rk-icon-btn", "aria-label": "Undo last change (\u2318Z)", onClick: () => dispatch({ type: "UNDO" }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconUndo, { size: 14 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
@@ -7484,7 +7788,7 @@ function Panel() {
               children: "Clear"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
@@ -7494,7 +7798,7 @@ function Panel() {
               children: "Exit review"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "input",
             {
               ref: importRef,
@@ -7515,8 +7819,8 @@ function Panel() {
 }
 
 // src/client/components/Presence.tsx
-var import_react14 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function initials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "\xB7";
@@ -7526,8 +7830,8 @@ function initials(name) {
 function PresenceStrip() {
   const { peers, syncStatus } = useStore();
   if (syncStatus === "disabled" || peers.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rk-presence", "aria-label": `${peers.length} reviewer${peers.length === 1 ? "" : "s"} online`, children: [
-    peers.slice(0, 5).map((peer) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "rk-presence", "aria-label": `${peers.length} reviewer${peers.length === 1 ? "" : "s"} online`, children: [
+    peers.slice(0, 5).map((peer) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "span",
       {
         className: "rk-avatar",
@@ -7537,7 +7841,7 @@ function PresenceStrip() {
       },
       peer.id
     )),
-    peers.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "rk-avatar rk-avatar-more", children: [
+    peers.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "rk-avatar rk-avatar-more", children: [
       "+",
       peers.length - 5
     ] })
@@ -7545,13 +7849,13 @@ function PresenceStrip() {
 }
 function PeerCursors() {
   const { peers } = useStore();
-  const ringRefs = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
-  const cursorRefs = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
-  const motion = (0, import_react14.useRef)(
+  const ringRefs = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
+  const cursorRefs = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
+  const motion = (0, import_react15.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const peersRef = (0, import_react14.useRef)(peers);
-  const seen = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
+  const peersRef = (0, import_react15.useRef)(peers);
+  const seen = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
   for (const peer of peers) {
     const sig = peer.cursor ? `${peer.cursor.x},${peer.cursor.y},${peer.cursor.ox},${peer.cursor.oy}` : "";
     if (seen.current.get(peer.id) !== sig) {
@@ -7561,7 +7865,7 @@ function PeerCursors() {
     }
   }
   peersRef.current = peers;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     let raf = 0;
     let last = performance.now();
@@ -7666,8 +7970,8 @@ function PeerCursors() {
     return () => cancelAnimationFrame(raf);
   }, []);
   if (peers.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    peers.map((peer) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    peers.map((peer) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref: (el) => {
@@ -7679,7 +7983,7 @@ function PeerCursors() {
       },
       `ring-${peer.id}`
     )),
-    peers.map((peer, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    peers.map((peer, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         ref: (el) => {
@@ -7689,8 +7993,8 @@ function PeerCursors() {
         className: "rk-peer-cursor",
         style: { opacity: 0 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "14", height: "18", viewBox: "0 0 14 18", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M1 1l12 7.5-5.2 1.2L5 16z", fill: peer.color, stroke: "rgba(0,0,0,0.25)", strokeWidth: "1" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "14", height: "18", viewBox: "0 0 14 18", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M1 1l12 7.5-5.2 1.2L5 16z", fill: peer.color, stroke: "rgba(0,0,0,0.25)", strokeWidth: "1" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "span",
             {
               className: "rk-peer-name",
@@ -7709,19 +8013,19 @@ function PeerCursors() {
 }
 
 // src/client/components/QuickComment.tsx
-var import_react15 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function QuickComment() {
   const { quick } = useStore();
   if (!quick) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(QuickComposerCard, { quick }, quick.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuickComposerCard, { quick }, quick.id);
 }
 function QuickComposerCard({ quick }) {
   const { route, session } = useStore();
   const dispatch = useDispatch();
-  const [text, setText] = (0, import_react15.useState)("");
-  const fieldRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const [text, setText] = (0, import_react16.useState)("");
+  const fieldRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     const field = fieldRef.current;
     if (!field) return;
     field.focus();
@@ -7774,18 +8078,18 @@ function QuickComposerCard({ quick }) {
   };
   const x = Math.min(Math.max(quick.x, 8), window.innerWidth - 288);
   const y = Math.min(Math.max(quick.y + 12, 8), window.innerHeight - 108);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "rk-quick", style: { transform: `translate3d(${x}px, ${y}px, 0)` }, role: "dialog", "aria-label": "Quick comment", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "rk-quick-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconComment, { size: 12 }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Comment here" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "rk-hint", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "rk-kbd", children: "\u21B5" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rk-quick", style: { transform: `translate3d(${x}px, ${y}px, 0)` }, role: "dialog", "aria-label": "Quick comment", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rk-quick-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconComment, { size: 12 }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Comment here" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "rk-hint", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "rk-kbd", children: "\u21B5" }),
         " save \xB7 ",
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "rk-kbd", children: "esc" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "rk-kbd", children: "esc" }),
         " cancel"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "textarea",
       {
         ref: fieldRef,
@@ -7801,8 +8105,8 @@ function QuickComposerCard({ quick }) {
 }
 
 // src/client/components/PickLayer.tsx
-var import_react16 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function applyRect(el, rect, pad2 = 3) {
   if (!el) return;
   if (!rect) {
@@ -7817,14 +8121,14 @@ function applyRect(el, rect, pad2 = 3) {
 function PickLayer() {
   const { mode, selection, tool } = useStore();
   const dispatch = useDispatch();
-  const [hovered, setHovered] = (0, import_react16.useState)(null);
-  const outlineRef = (0, import_react16.useRef)(null);
-  const labelRef = (0, import_react16.useRef)(null);
-  const selectRef = (0, import_react16.useRef)(null);
-  const hoveredRef = (0, import_react16.useRef)(null);
+  const [hovered, setHovered] = (0, import_react17.useState)(null);
+  const outlineRef = (0, import_react17.useRef)(null);
+  const labelRef = (0, import_react17.useRef)(null);
+  const selectRef = (0, import_react17.useRef)(null);
+  const hoveredRef = (0, import_react17.useRef)(null);
   hoveredRef.current = hovered;
   const picking = mode === "pick";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!picking) {
       setHovered(null);
       return;
@@ -7868,7 +8172,7 @@ function PickLayer() {
       document.removeEventListener("mousedown", swallow, true);
     };
   }, [picking, tool, dispatch]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!picking) return;
     const body = document.body;
     const prev = body.style.cursor;
@@ -7878,7 +8182,7 @@ function PickLayer() {
       if (body.getAttribute("style") === "") body.removeAttribute("style");
     };
   }, [picking, tool]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     let raf = 0;
     const tick = () => {
       const hoverEl = hoveredRef.current;
@@ -7904,21 +8208,21 @@ function PickLayer() {
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
   }, [picking, selection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    picking && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: outlineRef, className: "rk-outline", style: { opacity: 0 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: labelRef, className: "rk-outline-label", style: { opacity: 0 }, children: hovered ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "rk-tag", children: hovered.tagName.toLowerCase() }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: describeElement(hovered).replace(/^[a-z0-9]+ · /, "") })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Pick an element" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    picking && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: outlineRef, className: "rk-outline", style: { opacity: 0 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: labelRef, className: "rk-outline-label", style: { opacity: 0 }, children: hovered ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "rk-tag", children: hovered.tagName.toLowerCase() }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: describeElement(hovered).replace(/^[a-z0-9]+ · /, "") })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Pick an element" }) })
     ] }),
-    selection && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: selectRef, className: "rk-select-ring", style: { opacity: 0 } })
+    selection && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: selectRef, className: "rk-select-ring", style: { opacity: 0 } })
   ] });
 }
 
 // src/client/components/Pins.tsx
-var import_react17 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var STATUS_LABELS = {
   open: "open",
   accepted: "accepted",
@@ -7930,22 +8234,22 @@ var RERESOLVE_MS = 800;
 function Pins() {
   const { session, route, activeItemId, editor, mode, filter } = useStore();
   const dispatch = useDispatch();
-  const [clusters, setClusters] = (0, import_react17.useState)([]);
-  const [orphanCount, setOrphanCount] = (0, import_react17.useState)(0);
-  const wrapRefs = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const visibleCache = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const highlightRef = (0, import_react17.useRef)(null);
-  const hoveredItems = (0, import_react17.useRef)(null);
-  const elementCache = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const lastResolve = (0, import_react17.useRef)(0);
-  const [newestId, setNewestId] = (0, import_react17.useState)(null);
-  const prevCount = (0, import_react17.useRef)(0);
-  const items = (0, import_react17.useMemo)(() => {
+  const [clusters, setClusters] = (0, import_react18.useState)([]);
+  const [orphanCount, setOrphanCount] = (0, import_react18.useState)(0);
+  const wrapRefs = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
+  const visibleCache = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
+  const highlightRef = (0, import_react18.useRef)(null);
+  const hoveredItems = (0, import_react18.useRef)(null);
+  const elementCache = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
+  const lastResolve = (0, import_react18.useRef)(0);
+  const [newestId, setNewestId] = (0, import_react18.useState)(null);
+  const prevCount = (0, import_react18.useRef)(0);
+  const items = (0, import_react18.useMemo)(() => {
     const all = session?.items ?? [];
     return all.map((item, index) => ({ item, number: index + 1 })).filter(({ item }) => item.route === route);
   }, [session, route]);
   const byId = new Map(items.map(({ item }) => [item.id, item]));
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const count = session?.items.length ?? 0;
     if (count > prevCount.current && session && count > 0) {
       const id = session.items[count - 1].id;
@@ -7956,7 +8260,7 @@ function Pins() {
     }
     prevCount.current = count;
   }, [session]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     let raf = 0;
     let lastSignature = "";
     const tick = (time) => {
@@ -8040,8 +8344,8 @@ function Pins() {
     dispatch({ type: "SET_ACTIVE_ITEM", id });
     dispatch({ type: "SET_PANEL", open: true });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: highlightRef, className: "rk-hl-ring", style: { opacity: 0 } }),
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: highlightRef, className: "rk-hl-ring", style: { opacity: 0 } }),
     clusters.map((cluster) => {
       const isCluster = cluster.ids.length > 1;
       const isActive = activeItemId !== null && cluster.ids.includes(activeItemId);
@@ -8051,7 +8355,7 @@ function Pins() {
       const status = statuses.size === 1 ? members[0]?.status : void 0;
       const dimmed = filter !== null && members.length > 0 && !members.some((item) => itemMatchesFilter(item, filter));
       const statusHint = isCluster ? status ? ` \xB7 all ${STATUS_LABELS[status] ?? status}` : "" : ` \xB7 ${STATUS_LABELS[members[0]?.status ?? "open"] ?? members[0]?.status}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           ref: (el) => {
@@ -8059,7 +8363,7 @@ function Pins() {
             else wrapRefs.current.delete(cluster.key);
           },
           className: `rk-pin-wrap${picking ? " rk-pin-ghost" : ""}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
@@ -8081,7 +8385,7 @@ function Pins() {
         cluster.key
       );
     }),
-    orphanCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    orphanCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "button",
       {
         type: "button",
@@ -8089,7 +8393,7 @@ function Pins() {
         style: { bottom: 16, left: "50%", transform: "translateX(-50%)" },
         onClick: () => dispatch({ type: "SET_PANEL", open: true }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconUnlink, { size: 13 }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconUnlink, { size: 13 }),
           orphanCount,
           " unanchored item",
           orphanCount === 1 ? "" : "s"
@@ -8100,13 +8404,13 @@ function Pins() {
 }
 
 // src/client/components/Toolbar.tsx
-var import_react18 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TOOLS = [
-  { tool: "select", hintId: "tool-select", label: "Select", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconTarget, { size: n }) },
-  { tool: "copy", hintId: "tool-copy", label: "Rewrite text", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconText, { size: n }) },
-  { tool: "comment", hintId: "tool-comment", label: "Comment", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconComment, { size: n }) },
-  { tool: "image", hintId: "tool-image", label: "Replace image", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconImage, { size: n }) }
+  { tool: "select", hintId: "tool-select", label: "Select", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconTarget, { size: n }) },
+  { tool: "copy", hintId: "tool-copy", label: "Rewrite text", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconText, { size: n }) },
+  { tool: "comment", hintId: "tool-comment", label: "Comment", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconComment, { size: n }) },
+  { tool: "image", hintId: "tool-image", label: "Replace image", icon: (n) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconImage, { size: n }) }
 ];
 var POS_KEY2 = "review-kit:toolbar-pos";
 var DRAG_THRESHOLD2 = 6;
@@ -8114,24 +8418,24 @@ function Toolbar() {
   const { selection, editor, peers, syncStatus, mode, tool } = useStore();
   const hasPeers = syncStatus !== "disabled" && peers.length > 0;
   const dispatch = useDispatch();
-  const ref = (0, import_react18.useRef)(null);
-  const [pos, setPos] = (0, import_react18.useState)(() => readStoredPos(POS_KEY2));
-  const drag = (0, import_react18.useRef)(null);
-  const [dragging, setDragging] = (0, import_react18.useState)(false);
-  const justDragged = (0, import_react18.useRef)(false);
+  const ref = (0, import_react19.useRef)(null);
+  const [pos, setPos] = (0, import_react19.useState)(() => readStoredPos(POS_KEY2));
+  const drag = (0, import_react19.useRef)(null);
+  const [dragging, setDragging] = (0, import_react19.useState)(false);
+  const justDragged = (0, import_react19.useRef)(false);
   const visible = editor === null || selection !== null;
   const applyPos = (next, persist) => {
     if (next === null && ref.current) ref.current.style.bottom = "";
     setPos(next);
     if (persist) storePos(POS_KEY2, next);
   };
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const el = ref.current;
     if (!el || pos === null) return;
     const clamped = clampPos(pos.x, pos.y, el.offsetWidth, el.offsetHeight);
     if (clamped.x !== pos.x || clamped.y !== pos.y) applyPos(clamped, true);
   }, [pos, selection, hasPeers, visible]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const onResize = () => {
       const el = ref.current;
       const current = readStoredPos(POS_KEY2);
@@ -8244,7 +8548,7 @@ function Toolbar() {
     mode === "pick" && selection === null ? "rk-ghost" : ""
   ].filter(Boolean).join(" ");
   const style = pos !== null ? { left: 0, top: 0, translate: `${pos.x}px ${pos.y}px` } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       ref,
@@ -8255,7 +8559,7 @@ function Toolbar() {
       onPointerDown,
       onClickCapture,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -8263,19 +8567,19 @@ function Toolbar() {
             "aria-label": "Move the toolbar \u2014 drag, or use arrow keys; double-click to reset its position",
             onKeyDown: onGripKeyDown,
             onDoubleClick: () => applyPos(null, true),
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { width: "8", height: "14", viewBox: "0 0 8 14", "aria-hidden": "true", fill: "currentColor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "2", cy: "2", r: "1.1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "6", cy: "2", r: "1.1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "2", cy: "7", r: "1.1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "6", cy: "7", r: "1.1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "2", cy: "12", r: "1.1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "6", cy: "12", r: "1.1" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { width: "8", height: "14", viewBox: "0 0 8 14", "aria-hidden": "true", fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "2", cy: "2", r: "1.1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "6", cy: "2", r: "1.1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "2", cy: "7", r: "1.1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "6", cy: "7", r: "1.1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "2", cy: "12", r: "1.1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "6", cy: "12", r: "1.1" })
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PresenceStrip, {}),
-        hasPeers && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "rk-toolbar-sep" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "rk-seg rk-tool-seg", role: "group", "aria-label": "Tools", children: TOOLS.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PresenceStrip, {}),
+        hasPeers && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "rk-toolbar-sep" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rk-seg rk-tool-seg", role: "group", "aria-label": "Tools", children: TOOLS.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -8287,9 +8591,9 @@ function Toolbar() {
           },
           entry.tool
         )) }),
-        selection && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "rk-toolbar-sep" }),
-        selection && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        selection && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "rk-toolbar-sep" }),
+        selection && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "button",
             {
               type: "button",
@@ -8298,12 +8602,12 @@ function Toolbar() {
               title: `Rewrite text${keyHint("tool-copy")}`,
               onClick: () => open("copy"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconText, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconText, { size: 14 }),
                 " Rewrite"
               ]
             }
           ),
-          hasImage && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          hasImage && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "button",
             {
               type: "button",
@@ -8312,12 +8616,12 @@ function Toolbar() {
               title: `Replace image${keyHint("tool-image")}`,
               onClick: () => open("image"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconImage, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconImage, { size: 14 }),
                 " Image"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "button",
             {
               type: "button",
@@ -8326,32 +8630,32 @@ function Toolbar() {
               title: `Comment${keyHint("tool-comment")}`,
               onClick: () => open("comment"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconComment, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconComment, { size: 14 }),
                 " Comment"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", role: "menuitem", className: "rk-toolbar-btn", onClick: () => open("style"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconStyle, { size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", role: "menuitem", className: "rk-toolbar-btn", onClick: () => open("style"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconStyle, { size: 14 }),
             " Style"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", role: "menuitem", className: "rk-toolbar-btn", onClick: () => open("move"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconMove, { size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", role: "menuitem", className: "rk-toolbar-btn", onClick: () => open("move"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconMove, { size: 14 }),
             " Move"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", role: "menuitem", className: "rk-toolbar-btn rk-danger", onClick: () => open("delete"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconTrash, { size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", role: "menuitem", className: "rk-toolbar-btn rk-danger", onClick: () => open("delete"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconTrash, { size: 14 }),
             " Delete"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "rk-toolbar-sep" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "rk-toolbar-sep" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               type: "button",
               className: "rk-icon-btn",
               "aria-label": "Deselect",
               onClick: () => dispatch({ type: "SELECT", selection: null }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconClose, { size: 13 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconClose, { size: 13 })
             }
           )
         ] })
@@ -8361,40 +8665,40 @@ function Toolbar() {
 }
 
 // src/client/components/Toast.tsx
-var import_react19 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ToastRow({ toast: toast2 }) {
   const dispatch = useDispatch();
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const timer = window.setTimeout(() => dispatch({ type: "DISMISS_TOAST", id: toast2.id }), 3500);
     return () => window.clearTimeout(timer);
   }, [toast2.id, dispatch]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `rk-toast rk-${toast2.tone}`, role: "status", children: [
-    toast2.tone === "success" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconCheck, { size: 13 }) : toast2.tone === "error" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconWarning, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconComment, { size: 13 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `rk-toast rk-${toast2.tone}`, role: "status", children: [
+    toast2.tone === "success" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconCheck, { size: 13 }) : toast2.tone === "error" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconWarning, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconComment, { size: 13 }),
     toast2.message
   ] });
 }
 function ToastHost() {
   const { toasts } = useStore();
   if (toasts.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rk-toasts", "aria-live": "polite", children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToastRow, { toast: toast2 }, toast2.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rk-toasts", "aria-live": "polite", children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToastRow, { toast: toast2 }, toast2.id)) });
 }
 
 // src/client/App.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function App() {
   const state = useStore();
   const rawDispatch = useDispatch();
   const config = useConfig();
   const dispatch = useRealtimeSync(state, rawDispatch, config, reducer);
-  const saveTimer = (0, import_react20.useRef)(null);
+  const saveTimer = (0, import_react21.useRef)(null);
   const storageKey = config.storageKey ?? defaultStorageKey();
   useAppliedPreview(state, dispatch);
   useEmblemaAutoPush(state, dispatch, config);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setEffectAssetsUrl(config.fxAssetsUrl);
   }, [config.fxAssetsUrl]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     let cancelled = false;
     void loadSession(storageKey).then((stored) => {
       if (cancelled) return;
@@ -8412,7 +8716,7 @@ function App() {
     };
   }, [storageKey, config.defaultAuthor, dispatch]);
   const { session } = state;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!session) return;
     if (saveTimer.current !== null) window.clearTimeout(saveTimer.current);
     saveTimer.current = window.setTimeout(() => {
@@ -8423,9 +8727,9 @@ function App() {
       if (saveTimer.current !== null) window.clearTimeout(saveTimer.current);
     };
   }, [session, storageKey, config]);
-  (0, import_react20.useEffect)(() => trackPointer(), []);
-  const focusHandled = (0, import_react20.useRef)(false);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => trackPointer(), []);
+  const focusHandled = (0, import_react21.useRef)(false);
+  (0, import_react21.useEffect)(() => {
     if (!session || focusHandled.current) return;
     focusHandled.current = true;
     const id = takeFocusItem();
@@ -8450,7 +8754,7 @@ function App() {
       cancelled = true;
     };
   }, [session, dispatch]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     let last = window.location.pathname;
     const check = () => {
       if (window.location.pathname !== last) {
@@ -8465,9 +8769,9 @@ function App() {
       window.removeEventListener("popstate", check);
     };
   }, [dispatch]);
-  const stateRef = (0, import_react20.useRef)(state);
+  const stateRef = (0, import_react21.useRef)(state);
   stateRef.current = state;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const onKeyDown = (event) => {
       const current = stateRef.current;
       for (const def of SHORTCUTS) {
@@ -8482,7 +8786,7 @@ function App() {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [dispatch]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!state.editor) return;
     const editorEl = state.editor.element;
     const onPointerDown = (event) => {
@@ -8495,32 +8799,33 @@ function App() {
   }, [state.editor, dispatch]);
   if (!session) return null;
   if (state.hidden) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DispatchContext.Provider, { value: dispatch, children: null });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DispatchContext.Provider, { value: dispatch, children: null });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DispatchContext.Provider, { value: dispatch, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PickLayer, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PeerCursors, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Toolbar, {}),
-    state.editor?.kind === "copy" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InlineEditor, { editor: state.editor }),
-    state.editor?.kind === "image" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageEditor, { editor: state.editor }),
-    state.editor && state.editor.kind !== "copy" && state.editor.kind !== "image" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NoteComposer, { editor: state.editor }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pins, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(QuickComment, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Panel, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Badge, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CoachMark, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheatSheet, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EmblemaConnect, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ConfirmHost, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToastHost, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DispatchContext.Provider, { value: dispatch, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PickLayer, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PeerCursors, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Toolbar, {}),
+    state.editor?.kind === "copy" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InlineEditor, { editor: state.editor }),
+    state.editor?.kind === "image" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ImageEditor, { editor: state.editor }),
+    state.editor && state.editor.kind !== "copy" && state.editor.kind !== "image" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NoteComposer, { editor: state.editor }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pins, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QuickComment, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Panel, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CoachMark, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheatSheet, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EmblemaConnect, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TerminalConnect, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ConfirmHost, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToastHost, {})
   ] });
 }
 
 // src/client/ReviewKit.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ShadowHost({ config }) {
-  const [mount, setMount] = (0, import_react21.useState)(null);
-  (0, import_react21.useEffect)(() => {
+  const [mount, setMount] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
     const host = document.createElement("div");
     host.setAttribute(HOST_ATTR, "");
     host.style.position = "fixed";
@@ -8556,15 +8861,15 @@ function ShadowHost({ config }) {
   }, []);
   if (!mount) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StoreProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(App, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StoreProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(App, {}) }),
     mount
   );
 }
 function ReviewKit(props) {
-  const [active2, setActive] = (0, import_react21.useState)(false);
+  const [active2, setActive] = (0, import_react22.useState)(false);
   const { enabled, token, allowedHosts, devAutoOn } = props;
   const hostsKey = allowedHosts?.join("\0") ?? "";
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (enabled === false) {
       setActive(false);
       return;
@@ -8575,7 +8880,7 @@ function ReviewKit(props) {
     return () => window.removeEventListener(DEACTIVATE_EVENT, onDeactivate);
   }, [enabled, token, devAutoOn, hostsKey]);
   if (enabled === false || !active2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ShadowHost, { config: props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ShadowHost, { config: props });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {