@devaccel-labs/comment-service 0.7.0 → 0.9.0

package/dist/react.js

@@ -1,3784 +1,86 @@
-// ../core/dist/resolve.js
-var norm = (value) => (value ?? "").replace(/\s+/g, " ").trim().toLowerCase();
-var labelOf = (value) => norm(value.accName) || norm(value.text);
-function isAncestorPath(ancestor, descendant) {
-  if (!ancestor || ancestor === descendant)
-    return false;
-  return descendant.startsWith(`${ancestor}/`);
-}
-function dropAncestors(candidates) {
-  return candidates.filter((candidate) => !candidates.some((other) => isAncestorPath(candidate.path, other.path)));
-}
-function finish(status, candidate, score, reason) {
-  if (candidate && !candidate.visible && (status === "pinned" || status === "drifted")) {
-    return { status: "hidden", key: candidate.key, score, reason: `hidden: ${reason}` };
-  }
-  return { status, key: candidate?.key ?? null, score, reason };
-}
-function sameExplicit(anchor, candidate) {
-  return anchor.explicit.some((expected) => candidate.explicit.some((actual) => actual.attr === expected.attr && actual.value === expected.value));
-}
-function sameComponent(anchor, candidate, requireFile) {
-  if (!anchor.component || !candidate.component)
-    return false;
-  if (anchor.component.name !== candidate.component.name)
-    return false;
-  if (requireFile) {
-    return Boolean(anchor.component.file) && anchor.component.file === candidate.component.file;
-  }
-  return true;
-}
-function sameRole(anchor, candidate) {
-  if (!anchor.role || !candidate.role)
-    return !anchor.role;
-  return anchor.role === candidate.role;
-}
-function sameLabel(anchor, candidate) {
-  const expected = labelOf(anchor);
-  if (!expected)
-    return false;
-  return expected === labelOf(candidate);
-}
-function unavailable(reason) {
-  return { status: "unavailable", key: null, score: 0, reason };
-}
-function resolveAnchor(anchor, candidates) {
-  const pool = candidates.filter((candidate) => candidate.route === anchor.route);
-  if (anchor.explicit.length > 0) {
-    const hits = dropAncestors(pool.filter((candidate) => sameExplicit(anchor, candidate)));
-    if (hits.length === 1)
-      return finish("pinned", hits[0], 100, "explicit id");
-    if (hits.length > 1) {
-      return { status: "ambiguous", key: null, score: 40, reason: "explicit id matches more than one element" };
-    }
-  }
-  const componentScoped = pool.filter((candidate) => sameComponent(anchor, candidate, true) && sameRole(anchor, candidate));
-  const labeled = dropAncestors(componentScoped.filter((candidate) => sameLabel(anchor, candidate)));
-  if (labeled.length === 1)
-    return finish("pinned", labeled[0], 100, "component file, role, and label");
-  if (labeled.length > 1) {
-    return {
-      status: "ambiguous",
-      key: null,
-      score: 50,
-      reason: "several elements in this component share the same label"
-    };
-  }
-  if (anchor.component?.file && anchor.component.name) {
-    const roots = pool.filter((candidate) => candidate.componentRoot && sameComponent(anchor, candidate, true));
-    if (roots.length === 1) {
-      const root = roots[0];
-      const inside = dropAncestors(pool.filter((candidate) => (candidate.path === root.path || isAncestorPath(root.path, candidate.path)) && sameRole(anchor, candidate)));
-      if (inside.length === 1) {
-        return finish("drifted", inside[0], 70, "same component and role, label changed");
-      }
-      const where2 = anchor.overlay ? ` Last seen in ${anchor.overlay.role} \u201C${anchor.overlay.name}\u201D.` : "";
-      return unavailable(`label no longer matches inside ${anchor.component.name}.${where2}`.trim());
-    }
-    if (roots.length === 0) {
-      const where2 = anchor.overlay ? ` Last seen in ${anchor.overlay.role} \u201C${anchor.overlay.name}\u201D.` : "";
-      return unavailable(`component ${anchor.component.name} is not on ${anchor.route}.${where2}`.trim());
-    }
-    return {
-      status: "ambiguous",
-      key: null,
-      score: 45,
-      reason: "component is on the page more than once and the label no longer matches"
-    };
-  }
-  if (anchor.component?.name) {
-    const named = dropAncestors(pool.filter((candidate) => sameComponent(anchor, candidate, false) && sameRole(anchor, candidate) && sameLabel(anchor, candidate)));
-    if (named.length === 1)
-      return finish("pinned", named[0], 80, "component name and label");
-    if (named.length > 1) {
-      return { status: "ambiguous", key: null, score: 40, reason: "component name and label match more than one element" };
-    }
-  }
-  const where = anchor.overlay ? ` It was inside ${anchor.overlay.role} \u201C${anchor.overlay.name}\u201D.` : "";
-  return unavailable(`no element on ${anchor.route} matches this comment.${where}`.trim());
-}
-
-// ../react/dist/capture.js
-var EXPLICIT = ["data-cs-anchor", "data-testid", "data-test", "id"];
-function clip(value, max = 160) {
-  const text = (value ?? "").replace(/\s+/g, " ").trim();
-  return text ? text.slice(0, max) : null;
-}
-function usableExplicit(attr, value) {
-  if (!value || value.length > 200)
-    return false;
-  if (attr === "id" || attr === "data-testid" || attr === "data-test") {
-    if (value.startsWith(":") || value.startsWith("radix-") || value.startsWith("headlessui-"))
-      return false;
-  }
-  return true;
-}
-function domPath(element) {
-  const parts = [];
-  let current = element;
-  while (current && current !== current.ownerDocument.body) {
-    const parent = current.parentElement;
-    if (!parent)
-      break;
-    parts.push([...parent.children].indexOf(current));
-    current = parent;
-  }
-  return parts.reverse().join("/");
-}
-function intraPath(element, owner) {
-  if (!owner || owner === element)
-    return element === owner ? element.tagName.toLowerCase() : null;
-  const parts = [];
-  let current = element;
-  while (current && current !== owner) {
-    const parent = current.parentElement;
-    if (!parent)
-      break;
-    const same = [...parent.children].filter((child) => child.tagName === current.tagName);
-    const index = same.indexOf(current);
-    const tag = current.tagName.toLowerCase();
-    parts.push(same.length > 1 ? `${tag}[${index}]` : tag);
-    current = parent;
-  }
-  return parts.reverse().join("/") || null;
-}
-function elementText(element) {
-  let direct = "";
-  for (const node of element.childNodes) {
-    if (node.nodeType === Node.TEXT_NODE)
-      direct += node.textContent ?? "";
-  }
-  const own = clip(direct);
-  if (own)
-    return own;
-  const full = clip(element.textContent, 80);
-  if (full && element.children.length <= 3)
-    return full;
-  return null;
-}
-function labelFor(element) {
-  const aria = element.getAttribute("aria-label");
-  if (aria)
-    return clip(aria);
-  const labelledby = element.getAttribute("aria-labelledby");
-  if (labelledby) {
-    const text = labelledby.split(/\s+/).map((id) => element.ownerDocument.getElementById(id)?.textContent ?? "").join(" ");
-    const clipped = clip(text);
-    if (clipped)
-      return clipped;
-  }
-  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-    if (element.labels?.[0]?.textContent)
-      return clip(element.labels[0].textContent);
-    if (element.placeholder)
-      return clip(element.placeholder);
-  }
-  if (element instanceof HTMLImageElement && element.alt)
-    return clip(element.alt);
-  return elementText(element);
-}
-function roleFor(element) {
-  const explicit = element.getAttribute("role");
-  if (explicit)
-    return explicit;
-  const tag = element.tagName.toLowerCase();
-  if (tag === "button")
-    return "button";
-  if (tag === "a" && element.hasAttribute("href"))
-    return "link";
-  if (tag === "textarea")
-    return "textbox";
-  if (tag === "select")
-    return "combobox";
-  if (tag === "dialog")
-    return "dialog";
-  if (/^h[1-6]$/.test(tag))
-    return "heading";
-  if (element instanceof HTMLInputElement)
-    return element.type === "checkbox" ? "checkbox" : "textbox";
-  return null;
-}
-function overlayFor(element) {
-  const node = element.closest("dialog,[role='dialog'],[role='alertdialog']");
-  if (!node)
-    return null;
-  const role = node.getAttribute("role") || (node.tagName === "DIALOG" ? "dialog" : "dialog");
-  return { role, name: labelFor(node) || "dialog" };
-}
-function fiberNames(element) {
-  const key2 = Object.keys(element).find((name) => name.startsWith("__reactFiber$") || name.startsWith("__reactInternalInstance$"));
-  if (!key2)
-    return [];
-  const names2 = [];
-  let fiber = element[key2];
-  for (let guard = 0; fiber && guard < 40; guard++) {
-    const type = fiber.type;
-    if (typeof type === "function") {
-      const fn = type;
-      const name = fn.displayName || fn.name;
-      if (name && !name.startsWith("_"))
-        names2.push(name);
-    }
-    fiber = fiber.return;
-  }
-  return names2.reverse();
-}
-function obviouslyHidden(element) {
-  const dialog = element.closest("dialog");
-  if (dialog instanceof HTMLDialogElement && !dialog.open)
-    return true;
-  if (element.closest("[hidden]"))
-    return true;
-  let current = element;
-  while (current) {
-    if (current.getAttribute("aria-hidden") === "true")
-      return true;
-    current = current.parentElement;
-  }
-  return false;
-}
-function ownership(element) {
-  const stack = [];
-  let owner = null;
-  let current = element;
-  while (current) {
-    const name2 = current.getAttribute("data-cs-cmp");
-    if (name2) {
-      if (!owner)
-        owner = current;
-      stack.push(name2);
-    }
-    current = current.parentElement;
-  }
-  if (owner) {
-    return {
-      component: { name: owner.getAttribute("data-cs-cmp") || "component", file: owner.getAttribute("data-cs-file") },
-      stack: stack.reverse(),
-      componentRoot: owner === element,
-      owner
-    };
-  }
-  const names2 = fiberNames(element);
-  const name = names2.at(-1) ?? null;
-  return {
-    component: name ? { name, file: null } : null,
-    stack: names2,
-    componentRoot: false,
-    owner: null
-  };
-}
-function candidateFromElement(element, route, key2) {
-  const owned = ownership(element);
-  const label = labelFor(element);
-  const explicit = EXPLICIT.flatMap((attr) => {
-    const value = element.getAttribute(attr);
-    return value && usableExplicit(attr, value) ? [{ attr, value }] : [];
-  });
-  return {
-    key: key2,
-    route,
-    visible: !obviouslyHidden(element),
-    path: domPath(element),
-    componentRoot: owned.componentRoot,
-    overlay: overlayFor(element),
-    explicit,
-    component: owned.component,
-    stack: owned.stack,
-    role: roleFor(element),
-    accName: label,
-    text: label,
-    tag: element.tagName.toLowerCase(),
-    intra: intraPath(element, owned.owner)
-  };
-}
-function captureAnchor(element, route = window.location.pathname) {
-  const candidate = candidateFromElement(element, route, "target");
-  return {
-    v: 1,
-    route,
-    overlay: candidate.overlay,
-    explicit: candidate.explicit,
-    component: candidate.component,
-    stack: candidate.stack,
-    role: candidate.role,
-    accName: candidate.accName,
-    text: candidate.text,
-    tag: candidate.tag,
-    intra: candidate.intra
-  };
-}
-function collectCandidates(route = window.location.pathname) {
-  const root = document.getElementById("cs-root");
-  const found = [];
-  const nodes = document.body?.querySelectorAll("*") ?? [];
-  let index = 0;
-  for (const element of nodes) {
-    if (root && (element === root || root.contains(element)))
-      continue;
-    const tag = element.tagName;
-    if (tag === "SCRIPT" || tag === "STYLE" || tag === "LINK" || tag === "META")
-      continue;
-    if (index > 8e3)
-      break;
-    found.push({ element, candidate: candidateFromElement(element, route, `e${index}`) });
-    index += 1;
-  }
-  return found;
-}
-function resolveInDocument(anchor, route = window.location.pathname) {
-  const found = collectCandidates(route);
-  const resolution = resolveAnchor(anchor, found.map((item) => item.candidate));
-  const element = found.find((item) => item.candidate.key === resolution.key)?.element ?? null;
-  return { resolution, element };
-}
-function elementAt(x, y) {
-  const root = document.getElementById("cs-root");
-  for (const element of document.elementsFromPoint(x, y)) {
-    if (element === document.body || element === document.documentElement)
-      continue;
-    if (root && (element === root || root.contains(element)))
-      continue;
-    const tag = element.tagName;
-    if (tag === "SCRIPT" || tag === "STYLE")
-      continue;
-    return element;
-  }
-  return null;
-}
-function describeElement(element) {
-  const name = element.closest("[data-cs-cmp]")?.getAttribute("data-cs-cmp");
-  const label = labelFor(element);
-  if (name && label)
-    return `${name} \u2014 ${label}`;
-  return name || label || element.tagName.toLowerCase();
-}
-
-// ../react/dist/toolbar.js
-import { jsx as _jsx6, jsxs as _jsxs6, Fragment as _Fragment3 } from "react/jsx-runtime";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-
-// ../react/dist/client.js
-var ApiError = class extends Error {
-  status;
-  code;
-  constructor(status, code, message) {
-    super(message);
-    this.status = status;
-    this.code = code;
-  }
-};
-function storageKey(session) {
-  return `devaccel.comment.${session.apiUrl}.${session.project}.${session.environment}`;
-}
-function readJwt(token) {
-  try {
-    const part = token.split(".")[1];
-    if (!part)
-      return null;
-    const pad = part.length % 4 === 0 ? "" : "=".repeat(4 - part.length % 4);
-    return JSON.parse(atob(part.replaceAll("-", "+").replaceAll("_", "/") + pad));
-  } catch {
-    return null;
-  }
-}
-function memberIsCurrent(token) {
-  const claims = readJwt(token);
-  if (!claims || claims.typ !== "member" || !claims.name || !claims.email)
-    return false;
-  return (claims.exp ?? 0) * 1e3 > Date.now() + 5e3;
-}
-async function request(url, token, init) {
-  const response = await fetch(url, {
-    ...init,
-    headers: {
-      authorization: `Bearer ${token}`,
-      "content-type": "application/json",
-      ...init?.headers ?? {}
-    }
-  });
-  const payload = await response.json().catch(() => null);
-  if (!response.ok) {
-    throw new ApiError(response.status, payload?.error?.code ?? "request_failed", payload?.error?.message ?? "Request failed.");
-  }
-  return payload;
-}
-async function unlock(session, displayName, email, secret) {
-  const payload = await request(`${session.apiUrl}/v1/auth`, session.hostToken, {
-    method: "POST",
-    body: JSON.stringify({ hostToken: session.hostToken, displayName, email, ...secret })
-  });
-  return payload.token;
-}
-async function createInvite(session, memberToken) {
-  return request(`${session.apiUrl}/v1/invites`, memberToken, {
-    method: "POST"
-  });
-}
-async function getProfile(session, memberToken) {
-  return request(`${session.apiUrl}/v1/me`, memberToken);
-}
-async function updateProfile(session, memberToken, patch) {
-  return request(`${session.apiUrl}/v1/me`, memberToken, {
-    method: "POST",
-    body: JSON.stringify(patch)
-  });
-}
-async function uploadAttachment(session, memberToken, file, name) {
-  const response = await fetch(`${session.apiUrl}/v1/attachments`, {
-    method: "POST",
-    headers: {
-      authorization: `Bearer ${memberToken}`,
-      "content-type": file.type || "application/octet-stream",
-      "x-file-name": encodeURIComponent(name)
-    },
-    body: file
-  });
-  const payload = await response.json().catch(() => null);
-  if (!response.ok || !payload?.attachment) {
-    throw new ApiError(response.status, payload?.error?.code ?? "upload_failed", payload?.error?.message ?? "Upload failed.");
-  }
-  return payload.attachment;
-}
-async function listMembers(session, memberToken) {
-  const payload = await request(`${session.apiUrl}/v1/members`, memberToken);
-  return payload.members;
-}
-async function listThreads(session, memberToken) {
-  return request(`${session.apiUrl}/v1/threads`, memberToken);
-}
-async function saveSettings(session, memberToken, settings) {
-  const payload = await request(`${session.apiUrl}/v1/settings`, memberToken, {
-    method: "PUT",
-    body: JSON.stringify({ settings })
-  });
-  return payload.settings;
-}
-async function createThread(session, memberToken, anchor, body, extras = {}) {
-  return request(`${session.apiUrl}/v1/threads`, memberToken, {
-    method: "POST",
-    body: JSON.stringify({ anchor, body, ...extras })
-  });
-}
-async function replyToThread(session, memberToken, threadId, body, extras = {}) {
-  return request(`${session.apiUrl}/v1/threads/${threadId}/replies`, memberToken, {
-    method: "POST",
-    body: JSON.stringify({ body, ...extras })
-  });
-}
-async function updateThread(session, memberToken, threadId, patch) {
-  return request(`${session.apiUrl}/v1/threads/${threadId}`, memberToken, {
-    method: "PATCH",
-    body: JSON.stringify(patch)
-  });
-}
-
-// ../react/dist/details.js
-import { jsx as _jsx2, jsxs as _jsxs2, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-
-// ../react/dist/icons.js
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Icon({ children, size = 16 }) {
-  return _jsx("svg", { className: "cs-icon", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children });
-}
-var AddComment = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }), _jsx("path", { d: "M12 7v6M9 10h6" })] });
-var Inbox = () => _jsxs(Icon, { size: 17, children: [_jsx("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }), _jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })] });
-var Eye = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] });
-var EyeOff = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }), _jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }), _jsx("path", { d: "M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }), _jsx("path", { d: "M2 2l20 20" })] });
-var Lock = ({ size = 15 }) => _jsxs(Icon, { size, children: [_jsx("rect", { width: "16", height: "10", x: "4", y: "11", rx: "2" }), _jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })] });
-var Close = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
-var Send = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "m5 12 7-7 7 7M12 19V5" }) });
-var Check = () => _jsx(Icon, { size: 14, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) });
-var Target = () => _jsxs(Icon, { size: 14, children: [_jsx("circle", { cx: "12", cy: "12", r: "8" }), _jsx("circle", { cx: "12", cy: "12", r: "2.5" })] });
-var Relink = () => _jsx(Icon, { size: 14, children: _jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 1 1 0 10h-2M8 12h8" }) });
-var Undo = () => _jsxs(Icon, { size: 14, children: [_jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), _jsx("path", { d: "M3 3v5h5" })] });
-var Pencil = () => _jsx(Icon, { size: 13, children: _jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
-var Cursor = () => _jsx(Icon, { size: 14, children: _jsx("path", { d: "m4 4 7.07 17 2.51-7.39L21 11.07z" }) });
-var Paperclip = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
-var Camera = () => _jsxs(Icon, { size: 15, children: [_jsx("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }), _jsx("circle", { cx: "12", cy: "13", r: "3" })] });
-var FileIcon = () => _jsxs(Icon, { size: 15, children: [_jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), _jsx("polyline", { points: "14 2 14 8 20 8" })] });
-var Back = () => _jsx(Icon, { children: _jsx("path", { d: "m15 18-6-6 6-6" }) });
-var Table = () => _jsxs(Icon, { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M3 10h18M3 15h18M9 10v10" })] });
-var List = () => _jsx(Icon, { children: _jsx("path", { d: "M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01" }) });
-
-// ../react/dist/details.js
-var noDetails = { role: null, fields: {} };
-function detailsEnabled(settings) {
-  if (!settings)
-    return false;
-  return settings.roles.enabled && settings.roles.options.length > 0 || settings.fields.enabled && settings.fields.items.length > 0;
-}
-function hasFieldValues(details) {
-  return Object.values(details.fields).some((value) => value.trim());
-}
-function detailsPayload(settings, details) {
-  if (!settings)
-    return {};
-  const payload = {};
-  if (settings.roles.enabled && details.role)
-    payload.role = details.role;
-  if (settings.fields.enabled) {
-    const fields = Object.fromEntries(Object.entries(details.fields).filter(([, value]) => value.trim()));
-    if (Object.keys(fields).length)
-      payload.fields = fields;
-  }
-  return payload;
-}
-function fieldId(label, taken) {
-  const base = label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32) || "field";
-  let id = base;
-  for (let n = 2; taken.some((field) => field.id === id); n += 1)
-    id = `${base}-${n}`;
-  return id;
-}
-function DetailsInput({ settings, value, onChange, onKeyDown }) {
-  if (!settings || !detailsEnabled(settings))
-    return null;
-  const roles = settings.roles.enabled ? settings.roles.options : [];
-  const fields = settings.fields.enabled ? settings.fields.items : [];
-  return _jsxs2("div", { className: "cs-details-input", "data-cs-ui": "details-input", children: [fields.map((field) => _jsxs2("label", { className: "cs-detail-field", children: [_jsx2("span", { children: field.label }), _jsx2("textarea", { "data-cs-ui": `field-${field.id}`, rows: 1, maxLength: 4e3, value: value.fields[field.id] ?? "", onChange: (event) => onChange({ ...value, fields: { ...value.fields, [field.id]: event.target.value } }), onKeyDown })] }, field.id)), roles.length ? _jsxs2("div", { className: "cs-roles", role: "radiogroup", "aria-label": "Role", children: [_jsx2("span", { className: "cs-roles-label", children: "Role" }), roles.map((role) => _jsx2("button", { type: "button", role: "radio", "data-cs-ui": "role-option", "aria-checked": value.role === role, className: value.role === role ? "cs-chip is-on" : "cs-chip", onClick: () => onChange({ ...value, role: value.role === role ? null : role }), children: role }, role))] }) : null] });
-}
-function RoleBadge({ role }) {
-  return role ? _jsx2("span", { className: "cs-role", "data-cs-ui": "role", children: role }) : null;
-}
-function FieldValues({ fields, clamp = false }) {
-  if (!fields.length)
-    return null;
-  return _jsx2("dl", { className: clamp ? "cs-detail-list is-clamped" : "cs-detail-list", "data-cs-ui": "fields", children: fields.map((field) => _jsxs2("div", { children: [_jsx2("dt", { children: field.label }), _jsx2("dd", { children: field.value })] }, field.id)) });
-}
-function DetailsEditor({ settings, thread, onSave, onClose }) {
-  const [value, setValue] = useState(() => ({
-    role: thread.role,
-    fields: Object.fromEntries(thread.fields.map((field) => [field.id, field.value]))
-  }));
-  const [busy, setBusy] = useState(false);
-  return _jsxs2("form", { className: "cs-details-edit", "data-cs-ui": "details-editor", onSubmit: (event) => {
-    event.preventDefault();
-    const patch = {};
-    if (settings.roles.enabled && value.role !== thread.role)
-      patch.role = value.role;
-    if (settings.fields.enabled) {
-      patch.fields = Object.fromEntries(settings.fields.items.map((field) => [field.id, value.fields[field.id] ?? ""]));
-    }
-    setBusy(true);
-    onSave(patch).then(onClose).finally(() => setBusy(false));
-  }, children: [_jsx2(DetailsInput, { settings, value, onChange: setValue }), _jsxs2("div", { className: "cs-row-end", children: [_jsx2("button", { className: "cs-button", type: "button", onClick: onClose, children: "Cancel" }), _jsx2("button", { className: "cs-button is-primary", "data-cs-ui": "details-save", type: "submit", disabled: busy, children: "Save" })] })] });
-}
-function AddRow({ label, hook, onAdd }) {
-  const [text, setText] = useState("");
-  return _jsxs2("form", { className: "cs-add-row", onSubmit: (event) => {
-    event.preventDefault();
-    const next = text.trim().replace(/\s+/g, " ");
-    if (!next)
-      return;
-    onAdd(next);
-    setText("");
-  }, children: [_jsx2("input", { "data-cs-ui": hook, "aria-label": label, placeholder: label, value: text, maxLength: 60, onChange: (event) => setText(event.target.value) }), _jsx2("button", { className: "cs-icon-button", type: "submit", "aria-label": label, disabled: !text.trim(), children: _jsx2(Check, {}) })] });
-}
-function SettingsPanel({ settings, onChange, onBack, error }) {
-  return _jsxs2("section", { className: "cs-card cs-menu cs-settings cs-hit", "data-cs-ui": "settings", "aria-label": "Comment fields", children: [_jsxs2("header", { className: "cs-settings-head", children: [_jsx2("button", { className: "cs-icon-button", type: "button", "aria-label": "Back", onClick: onBack, children: _jsx2(Back, {}) }), _jsx2("h2", { children: "Comment fields" })] }), !settings ? _jsx2("p", { className: "cs-hint", children: "Loading\u2026" }) : _jsxs2(_Fragment, { children: [_jsxs2("button", { className: "cs-item", "data-cs-ui": "roles-toggle", type: "button", role: "switch", "aria-checked": settings.roles.enabled, onClick: () => onChange({ ...settings, roles: { ...settings.roles, enabled: !settings.roles.enabled } }), children: [_jsx2("span", { children: "Role" }), _jsx2("span", { className: settings.roles.enabled ? "cs-switch is-on" : "cs-switch" })] }), settings.roles.enabled ? _jsxs2("div", { className: "cs-settings-body", children: [settings.roles.options.length ? _jsx2("div", { className: "cs-chips", children: settings.roles.options.map((role) => _jsxs2("span", { className: "cs-chip is-static", "data-cs-ui": "role-chip", children: [role, _jsx2("button", { type: "button", "aria-label": `Remove ${role}`, onClick: () => onChange({ ...settings, roles: { ...settings.roles, options: settings.roles.options.filter((item) => item !== role) } }), children: _jsx2(Close, {}) })] }, role)) }) : null, _jsx2(AddRow, { label: "Add a role", hook: "role-add", onAdd: (role) => {
-    if (settings.roles.options.some((item) => item.toLowerCase() === role.toLowerCase()))
-      return;
-    onChange({ ...settings, roles: { ...settings.roles, options: [...settings.roles.options, role.slice(0, 40)] } });
-  } })] }) : null, _jsx2("div", { className: "cs-sep" }), _jsxs2("button", { className: "cs-item", "data-cs-ui": "fields-toggle", type: "button", role: "switch", "aria-checked": settings.fields.enabled, onClick: () => onChange({ ...settings, fields: { ...settings.fields, enabled: !settings.fields.enabled } }), children: [_jsx2("span", { children: "Custom fields" }), _jsx2("span", { className: settings.fields.enabled ? "cs-switch is-on" : "cs-switch" })] }), settings.fields.enabled ? _jsxs2("div", { className: "cs-settings-body", children: [settings.fields.items.map((field) => _jsxs2("div", { className: "cs-field-row", "data-cs-ui": "field-def", children: [_jsx2("span", { children: field.label }), _jsx2("button", { className: "cs-icon-button", type: "button", "aria-label": `Remove ${field.label}`, onClick: () => onChange({ ...settings, fields: { ...settings.fields, items: settings.fields.items.filter((item) => item.id !== field.id) } }), children: _jsx2(Close, {}) })] }, field.id)), _jsx2(AddRow, { label: "Add a field", hook: "field-add", onAdd: (label) => onChange({
-    ...settings,
-    fields: { ...settings.fields, items: [...settings.fields.items, { id: fieldId(label, settings.fields.items), label }] }
-  }) })] }) : null, error ? _jsx2("p", { className: "cs-error cs-pad", children: error }) : null, _jsx2("p", { className: "cs-hint", children: "Shared with everyone here. Turning off or removing only affects new comments." })] })] });
-}
-
-// ../react/dist/format.js
-var palette = ["#007aff", "#34c759", "#ff9500", "#af52de", "#ff2d55", "#5ac8fa", "#5856d6", "#a2845e"];
-function initials(name) {
-  const parts = name.trim().split(/\s+/).filter(Boolean);
-  const letters = parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : (parts[0] ?? "?").slice(0, 2);
-  return letters.toUpperCase();
-}
-function colorFor(name) {
-  let hash = 0;
-  for (const char of name)
-    hash = hash * 31 + char.charCodeAt(0) | 0;
-  return palette[Math.abs(hash) % palette.length];
-}
-function ago(iso) {
-  const seconds = Math.max(0, (Date.now() - Date.parse(iso)) / 1e3);
-  if (seconds < 60)
-    return "now";
-  if (seconds < 3600)
-    return `${Math.floor(seconds / 60)}m`;
-  if (seconds < 86400)
-    return `${Math.floor(seconds / 3600)}h`;
-  if (seconds < 86400 * 30)
-    return `${Math.floor(seconds / 86400)}d`;
-  return new Date(iso).toLocaleDateString();
-}
-function targetName(anchor) {
-  const owner = anchor.component?.name ?? anchor.tag;
-  const label = (anchor.accName || anchor.text || "").trim();
-  return label ? `${owner} \u203A ${label.length > 40 ? `${label.slice(0, 40)}\u2026` : label}` : owner;
-}
-function statusNote(status, anchor, onThisRoute) {
-  switch (status) {
-    case "pinned":
-    case "resolved":
-      return null;
-    case "drifted":
-      return { text: "Text changed", tone: "warn" };
-    case "hidden":
-      return { text: anchor.overlay ? `Inside \u201C${anchor.overlay.name}\u201D` : "Not visible right now", tone: "quiet" };
-    case "ambiguous":
-      return { text: "Matches more than one element", tone: "warn" };
-    case "unavailable":
-      return onThisRoute ? { text: "No longer on this page", tone: "bad" } : null;
-    default: {
-      const never = status;
-      return never;
-    }
-  }
-}
-function names(people) {
-  const list = people.map((person) => person.name);
-  return list.length > 1 ? `${list.slice(0, -1).join(", ")} and ${list.at(-1)}` : list[0] ?? "";
-}
-function deliveryText(delivery) {
-  if (!delivery)
-    return null;
-  const parts = [];
-  if (delivery.emailed.length)
-    parts.push(`Emailed ${names(delivery.emailed)}`);
-  const limited = delivery.skipped.filter((item) => item.reason === "rate_limited");
-  if (limited.length)
-    parts.push(`Hourly email limit reached, ${names(limited)} not emailed`);
-  const muted = delivery.skipped.filter((item) => item.reason === "muted");
-  if (muted.length)
-    parts.push(`${names(muted)} turned off mention emails`);
-  if (delivery.skipped.some((item) => item.reason === "disabled"))
-    parts.push("Email isn\u2019t set up for this app");
-  return parts.length ? parts.join(" \xB7 ") : null;
-}
-
-// ../react/dist/attachments.js
-import { jsx as _jsx3, jsxs as _jsxs3 } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState as useState2 } from "react";
-var MAX_BYTES = 10 * 1024 * 1024;
-var MAX_FILES = 5;
-var ACCEPT = "image/png,image/jpeg,image/gif,image/webp,application/pdf,text/plain,text/csv,application/json,application/zip,video/mp4,video/webm,video/quicktime";
-var ALLOWED = new Set(ACCEPT.split(","));
-function formatSize(bytes) {
-  if (bytes < 1024)
-    return `${bytes} B`;
-  if (bytes < 1024 * 1024)
-    return `${Math.round(bytes / 1024)} KB`;
-  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-}
-function useAttachments(session, memberToken, onError) {
-  const [items, setItems] = useState2([]);
-  const itemsRef = useRef(items);
-  itemsRef.current = items;
-  const patch = (key2, next) => setItems((current) => current.map((item) => item.key === key2 ? { ...item, ...next } : item));
-  const add = useCallback((files) => {
-    if (!session || !memberToken)
-      return;
-    const room = MAX_FILES - itemsRef.current.length;
-    if (files.length > room)
-      onError(`Up to ${MAX_FILES} files per message.`);
-    for (const { blob, name } of files.slice(0, Math.max(0, room))) {
-      if (!ALLOWED.has(blob.type)) {
-        onError(`${name}: that file type isn\u2019t supported.`);
-        continue;
-      }
-      if (blob.size > MAX_BYTES) {
-        onError(`${name} is over 10 MB.`);
-        continue;
-      }
-      const key2 = crypto.randomUUID();
-      const preview = blob.type.startsWith("image/") ? URL.createObjectURL(blob) : null;
-      setItems((current) => [...current, { key: key2, name, size: blob.size, contentType: blob.type, preview, status: "uploading" }]);
-      uploadAttachment(session, memberToken, blob, name).then((attachment) => patch(key2, { status: "ready", id: attachment.id })).catch((caught) => {
-        const message = caught instanceof Error ? caught.message : "Upload failed.";
-        patch(key2, { status: "failed", error: message });
-        onError(`${name}: ${message}`);
-      });
-    }
-  }, [memberToken, onError, session]);
-  const remove = useCallback((key2) => {
-    setItems((current) => {
-      const item = current.find((candidate) => candidate.key === key2);
-      if (item?.preview)
-        URL.revokeObjectURL(item.preview);
-      return current.filter((candidate) => candidate.key !== key2);
-    });
-  }, []);
-  const reset = useCallback(() => {
-    for (const item of itemsRef.current)
-      if (item.preview)
-        URL.revokeObjectURL(item.preview);
-    setItems([]);
-  }, []);
-  useEffect(() => () => itemsRef.current.forEach((item) => item.preview && URL.revokeObjectURL(item.preview)), []);
-  return {
-    items,
-    add,
-    remove,
-    reset,
-    ids: items.filter((item) => item.status === "ready" && item.id).map((item) => item.id),
-    uploading: items.some((item) => item.status === "uploading")
-  };
-}
-function filesFromClipboard(event) {
-  return [...event.clipboardData.files].map((file) => ({ blob: file, name: file.name || "pasted-image.png" }));
-}
-function AttachmentTray({ items, onRemove }) {
-  if (!items.length)
-    return null;
-  return _jsx3("div", { className: "cs-tray", "data-cs-ui": "attachment-tray", children: items.map((item) => _jsxs3("div", { className: `cs-pending is-${item.status}`, "data-cs-ui": "pending-file", "data-status": item.status, title: item.error ?? item.name, children: [item.preview ? _jsx3("img", { src: item.preview, alt: "" }) : _jsx3(FileIcon, {}), _jsx3("span", { className: "cs-pending-name", children: item.name }), _jsx3("button", { type: "button", className: "cs-pending-remove", "aria-label": `Remove ${item.name}`, onClick: () => onRemove(item.key), children: _jsx3(Close, {}) })] }, item.key)) });
-}
-function AttachButtons({ onFiles, onSnapshot, capturing }) {
-  const input = useRef(null);
-  return _jsxs3("span", { className: "cs-attach", children: [_jsx3("input", { ref: input, type: "file", multiple: true, accept: ACCEPT, hidden: true, "data-cs-ui": "file-input", onChange: (event) => {
-    onFiles([...event.target.files ?? []].map((file) => ({ blob: file, name: file.name })));
-    event.target.value = "";
-  } }), _jsx3("button", { type: "button", className: "cs-icon-button", "data-cs-ui": "attach", "aria-label": "Attach files", onClick: () => input.current?.click(), children: _jsx3(Paperclip, {}) }), _jsx3("button", { type: "button", className: "cs-icon-button", "data-cs-ui": "snapshot", "aria-label": "Attach a screenshot of the page", disabled: capturing, onClick: onSnapshot, children: _jsx3(Camera, {}) })] });
-}
-function MessageAttachments({ attachments }) {
-  if (!attachments?.length)
-    return null;
-  const images = attachments.filter((file) => file.contentType.startsWith("image/"));
-  const others = attachments.filter((file) => !file.contentType.startsWith("image/"));
-  return _jsxs3("div", { className: "cs-files", "data-cs-ui": "attachments", children: [images.length ? _jsx3("div", { className: "cs-thumbs", children: images.map((file) => _jsx3("a", { href: file.url, target: "_blank", rel: "noreferrer noopener", className: "cs-thumb", title: file.name, "data-cs-ui": "attachment", children: _jsx3("img", { src: file.url, alt: file.name, loading: "lazy" }) }, file.id)) }) : null, others.map((file) => _jsxs3("a", { href: file.url, target: "_blank", rel: "noreferrer noopener", className: "cs-file", "data-cs-ui": "attachment", children: [_jsx3(FileIcon, {}), _jsx3("span", { className: "cs-file-name", children: file.name }), _jsx3("span", { className: "cs-file-size", children: formatSize(file.size) })] }, file.id))] });
-}
-
-// ../react/dist/mentions.js
-import { Fragment as _Fragment2, jsx as _jsx4, jsxs as _jsxs4 } from "react/jsx-runtime";
-import { useMemo, useRef as useRef2, useState as useState3 } from "react";
-import { createPortal } from "react-dom";
-function queryAt(text, caret) {
-  const match = text.slice(0, caret).match(/(^|\s)@([^\s@]{0,30})$/);
-  return match ? { query: match[2], start: caret - match[2].length - 1 } : null;
-}
-function escapeRegex(value) {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function mentionsIn(text, picked) {
-  return [...picked.values()].filter((member) => text.includes(`@${member.name}`));
-}
-function MessageText({ body, mentions }) {
-  if (!mentions?.length)
-    return _jsx4(_Fragment2, { children: body });
-  const pattern = new RegExp(`(@(?:${mentions.map((mention) => escapeRegex(mention.name)).join("|")}))`, "g");
-  const parts = body.split(pattern).map((part, index) => index % 2 === 1 ? _jsx4("span", { className: "cs-mention", children: part }, index) : part);
-  return _jsx4(_Fragment2, { children: parts });
-}
-function MentionTextarea({ value, onValueChange, members, selfEmail, onMention, onKeyDown, ...rest }) {
-  const ref = useRef2(null);
-  const [caret, setCaret] = useState3(0);
-  const [index, setIndex] = useState3(0);
-  const [dismissed, setDismissed] = useState3(null);
-  const active = queryAt(value, caret);
-  const query = active?.query.toLowerCase() ?? null;
-  const matches = useMemo(() => {
-    if (query == null)
-      return [];
-    return members.filter((member) => member.email !== selfEmail).filter((member) => member.name.toLowerCase().includes(query) || member.email.toLowerCase().startsWith(query)).slice(0, 6);
-  }, [members, query, selfEmail]);
-  const open = active != null && matches.length > 0 && dismissed !== active.start;
-  const selected = matches[Math.min(index, matches.length - 1)];
-  const insert = (member) => {
-    if (!active)
-      return;
-    const next = `${value.slice(0, active.start)}@${member.name} ${value.slice(caret)}`;
-    const position = active.start + member.name.length + 2;
-    onValueChange(next);
-    onMention(member);
-    setIndex(0);
-    requestAnimationFrame(() => {
-      ref.current?.focus();
-      ref.current?.setSelectionRange(position, position);
-      setCaret(position);
-    });
-  };
-  const rect = open ? ref.current?.getBoundingClientRect() : null;
-  const root = open ? ref.current?.closest("#cs-root") : null;
-  const below = rect ? window.innerHeight - rect.bottom > 220 : true;
-  return _jsxs4(_Fragment2, { children: [_jsx4("textarea", { ref, ...rest, value, "aria-autocomplete": "list", "aria-expanded": open, onChange: (event) => {
-    onValueChange(event.target.value);
-    setCaret(event.target.selectionStart ?? event.target.value.length);
-    setIndex(0);
-    setDismissed(null);
-  }, onSelect: (event) => setCaret(event.currentTarget.selectionStart ?? 0), onKeyDown: (event) => {
-    if (open && selected && !event.metaKey && !event.ctrlKey) {
-      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-        event.preventDefault();
-        const step = event.key === "ArrowDown" ? 1 : -1;
-        setIndex((current) => (current + step + matches.length) % matches.length);
-        return;
-      }
-      if (event.key === "Enter" || event.key === "Tab") {
-        event.preventDefault();
-        insert(selected);
-        return;
-      }
-      if (event.key === "Escape") {
-        event.preventDefault();
-        event.stopPropagation();
-        setDismissed(active.start);
-        return;
-      }
-    }
-    onKeyDown?.(event);
-  } }), open && rect && root ? createPortal(_jsx4("div", { className: "cs-people cs-hit", role: "listbox", "data-cs-ui": "mention-list", style: {
-    left: Math.min(rect.left, window.innerWidth - 272),
-    ...below ? { top: rect.bottom + 6 } : { bottom: window.innerHeight - rect.top + 6 }
-  }, children: matches.map((member) => _jsxs4("div", { role: "option", "aria-selected": member === selected, "data-cs-ui": "mention-option", className: member === selected ? "cs-person is-on" : "cs-person", onMouseDown: (event) => {
-    event.preventDefault();
-    insert(member);
-  }, onMouseEnter: () => setIndex(matches.indexOf(member)), children: [_jsx4("span", { className: "cs-avatar", style: { width: 24, height: 24, fontSize: 10, background: colorFor(member.name) }, children: initials(member.name) }), _jsxs4("span", { className: "cs-person-text", children: [_jsx4("strong", { children: member.name }), _jsx4("small", { children: member.email })] })] }, member.id)) }), root) : null] });
-}
+import {
+  captureHandoff,
+  runtimeVersion
+} from "./chunks/chunk-KKE43QYT.js";
 
-// ../../node_modules/modern-screenshot/dist/index.mjs
-var _P = "p".charCodeAt(0);
-var _H = "H".charCodeAt(0);
-var _Y = "Y".charCodeAt(0);
-var _S = "s".charCodeAt(0);
-var PREFIX = "[modern-screenshot]";
-var IN_BROWSER = typeof window !== "undefined";
-var SUPPORT_WEB_WORKER = IN_BROWSER && "Worker" in window;
-var SUPPORT_ATOB = IN_BROWSER && "atob" in window;
-var SUPPORT_BTOA = IN_BROWSER && "btoa" in window;
-var USER_AGENT = IN_BROWSER ? window.navigator?.userAgent : "";
-var IN_CHROME = USER_AGENT.includes("Chrome");
-var IN_SAFARI = USER_AGENT.includes("AppleWebKit") && !IN_CHROME;
-var IN_FIREFOX = USER_AGENT.includes("Firefox");
-var isContext = (value) => value && "__CONTEXT__" in value;
-var isCssFontFaceRule = (rule) => rule.constructor.name === "CSSFontFaceRule";
-var isCSSImportRule = (rule) => rule.constructor.name === "CSSImportRule";
-var isLayerBlockRule = (rule) => rule.constructor.name === "CSSLayerBlockRule";
-var isElementNode = (node) => node.nodeType === 1;
-var isSVGElementNode = (node) => typeof node.className === "object";
-var isSVGImageElementNode = (node) => node.tagName === "image";
-var isSVGUseElementNode = (node) => node.tagName === "use";
-var isHTMLElementNode = (node) => isElementNode(node) && typeof node.style !== "undefined" && !isSVGElementNode(node);
-var isCommentNode = (node) => node.nodeType === 8;
-var isTextNode = (node) => node.nodeType === 3;
-var isImageElement = (node) => node.tagName === "IMG";
-var isVideoElement = (node) => node.tagName === "VIDEO";
-var isCanvasElement = (node) => node.tagName === "CANVAS";
-var isTextareaElement = (node) => node.tagName === "TEXTAREA";
-var isInputElement = (node) => node.tagName === "INPUT";
-var isStyleElement = (node) => node.tagName === "STYLE";
-var isScriptElement = (node) => node.tagName === "SCRIPT";
-var isSelectElement = (node) => node.tagName === "SELECT";
-var isSlotElement = (node) => node.tagName === "SLOT";
-var isIFrameElement = (node) => node.tagName === "IFRAME";
-var consoleWarn = (...args) => console.warn(PREFIX, ...args);
-function supportWebp(ownerDocument) {
-  const canvas = ownerDocument?.createElement?.("canvas");
-  if (canvas) {
-    canvas.height = canvas.width = 1;
-  }
-  return Boolean(canvas) && "toDataURL" in canvas && Boolean(canvas.toDataURL("image/webp").includes("image/webp"));
-}
-var isDataUrl = (url) => url.startsWith("data:");
-function resolveUrl(url, baseUrl) {
-  if (url.match(/^[a-z]+:\/\//i))
-    return url;
-  if (IN_BROWSER && url.match(/^\/\//))
-    return window.location.protocol + url;
-  if (url.match(/^[a-z]+:/i))
-    return url;
-  if (!IN_BROWSER)
-    return url;
-  const doc = getDocument().implementation.createHTMLDocument();
-  const base = doc.createElement("base");
-  const a = doc.createElement("a");
-  doc.head.appendChild(base);
-  doc.body.appendChild(a);
-  if (baseUrl)
-    base.href = baseUrl;
-  a.href = url;
-  return a.href;
-}
-function getDocument(target) {
-  return (target && isElementNode(target) ? target?.ownerDocument : target) ?? window.document;
-}
-var XMLNS = "http://www.w3.org/2000/svg";
-function createSvg(width, height, ownerDocument) {
-  const svg = getDocument(ownerDocument).createElementNS(XMLNS, "svg");
-  svg.setAttributeNS(null, "width", width.toString());
-  svg.setAttributeNS(null, "height", height.toString());
-  svg.setAttributeNS(null, "viewBox", `0 0 ${width} ${height}`);
-  return svg;
-}
-function svgToDataUrl(svg, removeControlCharacter) {
-  let xhtml = new XMLSerializer().serializeToString(svg);
-  if (removeControlCharacter) {
-    xhtml = xhtml.replace(/[\u0000-\u0008\v\f\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/gu, "");
-  }
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xhtml)}`;
-}
-function readBlob(blob, type) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = () => reject(reader.error);
-    reader.onabort = () => reject(new Error(`Failed read blob to ${type}`));
-    if (type === "dataUrl") {
-      reader.readAsDataURL(blob);
-    } else if (type === "arrayBuffer") {
-      reader.readAsArrayBuffer(blob);
-    }
-  });
-}
-var blobToDataUrl = (blob) => readBlob(blob, "dataUrl");
-function createImage(url, ownerDocument) {
-  const img = getDocument(ownerDocument).createElement("img");
-  img.decoding = "sync";
-  img.loading = "eager";
-  img.src = url;
-  return img;
-}
-function loadMedia(media, options) {
-  return new Promise((resolve) => {
-    const { timeout, ownerDocument, onError: userOnError, onWarn } = options ?? {};
-    const node = typeof media === "string" ? createImage(media, getDocument(ownerDocument)) : media;
-    let timer = null;
-    let removeEventListeners = null;
-    function onResolve() {
-      resolve(node);
-      timer && clearTimeout(timer);
-      removeEventListeners?.();
-    }
-    if (timeout) {
-      timer = setTimeout(onResolve, timeout);
-    }
-    if (isVideoElement(node)) {
-      const currentSrc = node.currentSrc || node.src;
-      if (!currentSrc) {
-        if (node.poster) {
-          return loadMedia(node.poster, options).then(resolve);
-        }
-        return onResolve();
-      }
-      if (node.readyState >= 2) {
-        return onResolve();
-      }
-      const onLoadeddata = onResolve;
-      const onError = (error) => {
-        onWarn?.(
-          "Failed video load",
-          currentSrc,
-          error
-        );
-        userOnError?.(error);
-        onResolve();
-      };
-      removeEventListeners = () => {
-        node.removeEventListener("loadeddata", onLoadeddata);
-        node.removeEventListener("error", onError);
-      };
-      node.addEventListener("loadeddata", onLoadeddata, { once: true });
-      node.addEventListener("error", onError, { once: true });
-    } else {
-      const currentSrc = isSVGImageElementNode(node) ? node.href.baseVal : node.currentSrc || node.src;
-      if (!currentSrc) {
-        return onResolve();
-      }
-      const onLoad = async () => {
-        if (isImageElement(node) && "decode" in node) {
-          try {
-            await node.decode();
-          } catch (error) {
-            onWarn?.(
-              "Failed to decode image, trying to render anyway",
-              node.dataset.originalSrc || currentSrc,
-              error
-            );
-          }
-        }
-        onResolve();
-      };
-      const onError = (error) => {
-        onWarn?.(
-          "Failed image load",
-          node.dataset.originalSrc || currentSrc,
-          error
-        );
-        onResolve();
-      };
-      if (isImageElement(node) && node.complete) {
-        return onLoad();
-      }
-      removeEventListeners = () => {
-        node.removeEventListener("load", onLoad);
-        node.removeEventListener("error", onError);
-      };
-      node.addEventListener("load", onLoad, { once: true });
-      node.addEventListener("error", onError, { once: true });
-    }
-  });
-}
-async function waitUntilLoad(node, options) {
-  if (isHTMLElementNode(node)) {
-    if (isImageElement(node) || isVideoElement(node)) {
-      await loadMedia(node, options);
-    } else {
-      await Promise.all(
-        ["img", "video"].flatMap((selectors) => {
-          return Array.from(node.querySelectorAll(selectors)).map((el) => loadMedia(el, options));
-        })
-      );
-    }
-  }
-}
-var uuid = /* @__PURE__ */ (function uuid2() {
-  let counter = 0;
-  const random = () => `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4);
-  return () => {
-    counter += 1;
-    return `u${random()}${counter}`;
-  };
-})();
-function splitFontFamily(fontFamily) {
-  return fontFamily?.split(",").map((val) => val.trim().replace(/"|'/g, "").toLowerCase()).filter(Boolean);
-}
-var uid = 0;
-function createLogger(debug) {
-  const prefix = `${PREFIX}[#${uid}]`;
-  uid++;
-  return {
-    // eslint-disable-next-line no-console
-    time: (label) => debug && console.time(`${prefix} ${label}`),
-    // eslint-disable-next-line no-console
-    timeEnd: (label) => debug && console.timeEnd(`${prefix} ${label}`),
-    warn: (...args) => debug && consoleWarn(...args)
-  };
-}
-function getDefaultRequestInit(bypassingCache) {
-  return {
-    cache: bypassingCache ? "no-cache" : "force-cache"
-  };
-}
-async function orCreateContext(node, options) {
-  return isContext(node) ? node : createContext(node, { ...options, autoDestruct: true });
-}
-async function createContext(node, options) {
-  const { scale = 1, workerUrl, workerNumber = 1 } = options || {};
-  const debug = Boolean(options?.debug);
-  const features = options?.features ?? true;
-  const ownerDocument = node.ownerDocument ?? (IN_BROWSER ? window.document : void 0);
-  const ownerWindow = node.ownerDocument?.defaultView ?? (IN_BROWSER ? window : void 0);
-  const requests = /* @__PURE__ */ new Map();
-  const context = {
-    // Options
-    width: 0,
-    height: 0,
-    quality: 1,
-    type: "image/png",
-    scale,
-    backgroundColor: null,
-    style: null,
-    filter: null,
-    maximumCanvasSize: 0,
-    timeout: 3e4,
-    progress: null,
-    debug,
-    fetch: {
-      requestInit: getDefaultRequestInit(options?.fetch?.bypassingCache),
-      placeholderImage: "data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
-      bypassingCache: false,
-      ...options?.fetch
-    },
-    fetchFn: null,
-    font: {},
-    drawImageInterval: 100,
-    workerUrl: null,
-    workerNumber,
-    onCloneEachNode: null,
-    onCloneNode: null,
-    onEmbedNode: null,
-    onCreateForeignObjectSvg: null,
-    includeStyleProperties: null,
-    autoDestruct: false,
-    ...options,
-    // InternalContext
-    __CONTEXT__: true,
-    log: createLogger(debug),
-    node,
-    ownerDocument,
-    ownerWindow,
-    dpi: scale === 1 ? null : 96 * scale,
-    svgStyleElement: createStyleElement(ownerDocument),
-    svgDefsElement: ownerDocument?.createElementNS(XMLNS, "defs"),
-    svgStyles: /* @__PURE__ */ new Map(),
-    defaultComputedStyles: /* @__PURE__ */ new Map(),
-    workers: [
-      ...Array.from({
-        length: SUPPORT_WEB_WORKER && workerUrl && workerNumber ? workerNumber : 0
-      })
-    ].map(() => {
-      try {
-        const worker = new Worker(workerUrl);
-        worker.onmessage = async (event) => {
-          const { url, result } = event.data;
-          if (result) {
-            requests.get(url)?.resolve?.(result);
-          } else {
-            requests.get(url)?.reject?.(new Error(`Error receiving message from worker: ${url}`));
-          }
-        };
-        worker.onmessageerror = (event) => {
-          const { url } = event.data;
-          requests.get(url)?.reject?.(new Error(`Error receiving message from worker: ${url}`));
-        };
-        return worker;
-      } catch (error) {
-        context.log.warn("Failed to new Worker", error);
-        return null;
-      }
-    }).filter(Boolean),
-    fontFamilies: /* @__PURE__ */ new Map(),
-    fontCssTexts: /* @__PURE__ */ new Map(),
-    acceptOfImage: `${[
-      supportWebp(ownerDocument) && "image/webp",
-      "image/svg+xml",
-      "image/*",
-      "*/*"
-    ].filter(Boolean).join(",")};q=0.8`,
-    requests,
-    drawImageCount: 0,
-    tasks: [],
-    features,
-    isEnable: (key2) => {
-      if (key2 === "restoreScrollPosition") {
-        return typeof features === "boolean" ? false : features[key2] ?? false;
-      }
-      if (typeof features === "boolean") {
-        return features;
-      }
-      return features[key2] ?? true;
-    },
-    shadowRoots: []
-  };
-  context.log.time("wait until load");
-  await waitUntilLoad(node, { timeout: context.timeout, onWarn: context.log.warn });
-  context.log.timeEnd("wait until load");
-  const { width, height } = resolveBoundingBox(node, context);
-  context.width = width;
-  context.height = height;
-  return context;
-}
-function createStyleElement(ownerDocument) {
-  if (!ownerDocument)
-    return void 0;
-  const style = ownerDocument.createElement("style");
-  const cssText = style.ownerDocument.createTextNode(`
-.______background-clip--text {
-  background-clip: text;
-  -webkit-background-clip: text;
-}
-`);
-  style.appendChild(cssText);
-  return style;
-}
-function resolveBoundingBox(node, context) {
-  let { width, height } = context;
-  if (isElementNode(node) && (!width || !height)) {
-    const box = node.getBoundingClientRect();
-    width = width || box.width || Number(node.getAttribute("width")) || 0;
-    height = height || box.height || Number(node.getAttribute("height")) || 0;
-  }
-  return { width, height };
-}
-async function imageToCanvas(image, context) {
-  const {
-    log,
-    timeout,
-    drawImageCount,
-    drawImageInterval
-  } = context;
-  log.time("image to canvas");
-  const loaded = await loadMedia(image, { timeout, onWarn: context.log.warn });
-  const { canvas, context2d } = createCanvas(image.ownerDocument, context);
-  const drawImage = () => {
-    try {
-      context2d?.drawImage(loaded, 0, 0, canvas.width, canvas.height);
-    } catch (error) {
-      context.log.warn("Failed to drawImage", error);
-    }
-  };
-  drawImage();
-  if (context.isEnable("fixSvgXmlDecode")) {
-    for (let i = 0; i < drawImageCount; i++) {
-      await new Promise((resolve) => {
-        setTimeout(() => {
-          context2d?.clearRect(0, 0, canvas.width, canvas.height);
-          drawImage();
-          resolve();
-        }, i + drawImageInterval);
-      });
-    }
-  }
-  context.drawImageCount = 0;
-  log.timeEnd("image to canvas");
-  return canvas;
-}
-function createCanvas(ownerDocument, context) {
-  const { width, height, scale, backgroundColor, maximumCanvasSize: max } = context;
-  const canvas = ownerDocument.createElement("canvas");
-  canvas.width = Math.floor(width * scale);
-  canvas.height = Math.floor(height * scale);
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  if (max) {
-    if (canvas.width > max || canvas.height > max) {
-      if (canvas.width > max && canvas.height > max) {
-        if (canvas.width > canvas.height) {
-          canvas.height *= max / canvas.width;
-          canvas.width = max;
-        } else {
-          canvas.width *= max / canvas.height;
-          canvas.height = max;
-        }
-      } else if (canvas.width > max) {
-        canvas.height *= max / canvas.width;
-        canvas.width = max;
-      } else {
-        canvas.width *= max / canvas.height;
-        canvas.height = max;
-      }
-    }
-  }
-  const context2d = canvas.getContext("2d");
-  if (context2d && backgroundColor) {
-    context2d.fillStyle = backgroundColor;
-    context2d.fillRect(0, 0, canvas.width, canvas.height);
-  }
-  return { canvas, context2d };
-}
-function cloneCanvas(canvas, context) {
-  if (canvas.ownerDocument) {
-    try {
-      const dataURL = canvas.toDataURL();
-      if (dataURL !== "data:,") {
-        return createImage(dataURL, canvas.ownerDocument);
-      }
-    } catch (error) {
-      context.log.warn("Failed to clone canvas", error);
-    }
-  }
-  const cloned = canvas.cloneNode(false);
-  const ctx = canvas.getContext("2d");
-  const clonedCtx = cloned.getContext("2d");
-  try {
-    if (ctx && clonedCtx) {
-      clonedCtx.putImageData(
-        ctx.getImageData(0, 0, canvas.width, canvas.height),
-        0,
-        0
-      );
-    }
-    return cloned;
-  } catch (error) {
-    context.log.warn("Failed to clone canvas", error);
-  }
-  return cloned;
-}
-function cloneIframe(iframe, context) {
+// ../react/dist/loader.js
+import { useEffect, useRef } from "react";
+captureHandoff();
+var bundled = () => import("./chunks/runtime-2ZDPCFHS.js");
+async function serviceUrl(sessionPath) {
   try {
-    if (iframe?.contentDocument?.documentElement) {
-      return cloneNode(iframe.contentDocument.documentElement, context);
-    }
-  } catch (error) {
-    context.log.warn("Failed to clone iframe", error);
-  }
-  return iframe.cloneNode(false);
-}
-function cloneImage(image) {
-  const cloned = image.cloneNode(false);
-  if (image.currentSrc && image.currentSrc !== image.src) {
-    cloned.src = image.currentSrc;
-    cloned.srcset = "";
-  }
-  if (cloned.loading === "lazy") {
-    cloned.loading = "eager";
-  }
-  return cloned;
-}
-async function cloneVideo(video, context) {
-  if (video.ownerDocument && !video.currentSrc && video.poster) {
-    return createImage(video.poster, video.ownerDocument);
-  }
-  const cloned = video.cloneNode(false);
-  cloned.crossOrigin = "anonymous";
-  if (video.currentSrc && video.currentSrc !== video.src) {
-    cloned.src = video.currentSrc;
-  }
-  const ownerDocument = cloned.ownerDocument;
-  if (ownerDocument) {
-    let canPlay = true;
-    await loadMedia(cloned, { onError: () => canPlay = false, onWarn: context.log.warn });
-    if (!canPlay) {
-      if (video.poster) {
-        return createImage(video.poster, video.ownerDocument);
-      }
-      return cloned;
-    }
-    cloned.currentTime = video.currentTime;
-    await new Promise((resolve) => {
-      cloned.addEventListener("seeked", resolve, { once: true });
-    });
-    const canvas = ownerDocument.createElement("canvas");
-    canvas.width = video.offsetWidth;
-    canvas.height = video.offsetHeight;
-    try {
-      const ctx = canvas.getContext("2d");
-      if (ctx)
-        ctx.drawImage(cloned, 0, 0, canvas.width, canvas.height);
-    } catch (error) {
-      context.log.warn("Failed to clone video", error);
-      if (video.poster) {
-        return createImage(video.poster, video.ownerDocument);
-      }
-      return cloned;
-    }
-    return cloneCanvas(canvas, context);
-  }
-  return cloned;
-}
-function cloneElement(node, context) {
-  if (isCanvasElement(node)) {
-    return cloneCanvas(node, context);
-  }
-  if (isIFrameElement(node)) {
-    return cloneIframe(node, context);
-  }
-  if (isImageElement(node)) {
-    return cloneImage(node);
-  }
-  if (isVideoElement(node)) {
-    return cloneVideo(node, context);
-  }
-  return node.cloneNode(false);
-}
-function getSandBox(context) {
-  let sandbox = context.sandbox;
-  if (!sandbox) {
-    const { ownerDocument } = context;
-    try {
-      if (ownerDocument) {
-        sandbox = ownerDocument.createElement("iframe");
-        sandbox.id = `__SANDBOX__${uuid()}`;
-        sandbox.width = "0";
-        sandbox.height = "0";
-        sandbox.style.visibility = "hidden";
-        sandbox.style.position = "fixed";
-        ownerDocument.body.appendChild(sandbox);
-        sandbox.srcdoc = '<!DOCTYPE html><meta charset="UTF-8"><title></title><body>';
-        context.sandbox = sandbox;
-      }
-    } catch (error) {
-      context.log.warn("Failed to getSandBox", error);
-    }
-  }
-  return sandbox;
-}
-var ignoredStyles = [
-  "width",
-  "height",
-  "-webkit-text-fill-color"
-];
-var includedAttributes = [
-  "stroke",
-  "fill"
-];
-function getDefaultStyle(node, pseudoElement, context) {
-  const { defaultComputedStyles } = context;
-  const nodeName = node.nodeName.toLowerCase();
-  const isSvgNode = isSVGElementNode(node) && nodeName !== "svg";
-  const attributes = isSvgNode ? includedAttributes.map((name) => [name, node.getAttribute(name)]).filter(([, value]) => value !== null) : [];
-  const key2 = [
-    isSvgNode && "svg",
-    nodeName,
-    attributes.map((name, value) => `${name}=${value}`).join(","),
-    pseudoElement
-  ].filter(Boolean).join(":");
-  if (defaultComputedStyles.has(key2))
-    return defaultComputedStyles.get(key2);
-  const sandbox = getSandBox(context);
-  const sandboxWindow = sandbox?.contentWindow;
-  if (!sandboxWindow)
-    return /* @__PURE__ */ new Map();
-  const sandboxDocument = sandboxWindow?.document;
-  let root;
-  let el;
-  if (isSvgNode) {
-    root = sandboxDocument.createElementNS(XMLNS, "svg");
-    el = root.ownerDocument.createElementNS(root.namespaceURI, nodeName);
-    attributes.forEach(([name, value]) => {
-      el.setAttributeNS(null, name, value);
-    });
-    root.appendChild(el);
-  } else {
-    root = el = sandboxDocument.createElement(nodeName);
-  }
-  el.textContent = " ";
-  sandboxDocument.body.appendChild(root);
-  const computedStyle = sandboxWindow.getComputedStyle(el, pseudoElement);
-  const styles = /* @__PURE__ */ new Map();
-  for (let len = computedStyle.length, i = 0; i < len; i++) {
-    const name = computedStyle.item(i);
-    if (ignoredStyles.includes(name))
-      continue;
-    styles.set(name, computedStyle.getPropertyValue(name));
-  }
-  sandboxDocument.body.removeChild(root);
-  defaultComputedStyles.set(key2, styles);
-  return styles;
-}
-function getDiffStyle(style, defaultStyle, includeStyleProperties) {
-  const diffStyle = /* @__PURE__ */ new Map();
-  const prefixs = [];
-  const prefixTree = /* @__PURE__ */ new Map();
-  if (includeStyleProperties) {
-    for (const name of includeStyleProperties) {
-      applyTo(name);
-    }
-  } else {
-    for (let len = style.length, i = 0; i < len; i++) {
-      const name = style.item(i);
-      applyTo(name);
-    }
-  }
-  for (let len = prefixs.length, i = 0; i < len; i++) {
-    prefixTree.get(prefixs[i])?.forEach((value, name) => diffStyle.set(name, value));
-  }
-  function applyTo(name) {
-    const value = style.getPropertyValue(name);
-    const priority = style.getPropertyPriority(name);
-    const subIndex = name.lastIndexOf("-");
-    const prefix = subIndex > -1 ? name.substring(0, subIndex) : void 0;
-    if (prefix) {
-      let map = prefixTree.get(prefix);
-      if (!map) {
-        map = /* @__PURE__ */ new Map();
-        prefixTree.set(prefix, map);
-      }
-      map.set(name, [value, priority]);
-    }
-    if (defaultStyle.get(name) === value && !priority)
-      return;
-    if (prefix) {
-      prefixs.push(prefix);
-    } else {
-      diffStyle.set(name, [value, priority]);
-    }
-  }
-  return diffStyle;
-}
-function copyCssStyles(node, cloned, isRoot, context) {
-  const { ownerWindow, includeStyleProperties, currentParentNodeStyle } = context;
-  const clonedStyle = cloned.style;
-  const computedStyle = ownerWindow.getComputedStyle(node);
-  const defaultStyle = getDefaultStyle(node, null, context);
-  currentParentNodeStyle?.forEach((_, key2) => {
-    defaultStyle.delete(key2);
-  });
-  const style = getDiffStyle(computedStyle, defaultStyle, includeStyleProperties);
-  style.delete("transition-property");
-  style.delete("all");
-  style.delete("d");
-  style.delete("content");
-  if (isRoot) {
-    style.delete("position");
-    style.delete("margin-top");
-    style.delete("margin-right");
-    style.delete("margin-bottom");
-    style.delete("margin-left");
-    style.delete("margin-block-start");
-    style.delete("margin-block-end");
-    style.delete("margin-inline-start");
-    style.delete("margin-inline-end");
-    style.set("box-sizing", ["border-box", ""]);
-  }
-  if (style.get("background-clip")?.[0] === "text") {
-    cloned.classList.add("______background-clip--text");
-  }
-  if (IN_CHROME) {
-    if (!style.has("font-kerning"))
-      style.set("font-kerning", ["normal", ""]);
-    if ((style.get("overflow-x")?.[0] === "hidden" || style.get("overflow-y")?.[0] === "hidden") && style.get("text-overflow")?.[0] === "ellipsis" && node.scrollWidth === node.clientWidth) {
-      style.set("text-overflow", ["clip", ""]);
-    }
-  }
-  for (let len = clonedStyle.length, i = 0; i < len; i++) {
-    clonedStyle.removeProperty(clonedStyle.item(i));
-  }
-  style.forEach(([value, priority], name) => {
-    clonedStyle.setProperty(name, value, priority);
-  });
-  return style;
-}
-function copyInputValue(node, cloned) {
-  if (isTextareaElement(node) || isInputElement(node) || isSelectElement(node)) {
-    cloned.setAttribute("value", node.value);
-  }
-}
-var pseudoClasses = [
-  "::before",
-  "::after"
-  // '::placeholder', TODO
-];
-var scrollbarPseudoClasses = [
-  "::-webkit-scrollbar",
-  "::-webkit-scrollbar-button",
-  // '::-webkit-scrollbar:horizontal', TODO
-  "::-webkit-scrollbar-thumb",
-  "::-webkit-scrollbar-track",
-  "::-webkit-scrollbar-track-piece",
-  // '::-webkit-scrollbar:vertical', TODO
-  "::-webkit-scrollbar-corner",
-  "::-webkit-resizer"
-];
-function copyPseudoClass(node, cloned, copyScrollbar, context, addWordToFontFamilies) {
-  const { ownerWindow, svgStyleElement, svgStyles, currentNodeStyle } = context;
-  if (!svgStyleElement || !ownerWindow)
-    return;
-  function copyBy(pseudoClass) {
-    const computedStyle = ownerWindow.getComputedStyle(node, pseudoClass);
-    let content = computedStyle.getPropertyValue("content");
-    if (!content || content === "none")
-      return;
-    addWordToFontFamilies?.(content);
-    content = content.replace(/(')|(")|(counter\(.+\))/g, "");
-    const klasses = [uuid()];
-    const defaultStyle = getDefaultStyle(node, pseudoClass, context);
-    currentNodeStyle?.forEach((_, key2) => {
-      defaultStyle.delete(key2);
+    const response = await fetch(sessionPath, {
+      headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
+      cache: "no-store"
     });
-    const style = getDiffStyle(computedStyle, defaultStyle, context.includeStyleProperties);
-    style.delete("content");
-    style.delete("-webkit-locale");
-    if (style.get("background-clip")?.[0] === "text") {
-      cloned.classList.add("______background-clip--text");
-    }
-    const cloneStyle = [
-      `content: '${content}';`
-    ];
-    style.forEach(([value, priority], name) => {
-      cloneStyle.push(`${name}: ${value}${priority ? " !important" : ""};`);
-    });
-    if (cloneStyle.length === 1)
-      return;
-    try {
-      cloned.className = [cloned.className, ...klasses].join(" ");
-    } catch (err) {
-      context.log.warn("Failed to copyPseudoClass", err);
-      return;
-    }
-    const cssText = cloneStyle.join("\n  ");
-    let allClasses = svgStyles.get(cssText);
-    if (!allClasses) {
-      allClasses = [];
-      svgStyles.set(cssText, allClasses);
-    }
-    allClasses.push(`.${klasses[0]}${pseudoClass}`);
-  }
-  pseudoClasses.forEach(copyBy);
-  if (copyScrollbar)
-    scrollbarPseudoClasses.forEach(copyBy);
-}
-var excludeParentNodes = /* @__PURE__ */ new Set([
-  "symbol"
-  // test/fixtures/svg.symbol.html
-]);
-async function appendChildNode(node, cloned, child, context, addWordToFontFamilies) {
-  if (isElementNode(child) && (isStyleElement(child) || isScriptElement(child)))
-    return;
-  if (context.filter && !context.filter(child))
-    return;
-  if (excludeParentNodes.has(cloned.nodeName) || excludeParentNodes.has(child.nodeName)) {
-    context.currentParentNodeStyle = void 0;
-  } else {
-    context.currentParentNodeStyle = context.currentNodeStyle;
-  }
-  const childCloned = await cloneNode(child, context, false, addWordToFontFamilies);
-  if (context.isEnable("restoreScrollPosition")) {
-    restoreScrollPosition(node, childCloned);
-  }
-  cloned.appendChild(childCloned);
-}
-async function cloneChildNodes(node, cloned, context, addWordToFontFamilies) {
-  let firstChild = node.firstChild;
-  if (isElementNode(node)) {
-    if (node.shadowRoot) {
-      firstChild = node.shadowRoot?.firstChild;
-      context.shadowRoots.push(node.shadowRoot);
-    }
-  }
-  for (let child = firstChild; child; child = child.nextSibling) {
-    if (isCommentNode(child))
-      continue;
-    if (isElementNode(child) && isSlotElement(child) && typeof child.assignedNodes === "function") {
-      const nodes = child.assignedNodes();
-      for (let i = 0; i < nodes.length; i++) {
-        await appendChildNode(node, cloned, nodes[i], context, addWordToFontFamilies);
-      }
-    } else {
-      await appendChildNode(node, cloned, child, context, addWordToFontFamilies);
-    }
-  }
-}
-function restoreScrollPosition(node, chlidCloned) {
-  if (!isHTMLElementNode(node) || !isHTMLElementNode(chlidCloned))
-    return;
-  const { scrollTop, scrollLeft } = node;
-  if (!scrollTop && !scrollLeft) {
-    return;
-  }
-  const { transform } = chlidCloned.style;
-  const matrix = new DOMMatrix(transform);
-  const { a, b, c, d } = matrix;
-  matrix.a = 1;
-  matrix.b = 0;
-  matrix.c = 0;
-  matrix.d = 1;
-  matrix.translateSelf(-scrollLeft, -scrollTop);
-  matrix.a = a;
-  matrix.b = b;
-  matrix.c = c;
-  matrix.d = d;
-  chlidCloned.style.transform = matrix.toString();
-}
-function applyCssStyleWithOptions(cloned, context) {
-  const { backgroundColor, width, height, style: styles } = context;
-  const clonedStyle = cloned.style;
-  if (backgroundColor)
-    clonedStyle.setProperty("background-color", backgroundColor, "important");
-  if (width)
-    clonedStyle.setProperty("width", `${width}px`, "important");
-  if (height)
-    clonedStyle.setProperty("height", `${height}px`, "important");
-  if (styles) {
-    for (const name in styles) clonedStyle[name] = styles[name];
-  }
-}
-var NORMAL_ATTRIBUTE_RE = /^[\w-:]+$/;
-async function cloneNode(node, context, isRoot = false, addWordToFontFamilies) {
-  const { ownerDocument, ownerWindow, fontFamilies, onCloneEachNode } = context;
-  if (ownerDocument && isTextNode(node)) {
-    if (addWordToFontFamilies && /\S/.test(node.data)) {
-      addWordToFontFamilies(node.data);
-    }
-    return ownerDocument.createTextNode(node.data);
-  }
-  if (ownerDocument && ownerWindow && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
-    const cloned2 = await cloneElement(node, context);
-    if (context.isEnable("removeAbnormalAttributes")) {
-      const names2 = cloned2.getAttributeNames();
-      for (let len = names2.length, i = 0; i < len; i++) {
-        const name = names2[i];
-        if (!NORMAL_ATTRIBUTE_RE.test(name)) {
-          cloned2.removeAttribute(name);
-        }
-      }
-    }
-    const style = context.currentNodeStyle = copyCssStyles(node, cloned2, isRoot, context);
-    if (isRoot)
-      applyCssStyleWithOptions(cloned2, context);
-    let copyScrollbar = false;
-    if (context.isEnable("copyScrollbar")) {
-      const overflow = [
-        style.get("overflow-x")?.[0],
-        style.get("overflow-y")?.[0]
-      ];
-      copyScrollbar = overflow.includes("scroll") || (overflow.includes("auto") || overflow.includes("overlay")) && (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth);
-    }
-    const textTransform = style.get("text-transform")?.[0];
-    const families = splitFontFamily(style.get("font-family")?.[0]);
-    const addWordToFontFamilies2 = families ? (word) => {
-      if (textTransform === "uppercase") {
-        word = word.toUpperCase();
-      } else if (textTransform === "lowercase") {
-        word = word.toLowerCase();
-      } else if (textTransform === "capitalize") {
-        word = word[0].toUpperCase() + word.substring(1);
-      }
-      families.forEach((family) => {
-        let fontFamily = fontFamilies.get(family);
-        if (!fontFamily) {
-          fontFamilies.set(family, fontFamily = /* @__PURE__ */ new Set());
-        }
-        word.split("").forEach((text) => fontFamily.add(text));
-      });
-    } : void 0;
-    copyPseudoClass(
-      node,
-      cloned2,
-      copyScrollbar,
-      context,
-      addWordToFontFamilies2
-    );
-    copyInputValue(node, cloned2);
-    if (!isVideoElement(node)) {
-      await cloneChildNodes(
-        node,
-        cloned2,
-        context,
-        addWordToFontFamilies2
-      );
-    }
-    await onCloneEachNode?.(cloned2);
-    return cloned2;
-  }
-  const cloned = node.cloneNode(false);
-  await cloneChildNodes(node, cloned, context);
-  await onCloneEachNode?.(cloned);
-  return cloned;
-}
-function destroyContext(context) {
-  context.ownerDocument = void 0;
-  context.ownerWindow = void 0;
-  context.svgStyleElement = void 0;
-  context.svgDefsElement = void 0;
-  context.svgStyles.clear();
-  context.defaultComputedStyles.clear();
-  if (context.sandbox) {
-    try {
-      context.sandbox.remove();
-    } catch (err) {
-      context.log.warn("Failed to destroyContext", err);
-    }
-    context.sandbox = void 0;
-  }
-  context.workers = [];
-  context.fontFamilies.clear();
-  context.fontCssTexts.clear();
-  context.requests.clear();
-  context.tasks = [];
-  context.shadowRoots = [];
-}
-function baseFetch(options) {
-  const { url, timeout, responseType, ...requestInit } = options;
-  const controller = new AbortController();
-  const timer = timeout ? setTimeout(() => controller.abort(), timeout) : void 0;
-  return fetch(url, { signal: controller.signal, ...requestInit }).then((response) => {
-    if (!response.ok) {
-      throw new Error("Failed fetch, not 2xx response", { cause: response });
-    }
-    switch (responseType) {
-      case "arrayBuffer":
-        return response.arrayBuffer();
-      case "dataUrl":
-        return response.blob().then(blobToDataUrl);
-      case "text":
-      default:
-        return response.text();
-    }
-  }).finally(() => clearTimeout(timer));
-}
-function contextFetch(context, options) {
-  const { url: rawUrl, requestType = "text", responseType = "text", imageDom } = options;
-  let url = rawUrl;
-  const {
-    timeout,
-    acceptOfImage,
-    requests,
-    fetchFn,
-    fetch: {
-      requestInit,
-      bypassingCache,
-      placeholderImage
-    },
-    font,
-    workers,
-    fontFamilies
-  } = context;
-  if (requestType === "image" && (IN_SAFARI || IN_FIREFOX)) {
-    context.drawImageCount++;
-  }
-  let request2 = requests.get(rawUrl);
-  if (!request2) {
-    if (bypassingCache) {
-      if (bypassingCache instanceof RegExp && bypassingCache.test(url)) {
-        url += (/\?/.test(url) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
-      }
-    }
-    const canFontMinify = requestType.startsWith("font") && font && font.minify;
-    const fontTexts = /* @__PURE__ */ new Set();
-    if (canFontMinify) {
-      const families = requestType.split(";")[1].split(",");
-      families.forEach((family) => {
-        if (!fontFamilies.has(family))
-          return;
-        fontFamilies.get(family).forEach((text) => fontTexts.add(text));
-      });
-    }
-    const needFontMinify = canFontMinify && fontTexts.size;
-    const baseFetchOptions = {
-      url,
-      timeout,
-      responseType: needFontMinify ? "arrayBuffer" : responseType,
-      headers: requestType === "image" ? { accept: acceptOfImage } : void 0,
-      ...requestInit
-    };
-    request2 = {
-      type: requestType,
-      resolve: void 0,
-      reject: void 0,
-      response: null
-    };
-    request2.response = (async () => {
-      if (fetchFn && requestType === "image") {
-        const result = await fetchFn(rawUrl);
-        if (result)
-          return result;
-      }
-      if (!IN_SAFARI && rawUrl.startsWith("http") && workers.length) {
-        return new Promise((resolve, reject) => {
-          const worker = workers[requests.size & workers.length - 1];
-          worker.postMessage({ rawUrl, ...baseFetchOptions });
-          request2.resolve = resolve;
-          request2.reject = reject;
-        });
-      }
-      return baseFetch(baseFetchOptions);
-    })().catch((error) => {
-      requests.delete(rawUrl);
-      if (requestType === "image" && placeholderImage) {
-        context.log.warn("Failed to fetch image base64, trying to use placeholder image", url);
-        return typeof placeholderImage === "string" ? placeholderImage : placeholderImage(imageDom);
-      }
-      throw error;
-    });
-    requests.set(rawUrl, request2);
-  }
-  return request2.response;
-}
-async function replaceCssUrlToDataUrl(cssText, baseUrl, context, isImage) {
-  if (!hasCssUrl(cssText))
-    return cssText;
-  for (const [rawUrl, url] of parseCssUrls(cssText, baseUrl)) {
-    try {
-      const dataUrl = await contextFetch(
-        context,
-        {
-          url,
-          requestType: isImage ? "image" : "text",
-          responseType: "dataUrl"
-        }
-      );
-      cssText = cssText.replace(toRE(rawUrl), `$1${dataUrl}$3`);
-    } catch (error) {
-      context.log.warn("Failed to fetch css data url", rawUrl, error);
-    }
-  }
-  return cssText;
-}
-function hasCssUrl(cssText) {
-  return /url\((['"]?)([^'"]+?)\1\)/.test(cssText);
-}
-var URL_RE = /url\((['"]?)([^'"]+?)\1\)/g;
-function parseCssUrls(cssText, baseUrl) {
-  const result = [];
-  cssText.replace(URL_RE, (raw, quotation, url) => {
-    result.push([url, resolveUrl(url, baseUrl)]);
-    return raw;
-  });
-  return result.filter(([url]) => !isDataUrl(url));
-}
-function toRE(url) {
-  const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
-  return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
-}
-var properties = [
-  "background-image",
-  "border-image-source",
-  "-webkit-border-image",
-  "-webkit-mask-image",
-  "list-style-image"
-];
-function embedCssStyleImage(style, context) {
-  return properties.map((property) => {
-    const value = style.getPropertyValue(property);
-    if (!value || value === "none") {
-      return null;
-    }
-    if (IN_SAFARI || IN_FIREFOX) {
-      context.drawImageCount++;
-    }
-    return replaceCssUrlToDataUrl(value, null, context, true).then((newValue) => {
-      if (!newValue || value === newValue)
-        return;
-      style.setProperty(
-        property,
-        newValue,
-        style.getPropertyPriority(property)
-      );
-    });
-  }).filter(Boolean);
-}
-function embedImageElement(cloned, context) {
-  if (isImageElement(cloned)) {
-    const originalSrc = cloned.currentSrc || cloned.src;
-    if (!isDataUrl(originalSrc)) {
-      return [
-        contextFetch(context, {
-          url: originalSrc,
-          imageDom: cloned,
-          requestType: "image",
-          responseType: "dataUrl"
-        }).then((url) => {
-          if (!url)
-            return;
-          cloned.srcset = "";
-          cloned.dataset.originalSrc = originalSrc;
-          cloned.src = url || "";
-        })
-      ];
-    }
-    if (IN_SAFARI || IN_FIREFOX) {
-      context.drawImageCount++;
-    }
-  } else if (isSVGElementNode(cloned) && !isDataUrl(cloned.href.baseVal)) {
-    const originalSrc = cloned.href.baseVal;
-    return [
-      contextFetch(context, {
-        url: originalSrc,
-        imageDom: cloned,
-        requestType: "image",
-        responseType: "dataUrl"
-      }).then((url) => {
-        if (!url)
-          return;
-        cloned.dataset.originalSrc = originalSrc;
-        cloned.href.baseVal = url || "";
-      })
-    ];
-  }
-  return [];
-}
-function embedSvgUse(cloned, context) {
-  const { ownerDocument, svgDefsElement } = context;
-  const href = cloned.getAttribute("href") ?? cloned.getAttribute("xlink:href");
-  if (!href)
-    return [];
-  const [svgUrl, id] = href.split("#");
-  if (id) {
-    const query = `#${id}`;
-    const definition = context.shadowRoots.reduce(
-      (res, root) => {
-        return res ?? root.querySelector(`svg ${query}`);
-      },
-      ownerDocument?.querySelector(`svg ${query}`)
-    );
-    if (svgUrl) {
-      cloned.setAttribute("href", query);
-    }
-    if (svgDefsElement?.querySelector(query))
-      return [];
-    if (definition) {
-      svgDefsElement?.appendChild(definition.cloneNode(true));
-      return [];
-    } else if (svgUrl) {
-      return [
-        contextFetch(context, {
-          url: svgUrl,
-          responseType: "text"
-        }).then((svgData) => {
-          svgDefsElement?.insertAdjacentHTML("beforeend", svgData);
-        })
-      ];
-    }
-  }
-  return [];
-}
-function embedNode(cloned, context) {
-  const { tasks } = context;
-  if (isElementNode(cloned)) {
-    if (isImageElement(cloned) || isSVGImageElementNode(cloned)) {
-      tasks.push(...embedImageElement(cloned, context));
-    }
-    if (isSVGUseElementNode(cloned)) {
-      tasks.push(...embedSvgUse(cloned, context));
-    }
-  }
-  if (isHTMLElementNode(cloned)) {
-    tasks.push(...embedCssStyleImage(cloned.style, context));
-  }
-  cloned.childNodes.forEach((child) => {
-    embedNode(child, context);
-  });
-}
-async function embedWebFont(clone, context) {
-  const {
-    ownerDocument,
-    svgStyleElement,
-    fontFamilies,
-    fontCssTexts,
-    tasks,
-    font
-  } = context;
-  if (!ownerDocument || !svgStyleElement || !fontFamilies.size) {
-    return;
-  }
-  if (font && font.cssText) {
-    const cssText = filterPreferredFormat(font.cssText, context);
-    svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText}
-`));
-  } else {
-    const styleSheets = Array.from(ownerDocument.styleSheets).filter((styleSheet) => {
-      try {
-        return "cssRules" in styleSheet && Boolean(styleSheet.cssRules.length);
-      } catch (error) {
-        context.log.warn(`Error while reading CSS rules from ${styleSheet.href}`, error);
-        return false;
-      }
-    });
-    const tempDoc = ownerDocument.implementation.createHTMLDocument("");
-    const tempStyleEl = tempDoc.createElement("style");
-    tempDoc.head.appendChild(tempStyleEl);
-    const tempStyleSheet = tempStyleEl.sheet;
-    await Promise.all(
-      styleSheets.flatMap((styleSheet) => {
-        return Array.from(styleSheet.cssRules).map(async (cssRule) => {
-          if (isCSSImportRule(cssRule)) {
-            const baseUrl = cssRule.href;
-            let cssText = "";
-            try {
-              cssText = await contextFetch(context, {
-                url: baseUrl,
-                requestType: "text",
-                responseType: "text"
-              });
-            } catch (error) {
-              context.log.warn(`Error fetch remote css import from ${baseUrl}`, error);
-            }
-            const replacedCssText = cssText.replace(
-              URL_RE,
-              (raw, quotation, url) => raw.replace(url, resolveUrl(url, baseUrl))
-            );
-            for (const rule of parseCss(replacedCssText)) {
-              try {
-                tempStyleSheet.insertRule(rule, tempStyleSheet.cssRules.length);
-              } catch (error) {
-                context.log.warn("Error inserting rule from remote css import", { rule, error });
-              }
-            }
-          }
-        });
-      })
-    );
-    if (tempStyleSheet.cssRules.length)
-      styleSheets.push(tempStyleSheet);
-    const cssRules = [];
-    styleSheets.forEach((sheet) => {
-      unwrapCssLayers(sheet.cssRules, cssRules);
-    });
-    cssRules.filter((cssRule) => isCssFontFaceRule(cssRule) && hasCssUrl(cssRule.style.getPropertyValue("src")) && splitFontFamily(cssRule.style.getPropertyValue("font-family"))?.some((val) => fontFamilies.has(val))).forEach((value) => {
-      const rule = value;
-      const cssText = fontCssTexts.get(rule.cssText);
-      if (cssText) {
-        svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText}
-`));
-      } else {
-        tasks.push(
-          replaceCssUrlToDataUrl(
-            rule.cssText,
-            rule.parentStyleSheet ? rule.parentStyleSheet.href : null,
-            context
-          ).then((cssText2) => {
-            cssText2 = filterPreferredFormat(cssText2, context);
-            fontCssTexts.set(rule.cssText, cssText2);
-            svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText2}
-`));
-          })
-        );
-      }
-    });
-  }
-}
-var COMMENTS_RE = /(\/\*[\s\S]*?\*\/)/g;
-var KEYFRAMES_RE = /((@.*?keyframes [\s\S]*?){([\s\S]*?}\s*?)})/gi;
-function parseCss(source) {
-  if (source == null)
-    return [];
-  const result = [];
-  let cssText = source.replace(COMMENTS_RE, "");
-  while (true) {
-    const matches = KEYFRAMES_RE.exec(cssText);
-    if (!matches)
-      break;
-    result.push(matches[0]);
-  }
-  cssText = cssText.replace(KEYFRAMES_RE, "");
-  const IMPORT_RE = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
-  const UNIFIED_RE = new RegExp(
-    // eslint-disable-next-line
-    "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})",
-    "gi"
-  );
-  while (true) {
-    let matches = IMPORT_RE.exec(cssText);
-    if (!matches) {
-      matches = UNIFIED_RE.exec(cssText);
-      if (!matches) {
-        break;
-      } else {
-        IMPORT_RE.lastIndex = UNIFIED_RE.lastIndex;
-      }
-    } else {
-      UNIFIED_RE.lastIndex = IMPORT_RE.lastIndex;
-    }
-    result.push(matches[0]);
-  }
-  return result;
-}
-var URL_WITH_FORMAT_RE = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
-var FONT_SRC_RE = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
-function filterPreferredFormat(str, context) {
-  const { font } = context;
-  const preferredFormat = font ? font?.preferredFormat : void 0;
-  return preferredFormat ? str.replace(FONT_SRC_RE, (match) => {
-    while (true) {
-      const [src, , format] = URL_WITH_FORMAT_RE.exec(match) || [];
-      if (!format)
-        return "";
-      if (format === preferredFormat)
-        return `src: ${src};`;
-    }
-  }) : str;
-}
-function unwrapCssLayers(rules, out = []) {
-  for (const rule of Array.from(rules)) {
-    if (isLayerBlockRule(rule)) {
-      out.push(...unwrapCssLayers(rule.cssRules));
-    } else if ("cssRules" in rule) {
-      unwrapCssLayers(rule.cssRules, out);
-    } else {
-      out.push(rule);
-    }
-  }
-  return out;
-}
-var SVG_EXTERNAL_RESOURCE_REGEX = /\bx?link:?href\s*=\s*["'](?!data:)[^"']+["']/i;
-function svgHasExternalResources(svg) {
-  return SVG_EXTERNAL_RESOURCE_REGEX.test(svg.innerHTML);
-}
-async function domToForeignObjectSvg(node, options) {
-  const context = await orCreateContext(node, options);
-  if (isElementNode(context.node) && isSVGElementNode(context.node) && !svgHasExternalResources(context.node))
-    return context.node;
-  const {
-    ownerDocument,
-    log,
-    tasks,
-    svgStyleElement,
-    svgDefsElement,
-    svgStyles,
-    font,
-    progress,
-    autoDestruct,
-    onCloneNode,
-    onEmbedNode,
-    onCreateForeignObjectSvg
-  } = context;
-  log.time("clone node");
-  const clone = await cloneNode(context.node, context, true);
-  if (svgStyleElement && ownerDocument) {
-    let allCssText = "";
-    svgStyles.forEach((klasses, cssText) => {
-      allCssText += `${klasses.join(",\n")} {
-  ${cssText}
-}
-`;
-    });
-    svgStyleElement.appendChild(ownerDocument.createTextNode(allCssText));
-  }
-  log.timeEnd("clone node");
-  await onCloneNode?.(clone);
-  if (font !== false && isElementNode(clone)) {
-    log.time("embed web font");
-    await embedWebFont(clone, context);
-    log.timeEnd("embed web font");
-  }
-  log.time("embed node");
-  embedNode(clone, context);
-  const count = tasks.length;
-  let current = 0;
-  const runTask = async () => {
-    while (true) {
-      const task = tasks.pop();
-      if (!task)
-        break;
-      try {
-        await task;
-      } catch (error) {
-        context.log.warn("Failed to run task", error);
-      }
-      progress?.(++current, count);
-    }
-  };
-  progress?.(current, count);
-  await Promise.all([...Array.from({ length: 4 })].map(runTask));
-  log.timeEnd("embed node");
-  await onEmbedNode?.(clone);
-  const svg = createForeignObjectSvg(clone, context);
-  svgDefsElement && svg.insertBefore(svgDefsElement, svg.children[0]);
-  svgStyleElement && svg.insertBefore(svgStyleElement, svg.children[0]);
-  autoDestruct && destroyContext(context);
-  await onCreateForeignObjectSvg?.(svg);
-  return svg;
-}
-function createForeignObjectSvg(clone, context) {
-  const { width, height } = context;
-  const svg = createSvg(width, height, clone.ownerDocument);
-  const foreignObject = svg.ownerDocument.createElementNS(svg.namespaceURI, "foreignObject");
-  foreignObject.setAttributeNS(null, "x", "0%");
-  foreignObject.setAttributeNS(null, "y", "0%");
-  foreignObject.setAttributeNS(null, "width", "100%");
-  foreignObject.setAttributeNS(null, "height", "100%");
-  foreignObject.append(clone);
-  svg.appendChild(foreignObject);
-  return svg;
-}
-async function domToCanvas(node, options) {
-  const context = await orCreateContext(node, options);
-  const svg = await domToForeignObjectSvg(context);
-  const dataUrl = svgToDataUrl(svg, context.isEnable("removeControlCharacter"));
-  if (!context.autoDestruct) {
-    context.svgStyleElement = createStyleElement(context.ownerDocument);
-    context.svgDefsElement = context.ownerDocument?.createElementNS(XMLNS, "defs");
-    context.svgStyles.clear();
-  }
-  const image = createImage(dataUrl, svg.ownerDocument);
-  return await imageToCanvas(image, context);
-}
-
-// ../react/dist/screenshot.js
-var MAX_WIDTH = 1200;
-function roundedRect(ctx, x, y, w, h, r) {
-  ctx.moveTo(x + r, y);
-  ctx.arcTo(x + w, y, x + w, y + h, r);
-  ctx.arcTo(x + w, y + h, x, y + h, r);
-  ctx.arcTo(x, y + h, x, y, r);
-  ctx.arcTo(x, y, x + w, y, r);
-  ctx.closePath();
-}
-async function renderViewport(scale) {
-  return domToCanvas(document.documentElement, {
-    width: document.documentElement.clientWidth,
-    height: window.innerHeight,
-    scale,
-    timeout: 6e3,
-    backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
-    filter: (node) => !(node instanceof Element && node.id === "cs-root"),
-    style: { transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)`, transformOrigin: "0 0" }
-  });
-}
-function outline(ctx, width, height, ring, scale) {
-  const radius = Math.min(12 * scale, ring.w / 2, ring.h / 2);
-  ctx.beginPath();
-  ctx.rect(0, 0, width, height);
-  roundedRect(ctx, ring.x, ring.y, ring.w, ring.h, radius);
-  ctx.fillStyle = "rgba(15, 15, 20, 0.22)";
-  ctx.fill("evenodd");
-  ctx.beginPath();
-  roundedRect(ctx, ring.x, ring.y, ring.w, ring.h, radius);
-  ctx.lineWidth = 3 * scale;
-  ctx.strokeStyle = "#007aff";
-  ctx.stroke();
-}
-async function capturePage(highlight) {
-  const scale = Math.min(window.devicePixelRatio || 1, 2);
-  let page;
-  try {
-    page = await renderViewport(scale);
+    const payload = await response.json();
+    return payload.enabled && payload.apiUrl ? payload.apiUrl.replace(/\/+$/, "") : null;
   } catch {
-    return null;
-  }
-  const width = document.documentElement.clientWidth;
-  const outScale = Math.min(scale, 1600 / width);
-  const out = document.createElement("canvas");
-  out.width = Math.round(width * outScale);
-  out.height = Math.round(window.innerHeight * outScale);
-  const ctx = out.getContext("2d");
-  if (!ctx)
-    return null;
-  ctx.drawImage(page, 0, 0, out.width, out.height);
-  const rect = highlight?.getBoundingClientRect();
-  if (rect && rect.width > 0 && rect.bottom > 0 && rect.top < window.innerHeight) {
-    const pad = 6;
-    outline(ctx, out.width, out.height, { x: (rect.left - pad) * outScale, y: (rect.top - pad) * outScale, w: (rect.width + pad * 2) * outScale, h: (rect.height + pad * 2) * outScale }, outScale);
-  }
-  return new Promise((resolve) => out.toBlob((blob) => resolve(blob), "image/jpeg", 0.85));
-}
-async function captureAround(element) {
-  const rect = element.getBoundingClientRect();
-  const viewportWidth = document.documentElement.clientWidth;
-  const viewportHeight = window.innerHeight;
-  if (rect.width < 1 || rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth)
-    return null;
-  const scale = Math.min(window.devicePixelRatio || 1, 2);
-  let page;
-  try {
-    page = await renderViewport(scale);
-  } catch {
-    return null;
+    return void 0;
   }
-  const width = Math.min(viewportWidth, Math.max(rect.width + 200, 760));
-  const height = Math.min(viewportHeight, Math.max(rect.height + 200, 420));
-  const x = Math.max(0, Math.min(rect.left + rect.width / 2 - width / 2, viewportWidth - width));
-  const y = Math.max(0, Math.min(rect.top + rect.height / 2 - height / 2, viewportHeight - height));
-  const out = document.createElement("canvas");
-  const outScale = Math.min(scale, MAX_WIDTH / width);
-  out.width = Math.round(width * outScale);
-  out.height = Math.round(height * outScale);
-  const ctx = out.getContext("2d");
-  if (!ctx)
-    return null;
-  ctx.drawImage(page, x * scale, y * scale, width * scale, height * scale, 0, 0, out.width, out.height);
-  const pad = 6;
-  outline(ctx, out.width, out.height, { x: (rect.left - x - pad) * outScale, y: (rect.top - y - pad) * outScale, w: (rect.width + pad * 2) * outScale, h: (rect.height + pad * 2) * outScale }, outScale);
-  return out.toDataURL("image/jpeg", 0.82);
-}
-
-// ../react/dist/table.js
-import { jsx as _jsx5, jsxs as _jsxs5 } from "react/jsx-runtime";
-import { useMemo as useMemo2, useState as useState4 } from "react";
-var columns = [
-  { key: "comment", label: "Comment" },
-  { key: "role", label: "Role" },
-  { key: "page", label: "Page" },
-  { key: "author", label: "Author" },
-  { key: "replies", label: "Replies" },
-  { key: "status", label: "Status" },
-  { key: "updated", label: "Updated" }
-];
-function sortValue(thread, key2) {
-  if (key2 === "comment")
-    return thread.messages[0]?.body ?? "";
-  if (key2 === "role")
-    return thread.role ?? "";
-  if (key2 === "page")
-    return thread.url || thread.route;
-  if (key2 === "author")
-    return thread.createdBy;
-  if (key2 === "replies")
-    return thread.messages.length;
-  if (key2 === "status")
-    return thread.status;
-  return thread.updatedAt;
-}
-function searchText(thread) {
-  return [
-    thread.createdBy,
-    thread.role ?? "",
-    thread.url || thread.route,
-    targetName(thread.anchor),
-    ...thread.messages.map((message) => message.body),
-    ...thread.fields.map((field) => `${field.label} ${field.value}`)
-  ].join("\n").toLowerCase();
-}
-function CommentTable({ rows, route, activeId, tabs, onSelect, onList, onClose }) {
-  const [query, setQuery] = useState4("");
-  const [sort, setSort] = useState4({ key: "updated", desc: true });
-  const showRole = rows.some((row) => row.thread.role);
-  const fieldLabels = useMemo2(() => {
-    const labels = [];
-    for (const { thread } of rows)
-      for (const field of thread.fields)
-        if (!labels.includes(field.label))
-          labels.push(field.label);
-    return labels;
-  }, [rows]);
-  const shown = useMemo2(() => {
-    const needle = query.trim().toLowerCase();
-    const matched = needle ? rows.filter((row) => searchText(row.thread).includes(needle)) : rows;
-    return [...matched].sort((a, b) => {
-      const left = sortValue(a.thread, sort.key);
-      const right = sortValue(b.thread, sort.key);
-      const order = typeof left === "number" && typeof right === "number" ? left - right : String(left).localeCompare(String(right));
-      return sort.desc ? -order : order;
-    });
-  }, [query, rows, sort]);
-  const visible = columns.filter((column) => column.key !== "role" || showRole);
-  const header = (column) => _jsx5("th", { "aria-sort": sort.key === column.key ? sort.desc ? "descending" : "ascending" : "none", children: _jsxs5("button", { type: "button", onClick: () => setSort((current) => ({ key: column.key, desc: current.key === column.key ? !current.desc : column.key === "updated" })), children: [column.label, sort.key === column.key ? _jsx5("span", { className: "cs-sort", children: sort.desc ? "\u2193" : "\u2191" }) : null] }) }, column.key);
-  return _jsxs5("section", { className: "cs-card cs-table-sheet cs-hit", "data-cs-ui": "panel", "aria-label": "Comments table", children: [_jsxs5("header", { className: "cs-sheet-head", children: [_jsx5("h2", { children: "Comments" }), _jsx5("input", { className: "cs-table-search", "data-cs-ui": "table-search", type: "search", "aria-label": "Search comments", placeholder: "Search", value: query, onChange: (event) => setQuery(event.target.value) }), _jsx5("button", { className: "cs-icon-button", "data-cs-ui": "list-view", type: "button", "aria-label": "List view", onClick: onList, children: _jsx5(List, {}) }), _jsx5("button", { className: "cs-icon-button", type: "button", "aria-label": "Close comments", onClick: onClose, children: _jsx5(Close, {}) })] }), tabs, _jsx5("div", { className: "cs-table-wrap", children: shown.length === 0 ? _jsx5("p", { className: "cs-empty", children: query ? "No comments match." : "No comments here." }) : _jsxs5("table", { className: "cs-table", "data-cs-ui": "table", children: [_jsx5("thead", { children: _jsxs5("tr", { children: [visible.slice(0, showRole ? 2 : 1).map(header), fieldLabels.map((label) => _jsx5("th", { children: _jsx5("span", { children: label }) }, `field:${label}`)), visible.slice(showRole ? 2 : 1).map(header)] }) }), _jsx5("tbody", { children: shown.map((row) => {
-    const { thread } = row;
-    const first = thread.messages[0];
-    const note = statusNote(row.status, thread.anchor, thread.route === route);
-    return _jsxs5("tr", { className: activeId === thread.id ? "is-active" : void 0, "data-cs-ui": "table-row", "data-thread-id": thread.id, tabIndex: 0, onClick: () => onSelect(row), onKeyDown: (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        onSelect(row);
-      }
-    }, children: [_jsxs5("td", { className: "cs-cell-comment", children: [_jsx5("span", { className: "cs-cell-clamp", children: first?.body || "\u2014" }), _jsx5("small", { children: targetName(thread.anchor) })] }), showRole ? _jsx5("td", { children: thread.role ? _jsx5("span", { className: "cs-role", children: thread.role }) : null }) : null, fieldLabels.map((label) => _jsx5("td", { children: _jsx5("span", { className: "cs-cell-clamp", children: thread.fields.find((field) => field.label === label)?.value ?? "" }) }, `field:${label}`)), _jsx5("td", { className: "cs-cell-page", title: thread.url || thread.route, children: thread.url || thread.route }), _jsx5("td", { className: "cs-cell-nowrap", children: thread.createdBy }), _jsx5("td", { className: "cs-cell-num", children: thread.messages.length - 1 || "" }), _jsxs5("td", { className: "cs-cell-nowrap", children: [_jsx5("span", { className: thread.status === "resolved" ? "cs-state is-done" : "cs-state", children: thread.status === "resolved" ? "Resolved" : "Open" }), note && thread.status === "open" ? _jsx5("small", { className: `cs-note is-${note.tone}`, children: note.text }) : null] }), _jsx5("td", { className: "cs-cell-nowrap", children: _jsx5("time", { dateTime: thread.updatedAt, children: ago(thread.updatedAt) }) })] }, thread.id);
-  }) })] }) })] });
 }
-
-// ../react/dist/handoff.js
-var key = "devaccel.comment.handoff";
-var ttl = 30 * 60 * 1e3;
-function readHandoff() {
-  try {
-    const value = JSON.parse(sessionStorage.getItem(key) ?? "null");
-    return value && Date.now() - value.at < ttl ? value : null;
-  } catch {
+async function loadRuntime(sessionPath, source) {
+  if (source === "bundled")
+    return bundled();
+  const apiUrl = await serviceUrl(sessionPath);
+  if (apiUrl === null)
     return null;
-  }
-}
-function write(value) {
+  if (apiUrl === void 0)
+    return bundled();
+  const url = `${apiUrl}/v1/toolbar/${runtimeVersion}.js`;
   try {
-    if (value.invite || value.thread)
-      sessionStorage.setItem(key, JSON.stringify(value));
-    else
-      sessionStorage.removeItem(key);
-  } catch {
-  }
-}
-function linkParams() {
-  const url = new URL(window.location.href);
-  const hash = new URLSearchParams(url.hash.slice(1));
-  return {
-    url,
-    hash,
-    invite: url.searchParams.get("cs-invite") ?? hash.get("cs-invite"),
-    thread: url.searchParams.get("cs-thread") ?? hash.get("cs-thread")
-  };
-}
-function captureHandoff() {
-  if (typeof window === "undefined")
-    return;
-  const { invite, thread } = linkParams();
-  if (!invite && !thread)
-    return;
-  write({ ...readHandoff(), ...invite ? { invite } : {}, ...thread ? { thread } : {}, at: Date.now() });
-}
-function dropHandoff(part) {
-  const current = readHandoff();
-  if (!current)
-    return;
-  const { [part]: _dropped, ...rest } = current;
-  write(rest);
-}
-function stripHandoffFromUrl() {
-  const { url, hash } = linkParams();
-  const inQuery = url.searchParams.has("cs-invite") || url.searchParams.has("cs-thread");
-  const inHash = hash.has("cs-invite") || hash.has("cs-thread");
-  if (!inQuery && !inHash)
-    return;
-  url.searchParams.delete("cs-invite");
-  url.searchParams.delete("cs-thread");
-  if (inHash)
-    url.hash = "";
-  history.replaceState(history.state, "", url);
-}
-function linkWith(href, name, value) {
-  const url = new URL(href, window.location.origin);
-  url.searchParams.delete("cs-invite");
-  url.searchParams.delete("cs-thread");
-  url.hash = `${name}=${encodeURIComponent(value)}`;
-  return url.toString();
-}
-
-// ../react/dist/styles.js
-var toolbarCss = `
-#cs-root {
-  --cs-text: #1d1d1f;
-  --cs-text-2: #6e6e73;
-  --cs-text-3: #a1a1a6;
-  --cs-glass: rgba(251, 251, 253, 0.8);
-  --cs-card: rgba(255, 255, 255, 0.94);
-  --cs-fill: rgba(0, 0, 0, 0.05);
-  --cs-fill-2: rgba(0, 0, 0, 0.08);
-  --cs-line: rgba(0, 0, 0, 0.08);
-  --cs-edge: rgba(0, 0, 0, 0.1);
-  --cs-accent: #007aff;
-  --cs-accent-soft: rgba(0, 122, 255, 0.12);
-  --cs-danger: #ff3b30;
-  --cs-warn: #ff9500;
-  --cs-shadow: 0 0 0 0.5px var(--cs-edge), 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
-  position: fixed;
-  inset: 0;
-  z-index: 2147483000;
-  pointer-events: none;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--cs-text);
-  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
-  letter-spacing: -0.005em;
-  -webkit-font-smoothing: antialiased;
-  text-align: left;
-}
-#cs-root.cs-dark {
-  --cs-text: #f5f5f7;
-  --cs-text-2: #a1a1a6;
-  --cs-text-3: #6e6e73;
-  --cs-glass: rgba(40, 40, 44, 0.78);
-  --cs-card: rgba(36, 36, 40, 0.96);
-  --cs-fill: rgba(255, 255, 255, 0.07);
-  --cs-fill-2: rgba(255, 255, 255, 0.12);
-  --cs-line: rgba(255, 255, 255, 0.08);
-  --cs-edge: rgba(255, 255, 255, 0.12);
-  --cs-accent: #0a84ff;
-  --cs-accent-soft: rgba(10, 132, 255, 0.2);
-  --cs-shadow: 0 0 0 0.5px var(--cs-edge), 0 10px 30px rgba(0, 0, 0, 0.45);
-}
-#cs-root.cs-inside { position: absolute; }
-#cs-root, #cs-root * { box-sizing: border-box; }
-#cs-root h2, #cs-root p { margin: 0; }
-#cs-root button, #cs-root input, #cs-root textarea {
-  font: inherit; color: inherit; letter-spacing: inherit; margin: 0;
-}
-#cs-root button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
-#cs-root button:disabled { cursor: default; opacity: 0.45; }
-#cs-root button:focus-visible, #cs-root [role=button]:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
-#cs-root .cs-hit { pointer-events: auto; }
-#cs-root .cs-icon { display: block; flex: none; }
-
-/* Bar */
-#cs-root .cs-bar {
-  position: absolute;
-  bottom: 16px;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px;
-  border-radius: 999px;
-  background: var(--cs-glass);
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  backdrop-filter: saturate(180%) blur(20px);
-  box-shadow: var(--cs-shadow);
-}
-#cs-root.cs-at-center .cs-bar { left: 50%; transform: translateX(-50%); }
-#cs-root.cs-at-left .cs-bar { left: 16px; }
-#cs-root.cs-at-right .cs-bar { right: 16px; }
-#cs-root .cs-tool {
-  position: relative;
-  width: 34px;
-  height: 34px;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--cs-text);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-#cs-root .cs-tool:hover { background: var(--cs-fill); }
-#cs-root .cs-tool.is-on { background: var(--cs-fill-2); }
-#cs-root .cs-tool.is-accent { background: var(--cs-accent); color: #fff; }
-#cs-root .cs-tool[data-tip]::after {
-  content: attr(data-tip);
-  position: absolute;
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translate(-50%, 2px);
-  white-space: pre;
-  padding: 4px 8px;
-  border-radius: 7px;
-  background: rgba(29, 29, 31, 0.92);
-  color: #fff;
-  font-size: 11.5px;
-  font-weight: 500;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-#cs-root .cs-tool[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.35s; }
-#cs-root .cs-me { width: 34px; }
-#cs-root .cs-divider { width: 1px; height: 18px; background: var(--cs-line); margin: 0 3px; }
-#cs-root .cs-badge {
-  position: absolute;
-  top: 3px;
-  right: 2px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 999px;
-  background: var(--cs-accent);
-  color: #fff;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 16px;
-  text-align: center;
-  box-shadow: 0 0 0 2px var(--cs-glass);
-}
-#cs-root .cs-bar-lock {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  height: 34px;
-  padding: 0 14px 0 12px;
-  border-radius: 999px;
-  font-weight: 500;
-}
-#cs-root .cs-bar-lock:hover { background: var(--cs-fill); }
-#cs-root .cs-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  border-radius: 999px;
-  color: #fff;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 1;
-  user-select: none;
-}
-
-/* Cards */
-#cs-root .cs-card {
-  position: absolute;
-  background: var(--cs-card);
-  -webkit-backdrop-filter: saturate(180%) blur(24px);
-  backdrop-filter: saturate(180%) blur(24px);
-  border-radius: 14px;
-  box-shadow: var(--cs-shadow);
-}
-#cs-root .cs-unlock, #cs-root .cs-menu { bottom: 64px; }
-#cs-root.cs-at-center .cs-unlock, #cs-root.cs-at-center .cs-menu { left: 50%; transform: translateX(-50%); }
-#cs-root.cs-at-left .cs-unlock, #cs-root.cs-at-left .cs-menu { left: 16px; }
-#cs-root.cs-at-right .cs-unlock, #cs-root.cs-at-right .cs-menu { right: 16px; }
-#cs-root .cs-unlock { width: 280px; padding: 20px; text-align: center; }
-#cs-root .cs-unlock-icon {
-  width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px;
-  display: flex; align-items: center; justify-content: center; background: var(--cs-fill); color: var(--cs-text-2);
-}
-#cs-root .cs-unlock h2 { font-size: 15px; font-weight: 600; }
-#cs-root .cs-sub { color: var(--cs-text-2); margin-top: 4px; }
-#cs-root .cs-unlock form { margin-top: 14px; display: grid; gap: 8px; text-align: left; }
-#cs-root .cs-field { display: grid; gap: 4px; }
-#cs-root .cs-field span { font-size: 12px; color: var(--cs-text-2); padding-left: 2px; }
-#cs-root input, #cs-root textarea {
-  width: 100%;
-  border: 0;
-  border-radius: 9px;
-  background: var(--cs-fill);
-  padding: 8px 10px;
-  outline: none;
-  transition: box-shadow 0.15s ease, background-color 0.15s ease;
-}
-#cs-root input:focus, #cs-root textarea:focus { background: transparent; box-shadow: 0 0 0 1px var(--cs-accent), 0 0 0 4px var(--cs-accent-soft); }
-#cs-root textarea { resize: none; }
-#cs-root .cs-error { color: var(--cs-danger); font-size: 12px; }
-#cs-root .cs-pad { padding: 6px 14px 0; }
-#cs-root .cs-hint { color: var(--cs-text-3); font-size: 11.5px; }
-
-/* Buttons */
-#cs-root .cs-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  height: 28px;
-  padding: 0 11px;
-  border-radius: 8px;
-  background: var(--cs-fill);
-  font-size: 12.5px;
-  font-weight: 500;
-  transition: background-color 0.15s ease;
-}
-#cs-root .cs-button:hover { background: var(--cs-fill-2); }
-#cs-root .cs-button.is-primary { background: var(--cs-accent); color: #fff; }
-#cs-root .cs-button.is-primary:hover { filter: brightness(1.06); }
-#cs-root .cs-button.is-danger { background: var(--cs-danger); color: #fff; }
-#cs-root .cs-button.is-wide { width: 100%; height: 32px; margin-top: 4px; }
-#cs-root .cs-icon-button {
-  width: 26px; height: 26px; border-radius: 999px; flex: none;
-  display: inline-flex; align-items: center; justify-content: center; color: var(--cs-text-2);
-}
-#cs-root .cs-icon-button:hover { background: var(--cs-fill); color: var(--cs-text); }
-#cs-root .cs-send {
-  width: 26px; height: 26px; border-radius: 999px; flex: none;
-  display: inline-flex; align-items: center; justify-content: center; background: var(--cs-accent); color: #fff;
-}
-#cs-root .cs-send:disabled { background: var(--cs-fill-2); color: var(--cs-text-3); opacity: 1; }
-
-/* Menu */
-#cs-root .cs-menu { width: 264px; padding: 6px; }
-#cs-root .cs-me-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
-#cs-root .cs-me-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
-#cs-root .cs-me-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#cs-root .cs-rename { display: flex; align-items: center; gap: 4px; flex: 1; }
-#cs-root .cs-rename input { padding: 5px 8px; }
-#cs-root .cs-sep { height: 1px; background: var(--cs-line); margin: 4px 8px; }
-#cs-root .cs-item {
-  display: flex; align-items: center; justify-content: space-between; gap: 10px;
-  width: 100%; min-height: 32px; padding: 0 8px; border-radius: 8px; text-align: left;
-}
-#cs-root button.cs-item:hover { background: var(--cs-fill); }
-#cs-root .cs-item.is-danger { color: var(--cs-danger); }
-#cs-root .cs-switch { position: relative; width: 32px; height: 20px; border-radius: 999px; background: var(--cs-fill-2); transition: background-color 0.2s ease; flex: none; }
-#cs-root .cs-switch::after {
-  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px;
-  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease;
-}
-#cs-root .cs-switch.is-on { background: #34c759; }
-#cs-root .cs-switch.is-on::after { transform: translateX(12px); }
-#cs-root .cs-segment { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--cs-fill); }
-#cs-root .cs-segment button { padding: 2px 8px; border-radius: 6px; font-size: 12px; color: var(--cs-text-2); }
-#cs-root .cs-segment button.is-on { background: var(--cs-card); color: var(--cs-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); font-weight: 500; }
-#cs-root .cs-menu .cs-hint { padding: 6px 8px 4px; }
-#cs-root .cs-invite { padding: 2px 8px 6px; }
-#cs-root .cs-invite input { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 8px; }
-#cs-root .cs-invite .cs-hint { padding: 4px 0 0; }
-#cs-root .cs-confirm { padding: 10px; }
-#cs-root .cs-confirm h2 { font-size: 14px; font-weight: 600; }
-#cs-root .cs-row-end { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
-
-/* Sheet */
-#cs-root .cs-sheet {
-  top: 12px; right: 12px; max-height: calc(100% - 88px); width: min(360px, calc(100vw - 24px));
-  display: flex; flex-direction: column; overflow: hidden;
-}
-#cs-root .cs-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px 16px; }
-#cs-root .cs-sheet-head .cs-push { margin-left: auto; }
-#cs-root .cs-sheet-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
-#cs-root .cs-tabs { display: flex; gap: 2px; margin: 4px 12px 6px; padding: 2px; border-radius: 9px; background: var(--cs-fill); }
-#cs-root .cs-tabs button {
-  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
-  height: 26px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--cs-text-2);
-}
-#cs-root .cs-tabs button.is-on { background: var(--cs-card); color: var(--cs-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
-#cs-root .cs-count { font-size: 11px; color: var(--cs-text-3); font-variant-numeric: tabular-nums; }
-#cs-root .cs-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 6px 8px; overscroll-behavior: contain; }
-#cs-root .cs-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; color: var(--cs-text-3); text-transform: uppercase; letter-spacing: 0.04em; }
-#cs-root .cs-empty { padding: 36px 16px; text-align: center; color: var(--cs-text-2); display: grid; gap: 12px; justify-items: center; }
-#cs-root .cs-thread { border-radius: 10px; }
-#cs-root .cs-thread + .cs-thread { margin-top: 1px; }
-#cs-root .cs-thread.is-open { background: var(--cs-fill); }
-#cs-root .cs-thread-main { display: flex; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }
-#cs-root .cs-thread:not(.is-open) .cs-thread-main:hover { background: var(--cs-fill); }
-#cs-root .cs-thread-body { min-width: 0; flex: 1; }
-#cs-root .cs-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
-#cs-root .cs-meta strong { font-weight: 600; }
-#cs-root .cs-meta time { color: var(--cs-text-3); font-size: 12px; }
-#cs-root .cs-text { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
-#cs-root .cs-target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 11.5px; color: var(--cs-text-3); }
-#cs-root .cs-note { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
-#cs-root .cs-note::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
-#cs-root .cs-note.is-quiet { color: var(--cs-text-2); }
-#cs-root .cs-note.is-warn { color: var(--cs-warn); }
-#cs-root .cs-note.is-bad { color: var(--cs-danger); }
-#cs-root .cs-replies { margin-top: 4px; font-size: 12px; color: var(--cs-accent); font-weight: 500; }
-#cs-root .cs-thread-more { padding: 0 10px 10px 44px; display: grid; gap: 10px; }
-#cs-root .cs-message { display: flex; gap: 8px; }
-#cs-root .cs-reply { display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 0; border-radius: 10px; }
-#cs-root .cs-reply textarea { min-height: 32px; max-height: 120px; field-sizing: content; }
-#cs-root .cs-thread.is-open .cs-reply textarea { background: var(--cs-card); }
-#cs-root .cs-actions { display: flex; flex-wrap: wrap; gap: 6px; }
-#cs-root .cs-thread.is-open .cs-button { background: var(--cs-card); box-shadow: 0 0 0 0.5px var(--cs-edge); }
-#cs-root .cs-thread.is-open .cs-button:hover { background: var(--cs-fill-2); }
-
-/* Mentions */
-#cs-root .cs-mention { color: var(--cs-accent); background: var(--cs-accent-soft); border-radius: 4px; padding: 0 3px; font-weight: 500; }
-#cs-root .cs-delivery { margin-top: 4px; font-size: 11.5px; color: var(--cs-text-3); display: flex; align-items: center; gap: 5px; }
-#cs-root .cs-delivery::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #34c759; }
-#cs-root .cs-people {
-  position: fixed; z-index: 1; width: 264px; padding: 5px; border-radius: 12px;
-  background: var(--cs-card); box-shadow: var(--cs-shadow); pointer-events: auto;
-}
-#cs-root .cs-person { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
-#cs-root .cs-person.is-on { background: var(--cs-accent); color: #fff; }
-#cs-root .cs-person-text { display: grid; line-height: 1.25; min-width: 0; }
-#cs-root .cs-person-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#cs-root .cs-person-text small { font-size: 11.5px; color: var(--cs-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#cs-root .cs-person.is-on small { color: rgba(255, 255, 255, 0.8); }
-#cs-root .cs-field small { font-size: 11.5px; color: var(--cs-text-3); padding-left: 2px; }
-#cs-root .cs-me-lines { display: grid; line-height: 1.25; min-width: 0; }
-#cs-root .cs-me-lines small { font-size: 11.5px; color: var(--cs-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* Composer */
-#cs-root .cs-composer { width: min(320px, calc(100% - 16px)); }
-#cs-root .cs-composer-target {
-  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px;
-  border-bottom: 1px solid var(--cs-line); font-size: 12px; color: var(--cs-text-2);
-}
-#cs-root .cs-composer-name { font-weight: 500; color: var(--cs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-#cs-root .cs-composer-target code {
-  margin-left: auto; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cs-text-3);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; min-width: 0; max-width: 45%;
-}
-#cs-root .cs-composer-body { display: flex; gap: 10px; padding: 12px 12px 4px; }
-#cs-root .cs-composer-body textarea { background: transparent; padding: 3px 0; min-height: 56px; box-shadow: none; border-radius: 0; }
-#cs-root .cs-composer-foot { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px 40px; }
-#cs-root .cs-composer-foot .cs-hint { margin-left: auto; }
-
-/* Roles and fields */
-#cs-root .cs-details-input { display: grid; gap: 8px; padding: 2px 12px 6px 46px; }
-#cs-root .cs-details-edit .cs-details-input { padding: 0; }
-#cs-root .cs-detail-field { display: grid; gap: 3px; }
-#cs-root .cs-detail-field span, #cs-root .cs-roles-label, #cs-root .cs-detail-list dt {
-  font-size: 11px; font-weight: 600; color: var(--cs-text-3); text-transform: uppercase; letter-spacing: 0.03em;
-}
-#cs-root .cs-detail-field textarea { padding: 6px 8px; min-height: 30px; max-height: 120px; field-sizing: content; }
-#cs-root .cs-thread.is-open .cs-detail-field textarea { background: var(--cs-card); }
-#cs-root .cs-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
-#cs-root .cs-roles-label { margin-right: 4px; }
-#cs-root .cs-chip {
-  display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 9px; border-radius: 999px;
-  background: var(--cs-fill); font-size: 12px; font-weight: 500; color: var(--cs-text-2);
-}
-#cs-root button.cs-chip:hover { background: var(--cs-fill-2); }
-#cs-root .cs-chip.is-on, #cs-root button.cs-chip.is-on:hover { background: var(--cs-accent); color: #fff; }
-#cs-root .cs-chip.is-static { padding-right: 3px; color: var(--cs-text); }
-#cs-root .cs-chip.is-static button {
-  width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cs-text-3);
-}
-#cs-root .cs-chip.is-static button:hover { background: var(--cs-fill-2); color: var(--cs-text); }
-#cs-root .cs-chip.is-static .cs-icon { width: 11px; height: 11px; }
-#cs-root .cs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
-#cs-root .cs-role {
-  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
-  background: var(--cs-accent-soft); color: var(--cs-accent); font-size: 11px; font-weight: 600;
-}
-#cs-root .cs-detail-list { display: grid; gap: 6px; margin: 6px 0 0; }
-#cs-root .cs-detail-list > div { padding: 6px 8px; border-radius: 8px; background: var(--cs-fill); }
-#cs-root .cs-thread.is-open .cs-detail-list > div { background: var(--cs-card); }
-#cs-root .cs-detail-list dd { margin: 1px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
-#cs-root .cs-detail-list.is-clamped dd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-#cs-root .cs-details-edit { display: grid; gap: 8px; }
-#cs-root .cs-details-edit .cs-row-end { margin-top: 0; }
-#cs-root .cs-settings { width: 280px; }
-#cs-root .cs-settings-head { display: flex; align-items: center; gap: 4px; padding: 4px 4px 6px; }
-#cs-root .cs-settings-head h2 { font-size: 14px; font-weight: 600; }
-#cs-root .cs-settings-body { display: grid; gap: 6px; padding: 2px 8px 8px; }
-#cs-root .cs-field-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; padding-left: 2px; }
-#cs-root .cs-add-row { display: flex; align-items: center; gap: 4px; }
-#cs-root .cs-add-row input { padding: 5px 8px; }
-#cs-root .cs-settings .cs-hint { padding: 6px 8px 4px; }
-
-/* Table */
-#cs-root .cs-table-sheet {
-  top: 12px; right: 12px; width: min(1100px, calc(100vw - 24px)); max-height: calc(100% - 88px);
-  display: flex; flex-direction: column; overflow: hidden;
-}
-#cs-root .cs-table-sheet .cs-sheet-head { gap: 6px; }
-#cs-root .cs-table-sheet .cs-sheet-head h2 { margin-right: auto; }
-#cs-root .cs-table-search { width: 220px; padding: 5px 10px; }
-#cs-root .cs-table-sheet .cs-tabs { max-width: 420px; }
-#cs-root .cs-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--cs-line); overscroll-behavior: contain; }
-#cs-root .cs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
-#cs-root .cs-table th {
-  position: sticky; top: 0; z-index: 1; background: var(--cs-card); text-align: left; font-weight: 600;
-  font-size: 11px; color: var(--cs-text-3); text-transform: uppercase; letter-spacing: 0.03em;
-  padding: 0; border-bottom: 1px solid var(--cs-line); white-space: nowrap;
-}
-#cs-root .cs-table th > button, #cs-root .cs-table th > span {
-  display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
-}
-#cs-root .cs-table th > button:hover { color: var(--cs-text); }
-#cs-root .cs-sort { color: var(--cs-accent); }
-#cs-root .cs-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--cs-line); max-width: 260px; }
-#cs-root .cs-table tbody tr { cursor: pointer; }
-#cs-root .cs-table tbody tr:hover { background: var(--cs-fill); }
-#cs-root .cs-table tbody tr.is-active { background: var(--cs-accent-soft); }
-#cs-root .cs-table tbody tr:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
-#cs-root .cs-cell-comment { min-width: 220px; }
-#cs-root .cs-cell-comment small, #cs-root .cs-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--cs-text-3); }
-#cs-root .cs-cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
-#cs-root .cs-cell-page { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cs-text-2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#cs-root .cs-cell-nowrap { white-space: nowrap; }
-#cs-root .cs-cell-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--cs-text-2); }
-#cs-root .cs-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
-#cs-root .cs-state::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #34c759; }
-#cs-root .cs-state.is-done { color: var(--cs-text-3); }
-#cs-root .cs-state.is-done::before { background: var(--cs-text-3); }
-#cs-root .cs-table .cs-note { display: flex; margin-top: 2px; font-size: 11px; }
-
-/* Attachments */
-#cs-root .cs-attach { display: inline-flex; gap: 0; flex: none; }
-#cs-root .cs-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 2px 46px; }
-#cs-root .cs-thread-more .cs-tray { padding: 0; }
-#cs-root .cs-pending {
-  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 170px; height: 34px;
-  padding: 0 24px 0 4px; border-radius: 8px; background: var(--cs-fill); font-size: 11.5px; color: var(--cs-text-2);
-}
-#cs-root .cs-pending img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; flex: none; }
-#cs-root .cs-pending .cs-icon { margin-left: 4px; }
-#cs-root .cs-pending-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#cs-root .cs-pending.is-uploading { opacity: 0.6; }
-#cs-root .cs-pending.is-failed { box-shadow: inset 0 0 0 1px var(--cs-danger); }
-#cs-root .cs-pending-remove {
-  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 999px;
-  display: inline-flex; align-items: center; justify-content: center; color: var(--cs-text-3);
-}
-#cs-root .cs-pending-remove:hover { background: var(--cs-fill-2); color: var(--cs-text); }
-#cs-root .cs-pending-remove .cs-icon { width: 11px; height: 11px; margin: 0; }
-#cs-root .cs-files { display: grid; gap: 6px; margin-top: 6px; }
-#cs-root .cs-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
-#cs-root .cs-thumb { display: block; width: 112px; height: 72px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 0.5px var(--cs-edge); background: var(--cs-fill); }
-#cs-root .cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
-#cs-root .cs-file {
-  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px;
-  background: var(--cs-fill); color: var(--cs-text); text-decoration: none; font-size: 12px; justify-self: start;
-}
-#cs-root .cs-file:hover { background: var(--cs-fill-2); }
-#cs-root .cs-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#cs-root .cs-file-size { color: var(--cs-text-3); flex: none; }
-
-/* Page overlays */
-#cs-root .cs-pin {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  padding: 2px;
-  border-radius: 999px;
-  background: var(--cs-card);
-  box-shadow: 0 0 0 0.5px var(--cs-edge), 0 3px 10px rgba(0, 0, 0, 0.18);
-  pointer-events: auto;
-  transition: transform 0.15s ease;
-}
-#cs-root .cs-pin:hover { transform: translate(-50%, -50%) scale(1.08); }
-#cs-root .cs-pin.is-active { box-shadow: 0 0 0 2px var(--cs-accent), 0 3px 10px rgba(0, 0, 0, 0.18); }
-#cs-root .cs-pin.is-drifted { box-shadow: 0 0 0 1.5px var(--cs-warn), 0 3px 10px rgba(0, 0, 0, 0.18); }
-#cs-root .cs-pin-count {
-  position: absolute; top: -5px; right: -6px; min-width: 15px; height: 15px; padding: 0 4px;
-  border-radius: 999px; background: var(--cs-text); color: var(--cs-card);
-  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
-}
-#cs-root .cs-peek {
-  position: absolute; width: 240px; padding: 10px 12px; border-radius: 12px;
-  background: var(--cs-card); box-shadow: var(--cs-shadow); pointer-events: none;
-}
-#cs-root .cs-peek .cs-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-#cs-root .cs-outline {
-  position: absolute; border-radius: 8px; pointer-events: none;
-  box-shadow: 0 0 0 2px var(--cs-accent); background: var(--cs-accent-soft);
-}
-#cs-root .cs-outline.is-flash { animation: cs-flash 1.4s ease forwards; }
-@keyframes cs-flash { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
-#cs-root .cs-outline-label {
-  position: absolute; max-width: 360px; padding: 3px 8px; border-radius: 6px; pointer-events: none;
-  background: var(--cs-accent); color: #fff; font-size: 11.5px; font-weight: 500;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-#cs-root .cs-banner {
-  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
-  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 999px;
-  background: var(--cs-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
-  box-shadow: var(--cs-shadow); font-weight: 500; white-space: nowrap;
-}
-#cs-root .cs-banner button { padding: 3px 10px; border-radius: 999px; background: var(--cs-fill); font-size: 12px; }
-#cs-root .cs-banner button:hover { background: var(--cs-fill-2); }
-#cs-root .cs-toast {
-  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px;
-  background: rgba(29, 29, 31, 0.9); color: #fff; font-size: 12px; font-weight: 500;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); pointer-events: none; white-space: nowrap;
-}
-
-/* Docked inside an open <dialog> */
-#cs-root.cs-inside .cs-bar { bottom: 8px; }
-#cs-root.cs-inside.cs-at-left .cs-bar { left: 8px; }
-#cs-root.cs-inside.cs-at-right .cs-bar { right: 8px; }
-#cs-root.cs-inside .cs-sheet { top: 8px; right: 8px; bottom: auto; max-height: 46%; width: min(300px, calc(100% - 16px)); }
-#cs-root.cs-inside .cs-unlock, #cs-root.cs-inside .cs-menu { bottom: 52px; }
-#cs-root.cs-inside .cs-toast { top: 8px; }
-`;
-
-// ../react/dist/toolbar.js
-captureHandoff();
-var historyFlag = "__devaccelCommentHistory";
-var prefsKey = "devaccel.comment.prefs";
-var positions = [
-  { value: "bottom-left", label: "Left" },
-  { value: "bottom-center", label: "Center" },
-  { value: "bottom-right", label: "Right" }
-];
-function readPrefs() {
-  try {
-    return JSON.parse(localStorage.getItem(prefsKey) ?? "{}");
-  } catch {
-    return {};
-  }
-}
-function overlayHost() {
-  const dialogs = [...document.querySelectorAll("dialog")].filter((node) => node instanceof HTMLDialogElement && node.open && !node.closest("#cs-root"));
-  return dialogs.at(-1) ?? document.body;
-}
-function placeAgainst(element, host) {
-  const rect = element.getBoundingClientRect();
-  if (rect.width < 1 && rect.height < 1)
-    return null;
-  if (host === document.body)
-    return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
-  const hostRect = host.getBoundingClientRect();
-  return {
-    top: rect.top - hostRect.top + host.scrollTop,
-    left: rect.left - hostRect.left + host.scrollLeft,
-    width: rect.width,
-    height: rect.height
-  };
-}
-function pageHref() {
-  const url = new URL(window.location.href);
-  url.searchParams.delete("cs-thread");
-  url.searchParams.delete("cs-invite");
-  const hash = url.hash.includes("cs-thread=") || url.hash.includes("cs-invite=") ? "" : url.hash;
-  return `${url.pathname}${url.search}${hash}`;
-}
-function isTyping(target) {
-  if (!(target instanceof HTMLElement))
-    return false;
-  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
-}
-function submitOnCmdEnter(event) {
-  if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault();
-    event.currentTarget.form?.requestSubmit();
-  }
-}
-async function loadSession(sessionPath) {
-  const response = await fetch(sessionPath, {
-    headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
-    cache: "no-store"
-  });
-  const payload = await response.json();
-  if (!payload.enabled || !payload.apiUrl || !payload.project || !payload.environment || !payload.hostToken)
-    return null;
-  return { apiUrl: payload.apiUrl, project: payload.project, environment: payload.environment, hostToken: payload.hostToken };
-}
-function Avatar({ name, size = 24 }) {
-  return _jsx6("span", { className: "cs-avatar", style: { width: size, height: size, fontSize: size * 0.4, background: colorFor(name) }, children: initials(name) });
-}
-function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs = 4e3, position = "bottom-center", theme = "light", navigate }) {
-  const [phase, setPhase] = useState5("boot");
-  const [session, setSession] = useState5(null);
-  const [member, setMember] = useState5(null);
-  const [threads, setThreads] = useState5([]);
-  const [route, setRoute] = useState5("/");
-  const [surface, setSurface] = useState5("none");
-  const [tab, setTab] = useState5("page");
-  const [mode, setMode] = useState5("browse");
-  const [reattachId, setReattachId] = useState5(null);
-  const [activeId, setActiveId] = useState5(null);
-  const [peekId, setPeekId] = useState5(null);
-  const [draft, setDraft] = useState5(null);
-  const [body, setBody] = useState5("");
-  const [reply, setReply] = useState5("");
-  const [name, setName] = useState5("");
-  const [passphrase, setPassphrase] = useState5("");
-  const [email, setEmail] = useState5("");
-  const [members, setMembers] = useState5([]);
-  const [profile, setProfile] = useState5(null);
-  const [deliveries, setDeliveries] = useState5({});
-  const [invite, setInvite] = useState5(null);
-  const [capturing, setCapturing] = useState5(false);
-  const [inviteLink, setInviteLink] = useState5(null);
-  const [renaming, setRenaming] = useState5(null);
-  const [confirmReset, setConfirmReset] = useState5(false);
-  const [error, setError] = useState5("");
-  const [toast, setToast] = useState5("");
-  const [busy, setBusy] = useState5(false);
-  const [prefs, setPrefs] = useState5({});
-  const [portal, setPortal] = useState5(null);
-  const [mounted, setMounted] = useState5(false);
-  const [highlight, setHighlight] = useState5(null);
-  const [flash, setFlash] = useState5(null);
-  const [placed, setPlaced] = useState5([]);
-  const [systemDark, setSystemDark] = useState5(false);
-  const [settings, setSettings] = useState5(null);
-  const [draftDetails, setDraftDetails] = useState5(noDetails);
-  const [editingId, setEditingId] = useState5(null);
-  const [view, setView] = useState5("list");
-  const threadsRef = useRef3(threads);
-  threadsRef.current = threads;
-  const modeRef = useRef3(mode);
-  modeRef.current = mode;
-  const draftPicked = useRef3(/* @__PURE__ */ new Map());
-  const replyPicked = useRef3(/* @__PURE__ */ new Map());
-  const draftShot = useRef3(null);
-  const replyShot = useRef3(null);
-  const pendingThread = useRef3(null);
-  const arrival = useRef3(null);
-  const draftFiles = useAttachments(session, member, setError);
-  const replyFiles = useAttachments(session, member, setError);
-  const resetReplyFiles = replyFiles.reset;
-  useEffect2(() => resetReplyFiles(), [activeId, resetReplyFiles]);
-  const snapshot = useCallback2(async (target, add) => {
-    setCapturing(true);
-    const blob = await capturePage(target).catch(() => null);
-    setCapturing(false);
-    if (!blob) {
-      setError("Couldn\u2019t capture the page.");
-      return;
-    }
-    const stamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[:T]/g, "-");
-    add([{ blob, name: `screenshot-${stamp}.jpg` }]);
-  }, []);
-  const pinsHidden = Boolean(prefs.pinsHidden);
-  const barPosition = prefs.position ?? position;
-  const savePrefs = useCallback2((next) => {
-    setPrefs(next);
-    localStorage.setItem(prefsKey, JSON.stringify(next));
-  }, []);
-  const say = useCallback2((message) => setToast(message), []);
-  useEffect2(() => {
-    if (theme !== "system")
-      return;
-    const query = window.matchMedia("(prefers-color-scheme: dark)");
-    const sync = () => setSystemDark(query.matches);
-    sync();
-    query.addEventListener("change", sync);
-    return () => query.removeEventListener("change", sync);
-  }, [theme]);
-  useEffect2(() => {
-    if (!toast)
-      return;
-    const id = window.setTimeout(() => setToast(""), 1800);
-    return () => window.clearTimeout(id);
-  }, [toast]);
-  useEffect2(() => {
-    setMounted(true);
-    setPrefs(readPrefs());
-    if (!document.getElementById("cs-style")) {
-      const style = document.createElement("style");
-      style.id = "cs-style";
-      style.textContent = toolbarCss;
-      document.head.append(style);
-    }
-  }, []);
-  useEffect2(() => {
+    const remote = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      url
+    );
+    if (typeof remote.mount === "function")
+      return remote;
+    throw new Error(`${url} has no mount export`);
+  } catch (error) {
+    console.warn("[comment-service] Could not load the latest toolbar, using the copy bundled with the package.", error);
+    return bundled();
+  }
+}
+function CommentToolbar({ source = "latest", sessionPath = "/api/comment-service/session", pollMs, position, theme, navigate }) {
+  const handle = useRef(null);
+  const navigateRef = useRef(navigate);
+  navigateRef.current = navigate;
+  const hasNavigate = Boolean(navigate);
+  const props = useRef({});
+  props.current = {
+    sessionPath,
+    pollMs,
+    position,
+    theme,
+    navigate: hasNavigate ? (href) => navigateRef.current?.(href) : void 0
+  };
+  useEffect(() => {
     let cancelled = false;
-    loadSession(sessionPath).then((next) => {
-      if (cancelled)
-        return;
-      if (!next) {
-        setPhase("off");
+    let mounted = null;
+    const container = document.createElement("div");
+    container.setAttribute("data-cs-runtime", source);
+    container.style.display = "contents";
+    document.body.append(container);
+    void loadRuntime(sessionPath, source).then((runtime) => {
+      if (cancelled || !runtime)
         return;
-      }
-      setSession(next);
-      const stored = localStorage.getItem(storageKey(next));
-      if (stored && memberIsCurrent(stored)) {
-        setMember(stored);
-        setName(readJwt(stored)?.name ?? "");
-        setEmail(readJwt(stored)?.email ?? "");
-      }
-      setPhase("ready");
-    }).catch(() => {
-      if (!cancelled)
-        setPhase("off");
+      mounted = runtime.mount(container, props.current);
+      handle.current = mounted;
     });
     return () => {
       cancelled = true;
-    };
-  }, [sessionPath]);
-  useEffect2(() => {
-    const sync = () => setRoute(window.location.pathname);
-    sync();
-    if (!Reflect.get(window, historyFlag)) {
-      const push = history.pushState.bind(history);
-      const replace = history.replaceState.bind(history);
-      const notify = () => window.dispatchEvent(new Event("cs-nav"));
-      history.pushState = ((...args) => {
-        push(...args);
-        notify();
-      });
-      history.replaceState = ((...args) => {
-        replace(...args);
-        notify();
-      });
-      Reflect.set(window, historyFlag, true);
-    }
-    window.addEventListener("popstate", sync);
-    window.addEventListener("cs-nav", sync);
-    return () => {
-      window.removeEventListener("popstate", sync);
-      window.removeEventListener("cs-nav", sync);
-    };
-  }, []);
-  const refresh = useCallback2(async () => {
-    if (!session || !member)
-      return;
-    const next = await listThreads(session, member);
-    setThreads(next.threads);
-    setSettings(next.settings);
-  }, [member, session]);
-  useEffect2(() => {
-    if (!session || !member)
-      return;
-    let stop = false;
-    const tick = () => {
-      listThreads(session, member).then((next) => {
-        if (stop)
-          return;
-        setThreads(next.threads);
-        setSettings(next.settings);
-      }).catch((caught) => {
-        if (caught instanceof ApiError && caught.status === 401) {
-          localStorage.removeItem(storageKey(session));
-          setMember(null);
-        }
+      handle.current = null;
+      queueMicrotask(() => {
+        mounted?.unmount();
+        container.remove();
       });
     };
-    tick();
-    const id = window.setInterval(tick, pollMs);
-    return () => {
-      stop = true;
-      window.clearInterval(id);
-    };
-  }, [member, pollMs, session]);
-  useEffect2(() => {
-    if (!session || !member) {
-      setMembers([]);
-      return;
-    }
-    let stop = false;
-    const load = () => listMembers(session, member).then((list) => {
-      if (!stop)
-        setMembers(list);
-    }).catch(() => void 0);
-    load();
-    const id = window.setInterval(load, 6e4);
-    return () => {
-      stop = true;
-      window.clearInterval(id);
-    };
-  }, [member, session]);
-  useEffect2(() => {
-    captureHandoff();
-    const handoff = readHandoff();
-    pendingThread.current = handoff?.thread ?? null;
-    if (handoff?.invite)
-      setInvite(handoff.invite);
-    stripHandoffFromUrl();
-  }, []);
-  const dropInvite = useCallback2(() => {
-    setInvite(null);
-    dropHandoff("invite");
-  }, []);
-  useEffect2(() => {
-    if (phase === "ready" && !member && (pendingThread.current || invite))
-      setSurface("unlock");
-    if (member && invite)
-      dropInvite();
-  }, [dropInvite, invite, member, phase]);
-  useEffect2(() => {
-    if (!mounted)
-      return;
-    const sync = () => setPortal(overlayHost());
-    sync();
-    const observer = new MutationObserver(sync);
-    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["open"] });
-    return () => observer.disconnect();
-  }, [mounted]);
-  useEffect2(() => {
-    if (!mounted)
-      return;
-    let frame = 0;
-    const update = () => {
-      cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => {
-        const host2 = portal ?? document.body;
-        const next = threads.map((thread) => {
-          if (thread.status === "resolved")
-            return { thread, status: "resolved" };
-          if (thread.route !== route)
-            return { thread, status: "unavailable" };
-          const { resolution, element } = resolveInDocument(thread.anchor, route);
-          if ((resolution.status === "pinned" || resolution.status === "drifted") && element) {
-            const box = placeAgainst(element, host2);
-            if (!box)
-              return { thread, status: "hidden" };
-            return { thread, status: resolution.status, top: box.top, left: box.left + box.width };
-          }
-          return { thread, status: resolution.status };
-        });
-        setPlaced(next);
-      });
-    };
-    update();
-    const observer = new MutationObserver((records) => {
-      const internal = records.every((record) => {
-        const node = record.target instanceof Element ? record.target : record.target.parentElement;
-        return Boolean(node?.closest("#cs-root"));
-      });
-      if (!internal)
-        update();
-    });
-    observer.observe(document.body, { childList: true, subtree: true, attributes: true });
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      cancelAnimationFrame(frame);
-      observer.disconnect();
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [mounted, portal, route, threads]);
-  useEffect2(() => {
-    if (!flash)
-      return;
-    const id = window.setTimeout(() => setFlash(null), 1400);
-    return () => window.clearTimeout(id);
-  }, [flash]);
-  const startComment = useCallback2(() => {
-    setDraft(null);
-    setReattachId(null);
-    setSurface("none");
-    setMode((current) => current === "select" ? "browse" : "select");
-  }, []);
-  const togglePins = useCallback2(() => {
-    const next = !pinsHidden;
-    savePrefs({ ...prefs, pinsHidden: next });
-    say(next ? "Pins hidden \xB7 H to show" : "Pins shown");
-  }, [pinsHidden, prefs, savePrefs, say]);
-  useEffect2(() => {
-    const onKey = (event) => {
-      if (event.defaultPrevented)
-        return;
-      if (event.key === "Escape") {
-        if (mode !== "browse" || draft || surface !== "none") {
-          setMode("browse");
-          setDraft(null);
-          setReattachId(null);
-          setSurface("none");
-          setConfirmReset(false);
-          setRenaming(null);
-        }
-        return;
-      }
-      if (!member || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target))
-        return;
-      const key2 = event.key.toLowerCase();
-      if (key2 === "c")
-        startComment();
-      else if (key2 === "i") {
-        setView(prefs.view ?? "list");
-        setSurface((current) => current === "inbox" ? "none" : "inbox");
-      } else if (key2 === "h")
-        togglePins();
-      else
-        return;
-      event.preventDefault();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [draft, member, mode, prefs.view, startComment, surface, togglePins]);
-  useEffect2(() => {
-    if (mode === "browse") {
-      setHighlight(null);
-      document.documentElement.style.cursor = "";
-      return;
-    }
-    document.documentElement.style.cursor = "crosshair";
-    const host2 = () => portal ?? document.body;
-    const onMove = (event) => {
-      if (event.target instanceof Element && event.target.closest("#cs-root")) {
-        setHighlight(null);
-        return;
-      }
-      const element = elementAt(event.clientX, event.clientY);
-      const box = element ? placeAgainst(element, host2()) : null;
-      setHighlight(element && box ? { ...box, label: describeElement(element) } : null);
-    };
-    const onClick = (event) => {
-      if (event.target instanceof Element && event.target.closest("#cs-root button, #cs-root input, #cs-root textarea, #cs-root form")) {
-        return;
-      }
-      const element = elementAt(event.clientX, event.clientY);
-      if (!element || !session)
-        return;
-      event.preventDefault();
-      event.stopPropagation();
-      const anchor = captureAnchor(element, window.location.pathname);
-      const target = host2();
-      const box = placeAgainst(element, target);
-      if (modeRef.current === "reattach" && reattachId && member) {
-        setBusy(true);
-        updateThread(session, member, reattachId, { anchor, url: pageHref() }).then(() => refresh()).then(() => {
-          setMode("browse");
-          setReattachId(null);
-          setSurface("inbox");
-          setActiveId(reattachId);
-          setError("");
-          say("Reattached");
-        }).catch((caught) => setError(caught instanceof Error ? caught.message : "Could not reattach.")).finally(() => setBusy(false));
-        return;
-      }
-      const width = target === document.body ? window.innerWidth : target.clientWidth;
-      const composerWidth = Math.min(320, width - 16);
-      let left = box ? box.left + box.width + 12 : event.clientX;
-      if (left + composerWidth > width - 8)
-        left = box ? box.left - composerWidth - 12 : width - composerWidth - 8;
-      left = Math.max(8, Math.min(left, width - composerWidth - 8));
-      setDraft({ anchor, top: Math.max(8, box ? box.top - 8 : event.clientY), left, element });
-      draftPicked.current = /* @__PURE__ */ new Map();
-      draftShot.current = null;
-      draftFiles.reset();
-      setBody("");
-      setDraftDetails(noDetails);
-      setMode("browse");
-      setError("");
-    };
-    document.addEventListener("mousemove", onMove, true);
-    document.addEventListener("click", onClick, true);
-    return () => {
-      document.documentElement.style.cursor = "";
-      document.removeEventListener("mousemove", onMove, true);
-      document.removeEventListener("click", onClick, true);
-    };
-  }, [member, mode, portal, reattachId, refresh, say, session]);
-  useEffect2(() => {
-    const api = {
-      version: 1,
-      project: session?.project ?? null,
-      environment: session?.environment ?? null,
-      list: () => threadsRef.current,
-      capture: (selector) => {
-        const element = document.querySelector(selector);
-        return element ? captureAnchor(element, window.location.pathname) : null;
-      },
-      resolve: (anchor) => resolveInDocument(anchor, window.location.pathname).resolution
-    };
-    Object.assign(window, { __COMMENT_SERVICE__: api });
-  }, [session]);
-  const open = placed.filter((item) => item.thread.status === "open");
-  const counts = {
-    page: open.filter((item) => item.thread.route === route).length,
-    all: open.length,
-    resolved: placed.length - open.length
-  };
-  const listed = useMemo3(() => {
-    if (tab === "resolved")
-      return placed.filter((item) => item.thread.status === "resolved");
-    const openOnly = placed.filter((item) => item.thread.status === "open");
-    return tab === "page" ? openOnly.filter((item) => item.thread.route === route) : openOnly;
-  }, [placed, route, tab]);
-  const groups = useMemo3(() => {
-    if (tab !== "all")
-      return [{ route: null, items: listed }];
-    const byRoute = /* @__PURE__ */ new Map();
-    for (const item of listed)
-      byRoute.set(item.thread.route, [...byRoute.get(item.thread.route) ?? [], item]);
-    return [...byRoute.entries()].sort(([a], [b]) => a === route ? -1 : b === route ? 1 : a.localeCompare(b)).map(([key2, items]) => ({ route: key2, items }));
-  }, [listed, route, tab]);
-  const showOnPage = useCallback2((thread) => {
-    const { element } = resolveInDocument(thread.anchor, window.location.pathname);
-    if (!element)
-      return;
-    element.scrollIntoView({ block: "center", behavior: "smooth" });
-    window.setTimeout(() => {
-      const box = placeAgainst(element, portal ?? document.body);
-      if (box)
-        setFlash(box);
-    }, 350);
-  }, [portal]);
-  useEffect2(() => {
-    const id = pendingThread.current;
-    if (!id || !member)
-      return;
-    const item = placed.find((candidate) => candidate.thread.id === id);
-    if (!item)
-      return;
-    pendingThread.current = null;
-    dropHandoff("thread");
-    setTab(item.thread.status === "resolved" ? "resolved" : item.thread.route === route ? "page" : "all");
-    setActiveId(id);
-    setSurface("inbox");
-    if (item.status === "pinned" || item.status === "drifted")
-      showOnPage(item.thread);
-    else
-      arrival.current = { id, until: Date.now() + 6e3 };
-  }, [member, placed, route, showOnPage]);
-  useEffect2(() => {
-    const pending = arrival.current;
-    if (!pending)
-      return;
-    if (Date.now() > pending.until) {
-      arrival.current = null;
-      return;
-    }
-    const item = placed.find((candidate) => candidate.thread.id === pending.id);
-    if (!item || item.status !== "pinned" && item.status !== "drifted")
-      return;
-    arrival.current = null;
-    showOnPage(item.thread);
-  }, [placed, showOnPage]);
-  const select = useCallback2((item, keepOpen = false) => {
-    const { thread } = item;
-    if (!keepOpen && activeId === thread.id) {
-      setActiveId(null);
-      return;
-    }
-    setActiveId(thread.id);
-    setEditingId(null);
-    const onPage = item.status === "pinned" || item.status === "drifted";
-    const target = thread.url || thread.route;
-    const legacyHere = thread.url === thread.route && thread.route === route;
-    if (target === pageHref() || onPage && legacyHere)
-      return;
-    if (navigate) {
-      arrival.current = { id: thread.id, until: Date.now() + 6e3 };
-      navigate(target);
-      return;
-    }
-    window.location.assign(linkWith(target, "cs-thread", thread.id));
-  }, [activeId, navigate, route]);
-  if (!mounted || phase !== "ready" || !session)
-    return null;
-  const memberName = member ? readJwt(member)?.name ?? name : "";
-  const host = portal ?? document.body;
-  const inside = host !== document.body;
-  const peek = peekId ? placed.find((item) => item.thread.id === peekId && item.top != null) : void 0;
-  const canPost = Boolean(body.trim() || draftFiles.ids.length || settings?.fields.enabled && hasFieldValues(draftDetails));
-  const changeSettings = (next) => {
-    if (!member)
-      return;
-    const previous = settings;
-    setSettings(next);
-    setError("");
-    saveSettings(session, member, next).then(setSettings).catch((caught) => {
-      setSettings(previous);
-      setError(caught instanceof Error ? caught.message : "Couldn\u2019t save.");
-    });
-  };
-  const lock = () => {
-    localStorage.removeItem(storageKey(session));
-    setMember(null);
-    setThreads([]);
-    setSurface("none");
-    setMode("browse");
-    setDraft(null);
-  };
-  const reset = () => {
-    localStorage.removeItem(storageKey(session));
-    localStorage.removeItem(prefsKey);
-    setPrefs({});
-    setMember(null);
-    setThreads([]);
-    setName("");
-    setEmail("");
-    setPassphrase("");
-    setProfile(null);
-    setDeliveries({});
-    setInviteLink(null);
-    setConfirmReset(false);
-    setMode("browse");
-    setDraft(null);
-    setSurface("unlock");
-  };
-  const bar = _jsx6("div", { className: "cs-bar cs-hit", "data-cs-ui": "bar", role: "toolbar", "aria-label": "Comments toolbar", children: !member ? _jsxs6("button", { className: "cs-bar-lock", "data-cs-ui": "launcher", type: "button", "aria-label": "Comments", onClick: () => {
-    setError("");
-    setSurface(surface === "unlock" ? "none" : "unlock");
-  }, children: [_jsx6(Lock, {}), _jsx6("span", { children: "Comments" })] }) : _jsxs6(_Fragment3, { children: [_jsx6("button", { className: mode === "select" ? "cs-tool is-on is-accent" : "cs-tool", "data-cs-ui": "comment-mode", "data-tip": "Comment  C", type: "button", "aria-label": "Add comment", "aria-pressed": mode === "select", onClick: startComment, children: _jsx6(AddComment, {}) }), _jsxs6("button", { className: surface === "inbox" ? "cs-tool is-on" : "cs-tool", "data-cs-ui": "launcher", "data-tip": "Comments  I", type: "button", "aria-label": "Comments", "aria-expanded": surface === "inbox", onClick: () => {
-    setError("");
-    setMode("browse");
-    setView(prefs.view ?? "list");
-    setSurface(surface === "inbox" ? "none" : "inbox");
-  }, children: [_jsx6(Inbox, {}), counts.page > 0 ? _jsx6("span", { className: "cs-badge", children: counts.page }) : null] }), _jsx6("button", { className: pinsHidden ? "cs-tool is-on" : "cs-tool", "data-cs-ui": "pins-toggle", "data-tip": pinsHidden ? "Show pins  H" : "Hide pins  H", type: "button", "aria-label": pinsHidden ? "Show pins" : "Hide pins", "aria-pressed": pinsHidden, onClick: togglePins, children: pinsHidden ? _jsx6(EyeOff, {}) : _jsx6(Eye, {}) }), _jsx6("span", { className: "cs-divider" }), _jsx6("button", { className: surface === "menu" ? "cs-tool cs-me is-on" : "cs-tool cs-me", "data-cs-ui": "menu-button", "data-tip": memberName, type: "button", "aria-label": "You", "aria-expanded": surface === "menu", onClick: () => {
-    setConfirmReset(false);
-    setRenaming(null);
-    if (surface !== "menu" && member) {
-      getProfile(session, member).then(setProfile).catch(() => void 0);
-    }
-    setSurface(surface === "menu" ? "none" : "menu");
-  }, children: _jsx6(Avatar, { name: memberName, size: 24 }) })] }) });
-  const unlockCard = _jsxs6("section", { className: "cs-card cs-unlock cs-hit", "data-cs-ui": "panel", "aria-label": "Unlock comments", children: [_jsx6("div", { className: "cs-unlock-icon", children: _jsx6(Lock, { size: 18 }) }), _jsx6("h2", { children: "Comments" }), _jsx6("p", { className: "cs-sub", children: invite ? `${readJwt(invite)?.name ?? "A teammate"} invited you to comment. Add your name and email to join.` : "Enter the team passphrase to see and add comments." }), _jsxs6("form", { onSubmit: (event) => {
-    event.preventDefault();
-    setBusy(true);
-    setError("");
-    loadSession(sessionPath).then((fresh) => {
-      if (!fresh)
-        throw new Error("Comments aren\u2019t enabled here.");
-      setSession(fresh);
-      return unlock(fresh, name, email, invite ? { invite } : { passphrase }).then((token) => ({ fresh, token }));
-    }).then(({ fresh, token }) => {
-      localStorage.setItem(storageKey(fresh), token);
-      setMember(token);
-      setPassphrase("");
-      dropInvite();
-      setTab("page");
-      setSurface("inbox");
-    }).catch((caught) => {
-      if (caught instanceof ApiError && caught.code === "invalid_invite")
-        dropInvite();
-      setError(caught instanceof Error ? caught.message : "Couldn\u2019t unlock.");
-    }).finally(() => setBusy(false));
-  }, children: [_jsxs6("label", { className: "cs-field", children: [_jsx6("span", { children: "Your name" }), _jsx6("input", { "data-cs-ui": "unlock-name", value: name, onChange: (event) => setName(event.target.value), autoComplete: "name", required: true })] }), invite ? null : _jsxs6("label", { className: "cs-field", children: [_jsx6("span", { children: "Passphrase" }), _jsx6("input", { "data-cs-ui": "unlock-passphrase", type: "password", value: passphrase, onChange: (event) => setPassphrase(event.target.value), autoComplete: "current-password", required: true })] }), _jsxs6("label", { className: "cs-field", children: [_jsx6("span", { children: "Email" }), _jsx6("input", { "data-cs-ui": "unlock-email", type: "email", value: email, onChange: (event) => setEmail(event.target.value), autoComplete: "email", required: true }), _jsx6("small", { children: "So teammates can @mention you." })] }), error ? _jsx6("p", { className: "cs-error", "data-cs-ui": "error", children: error }) : null, _jsx6("button", { className: "cs-button is-primary is-wide", "data-cs-ui": "unlock-submit", type: "submit", disabled: busy, children: busy ? "Unlocking\u2026" : invite ? "Join" : "Unlock" })] })] });
-  const menuCard = _jsx6("section", { className: "cs-card cs-menu cs-hit", "data-cs-ui": "menu", "aria-label": "Your comment settings", children: confirmReset ? _jsxs6("div", { className: "cs-confirm", "data-cs-ui": "reset-confirm", children: [_jsx6("h2", { children: "Reset on this device?" }), _jsx6("p", { className: "cs-sub", children: "You\u2019ll be signed out and your name and preferences are cleared. Comments aren\u2019t affected." }), _jsxs6("div", { className: "cs-row-end", children: [_jsx6("button", { className: "cs-button", type: "button", onClick: () => setConfirmReset(false), children: "Cancel" }), _jsx6("button", { className: "cs-button is-danger", "data-cs-ui": "reset-submit", type: "button", onClick: reset, children: "Reset" })] })] }) : _jsxs6(_Fragment3, { children: [_jsxs6("div", { className: "cs-me-row", children: [_jsx6(Avatar, { name: renaming ?? memberName, size: 36 }), renaming != null ? _jsxs6("form", { className: "cs-rename", onSubmit: (event) => {
-    event.preventDefault();
-    const next = renaming.trim();
-    if (!next || next === memberName || !member) {
-      setRenaming(null);
-      return;
-    }
-    setBusy(true);
-    updateProfile(session, member, { displayName: next }).then((updated) => {
-      localStorage.setItem(storageKey(session), updated.token);
-      setMember(updated.token);
-      setProfile(updated);
-      setName(next);
-      setRenaming(null);
-      say("Name updated");
-    }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t rename.")).finally(() => setBusy(false));
-  }, children: [_jsx6("input", { "data-cs-ui": "rename-input", "aria-label": "Your name", value: renaming, maxLength: 40, autoFocus: true, onChange: (event) => setRenaming(event.target.value), onKeyDown: (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      setRenaming(null);
-    }
-  } }), _jsx6("button", { className: "cs-icon-button", type: "submit", "aria-label": "Save name", disabled: busy, children: _jsx6(Check, {}) })] }) : _jsxs6("div", { className: "cs-me-name", children: [_jsxs6("span", { className: "cs-me-lines", children: [_jsx6("strong", { children: memberName }), _jsx6("small", { children: profile?.email ?? readJwt(member ?? "")?.email ?? "" })] }), _jsx6("button", { className: "cs-icon-button", "data-cs-ui": "rename", type: "button", "aria-label": "Change name", onClick: () => {
-    setError("");
-    setRenaming(memberName);
-  }, children: _jsx6(Pencil, {}) })] })] }), error ? _jsx6("p", { className: "cs-error", children: error }) : null, _jsx6("div", { className: "cs-sep" }), _jsxs6("button", { className: "cs-item", type: "button", role: "switch", "aria-checked": !pinsHidden, onClick: togglePins, children: [_jsx6("span", { children: "Show pins" }), _jsx6("span", { className: pinsHidden ? "cs-switch" : "cs-switch is-on" })] }), _jsxs6("button", { className: "cs-item", "data-cs-ui": "mention-emails", type: "button", role: "switch", "aria-checked": profile?.mentionEmails ?? true, disabled: !profile, onClick: () => {
-    if (!member || !profile)
-      return;
-    updateProfile(session, member, { mentionEmails: !profile.mentionEmails }).then((updated) => {
-      localStorage.setItem(storageKey(session), updated.token);
-      setMember(updated.token);
-      setProfile(updated);
-      say(updated.mentionEmails ? "Mention emails on" : "Mention emails off");
-    }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t update."));
-  }, children: [_jsx6("span", { children: "Email me when mentioned" }), _jsx6("span", { className: profile?.mentionEmails ?? true ? "cs-switch is-on" : "cs-switch" })] }), _jsxs6("div", { className: "cs-item is-static", children: [_jsx6("span", { children: "Position" }), _jsx6("span", { className: "cs-segment", role: "radiogroup", "aria-label": "Toolbar position", children: positions.map((option) => _jsx6("button", { type: "button", role: "radio", "aria-checked": barPosition === option.value, className: barPosition === option.value ? "is-on" : "", onClick: () => savePrefs({ ...prefs, position: option.value }), children: option.label }, option.value)) })] }), _jsxs6("button", { className: "cs-item", "data-cs-ui": "settings-open", type: "button", onClick: () => {
-    setError("");
-    setSurface("settings");
-  }, children: [_jsx6("span", { children: "Comment fields" }), _jsx6("span", { className: "cs-hint", children: detailsEnabled(settings) ? "On" : "Off" })] }), _jsx6("div", { className: "cs-sep" }), _jsx6("button", { className: "cs-item", "data-cs-ui": "invite", type: "button", disabled: busy, onClick: () => {
-    if (!member)
-      return;
-    setBusy(true);
-    createInvite(session, member).then(({ invite: code }) => {
-      const link = linkWith(pageHref(), "cs-invite", code);
-      setInviteLink(link);
-      return navigator.clipboard.writeText(link).then(() => say("Invite link copied")).catch(() => say("Invite link ready"));
-    }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t create an invite.")).finally(() => setBusy(false));
-  }, children: _jsx6("span", { children: "Invite someone" }) }), inviteLink ? _jsxs6("div", { className: "cs-invite", children: [_jsx6("input", { "data-cs-ui": "invite-link", "aria-label": "Invite link", readOnly: true, value: inviteLink, onFocus: (event) => event.currentTarget.select() }), _jsx6("p", { className: "cs-hint", children: "Anyone with this link can join for 7 days. Changing the passphrase cancels it." })] }) : null, _jsx6("button", { className: "cs-item", "data-cs-ui": "lock", type: "button", onClick: lock, children: _jsx6("span", { children: "Lock" }) }), _jsx6("button", { className: "cs-item is-danger", "data-cs-ui": "reset", type: "button", onClick: () => setConfirmReset(true), children: _jsx6("span", { children: "Reset on this device\u2026" }) }), _jsx6("p", { className: "cs-hint", children: "C comment \xB7 I list \xB7 H pins" })] }) });
-  const tabsBar = _jsx6("div", { className: "cs-tabs", role: "tablist", children: [
-    ["page", "This page", counts.page, "scope-page"],
-    ["all", "All pages", counts.all, "scope-all"],
-    ["resolved", "Resolved", counts.resolved, "scope-resolved"]
-  ].map(([value, label, count, hook]) => _jsxs6("button", { type: "button", role: "tab", "aria-selected": tab === value, "data-cs-ui": hook, className: tab === value ? "is-on" : "", onClick: () => setTab(value), children: [label, count > 0 ? _jsx6("span", { className: "cs-count", children: count }) : null] }, value)) });
-  const setViewPref = (next) => {
-    setView(next);
-    savePrefs({ ...prefs, view: next });
-  };
-  const table = _jsx6(CommentTable, { rows: listed, route, activeId, tabs: tabsBar, onList: () => setViewPref("list"), onClose: () => setSurface("none"), onSelect: (row) => {
-    setView("list");
-    const item = placed.find((candidate) => candidate.thread.id === row.thread.id);
-    if (item)
-      select(item, true);
-  } });
-  const inbox = _jsxs6("section", { className: "cs-card cs-sheet cs-hit", "data-cs-ui": "panel", "aria-label": "Comments", children: [_jsxs6("header", { className: "cs-sheet-head", children: [_jsx6("h2", { children: "Comments" }), _jsx6("button", { className: "cs-icon-button cs-push", "data-cs-ui": "table-view", type: "button", "aria-label": "Table view", onClick: () => setViewPref("table"), children: _jsx6(Table, {}) }), _jsx6("button", { className: "cs-icon-button", type: "button", "aria-label": "Close comments", onClick: () => setSurface("none"), children: _jsx6(Close, {}) })] }), tabsBar, error ? _jsx6("p", { className: "cs-error cs-pad", "data-cs-ui": "error", children: error }) : null, _jsxs6("div", { className: "cs-list", children: [listed.length === 0 ? _jsxs6("div", { className: "cs-empty", children: [_jsx6("p", { children: tab === "resolved" ? "Nothing resolved yet." : tab === "page" ? "No comments on this page." : "No open comments." }), tab !== "resolved" ? _jsxs6("button", { className: "cs-button", type: "button", onClick: startComment, children: [_jsx6(AddComment, {}), " Add a comment"] }) : null] }) : null, groups.map((group) => _jsxs6("div", { children: [group.route ? _jsx6("div", { className: "cs-group", children: group.route === route ? "This page" : group.route }) : null, group.items.map((item) => {
-    const { thread } = item;
-    const expanded = activeId === thread.id;
-    const first = thread.messages[0];
-    const note = statusNote(item.status, thread.anchor, thread.route === route);
-    const onPage = item.status === "pinned" || item.status === "drifted";
-    return _jsxs6("article", { className: expanded ? "cs-thread is-open" : "cs-thread", "data-cs-ui": "thread", "data-thread-id": thread.id, "data-cs-status": item.status, children: [_jsxs6("div", { className: "cs-thread-main", role: "button", tabIndex: 0, "aria-expanded": expanded, "aria-label": `${thread.createdBy}: ${first?.body ?? ""}`, onClick: () => select(item), onKeyDown: (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        select(item);
-      }
-    }, onMouseEnter: () => setPeekId(null), children: [_jsx6(Avatar, { name: thread.createdBy }), _jsxs6("div", { className: "cs-thread-body", children: [_jsxs6("div", { className: "cs-meta", children: [_jsx6("strong", { children: thread.createdBy }), _jsx6("time", { dateTime: thread.createdAt, children: ago(thread.createdAt) }), _jsx6(RoleBadge, { role: thread.role })] }), first?.body ? _jsx6("p", { className: "cs-text", children: _jsx6(MessageText, { body: first.body, mentions: first.mentions }) }) : null, _jsx6(FieldValues, { fields: thread.fields, clamp: !expanded }), _jsx6(MessageAttachments, { attachments: first?.attachments }), first && deliveryText(deliveries[first.id]) ? _jsx6("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[first.id]) }) : null, _jsxs6("div", { className: "cs-target", children: [_jsx6("span", { title: thread.anchor.component?.file ?? void 0, children: targetName(thread.anchor) }), note ? _jsx6("span", { className: `cs-note is-${note.tone}`, children: note.text }) : null] }), !expanded && thread.messages.length > 1 ? _jsxs6("div", { className: "cs-replies", children: [thread.messages.length - 1, " ", thread.messages.length === 2 ? "reply" : "replies"] }) : null] })] }), expanded ? _jsxs6("div", { className: "cs-thread-more", children: [editingId === thread.id && settings ? _jsx6(DetailsEditor, { settings, thread, onClose: () => setEditingId(null), onSave: (patch) => updateThread(session, member, thread.id, patch).then(() => refresh()).then(() => say("Details saved")).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t save.")) }) : null, thread.messages.slice(1).map((message) => _jsxs6("div", { className: "cs-message", children: [_jsx6(Avatar, { name: message.author, size: 20 }), _jsxs6("div", { children: [_jsxs6("div", { className: "cs-meta", children: [_jsx6("strong", { children: message.author }), _jsx6("time", { dateTime: message.createdAt, children: ago(message.createdAt) })] }), _jsx6("p", { className: "cs-text", children: _jsx6(MessageText, { body: message.body, mentions: message.mentions }) }), _jsx6(MessageAttachments, { attachments: message.attachments }), deliveryText(deliveries[message.id]) ? _jsx6("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[message.id]) }) : null] })] }, message.id)), _jsxs6("form", { className: "cs-reply", onSubmit: async (event) => {
-      event.preventDefault();
-      if (!member || !reply.trim() && !replyFiles.ids.length || replyFiles.uploading)
-        return;
-      setBusy(true);
-      const picked = mentionsIn(reply, replyPicked.current);
-      const element = thread.route === route ? resolveInDocument(thread.anchor, route).element : null;
-      const screenshot = picked.length && element ? await (replyShot.current ?? captureAround(element)).catch(() => null) : null;
-      replyToThread(session, member, thread.id, reply, {
-        mentions: picked.map((person) => person.id),
-        screenshot,
-        attachments: replyFiles.ids
-      }).then(async (result) => {
-        setReply("");
-        replyFiles.reset();
-        setError("");
-        replyPicked.current = /* @__PURE__ */ new Map();
-        replyShot.current = null;
-        if (result.delivery) {
-          setDeliveries((current) => ({ ...current, [result.message.id]: result.delivery }));
-          const note2 = deliveryText(result.delivery);
-          if (note2)
-            say(note2);
-        }
-        await refresh();
-      }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t reply.")).finally(() => setBusy(false));
-    }, children: [_jsx6(MentionTextarea, { "data-cs-ui": "reply-body", "aria-label": "Reply", placeholder: "Reply\u2026 (@ to mention)", rows: 1, value: reply, onValueChange: setReply, members, selfEmail: readJwt(member ?? "")?.email, onMention: (person) => {
-      replyPicked.current.set(person.id, person);
-      const element = thread.route === route ? resolveInDocument(thread.anchor, route).element : null;
-      if (element && !replyShot.current)
-        replyShot.current = captureAround(element);
-    }, onKeyDown: submitOnCmdEnter, onPaste: (event) => {
-      const files = filesFromClipboard(event);
-      if (files.length) {
-        event.preventDefault();
-        replyFiles.add(files);
-      }
-    } }), _jsx6(AttachButtons, { onFiles: replyFiles.add, capturing, onSnapshot: () => snapshot(thread.route === route ? resolveInDocument(thread.anchor, route).element : null, replyFiles.add) }), _jsx6("button", { className: "cs-send", "data-cs-ui": "reply-submit", type: "submit", "aria-label": "Post reply", disabled: busy || replyFiles.uploading || !reply.trim() && !replyFiles.ids.length, children: _jsx6(Send, {}) })] }), _jsx6(AttachmentTray, { items: replyFiles.items, onRemove: replyFiles.remove }), _jsxs6("div", { className: "cs-actions", children: [_jsxs6("button", { className: "cs-button", "data-cs-ui": "resolve", type: "button", onClick: () => {
-      if (!member)
-        return;
-      const next = thread.status === "resolved" ? "open" : "resolved";
-      updateThread(session, member, thread.id, { status: next }).then(() => refresh()).then(() => say(next === "resolved" ? "Resolved" : "Reopened")).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t update."));
-    }, children: [thread.status === "resolved" ? _jsx6(Undo, {}) : _jsx6(Check, {}), thread.status === "resolved" ? "Reopen" : "Resolve"] }), onPage && thread.status === "open" ? _jsxs6("button", { className: "cs-button", type: "button", onClick: () => showOnPage(thread), children: [_jsx6(Target, {}), " Show"] }) : null, detailsEnabled(settings) && editingId !== thread.id ? _jsxs6("button", { className: "cs-button", "data-cs-ui": "details-edit", type: "button", onClick: () => setEditingId(thread.id), children: [_jsx6(Pencil, {}), " Details"] }) : null, !onPage && thread.status === "open" && thread.route === route ? _jsxs6("button", { className: "cs-button", "data-cs-ui": "reattach", type: "button", onClick: () => {
-      setReattachId(thread.id);
-      setMode("reattach");
-      setSurface("none");
-    }, children: [_jsx6(Relink, {}), " Reattach"] }) : null] })] }) : null] }, thread.id);
-  })] }, group.route ?? "all"))] })] });
-  const ui = _jsxs6("div", { id: "cs-root", className: [
-    inside ? "cs-inside" : "cs-fixed",
-    `cs-at-${barPosition.replace("bottom-", "")}`,
-    theme === "dark" || theme === "system" && systemDark ? "cs-dark" : ""
-  ].join(" "), children: [highlight ? _jsxs6(_Fragment3, { children: [_jsx6("div", { className: "cs-outline", style: { top: highlight.top, left: highlight.left, width: highlight.width, height: highlight.height } }), _jsx6("div", { className: "cs-outline-label", style: { top: Math.max(4, highlight.top - 26), left: highlight.left }, children: highlight.label })] }) : null, flash ? _jsx6("div", { className: "cs-outline is-flash", style: { top: flash.top, left: flash.left, width: flash.width, height: flash.height } }) : null, mode !== "browse" ? _jsxs6("div", { className: "cs-banner cs-hit", "data-cs-ui": "mode", children: [_jsx6(Cursor, {}), _jsx6("span", { children: mode === "reattach" ? "Click the element this comment belongs to" : "Click anything to comment" }), _jsx6("button", { type: "button", onClick: () => {
-    setMode("browse");
-    setReattachId(null);
-  }, children: "Cancel" })] }) : null, pinsHidden ? null : placed.map((item) => item.top == null || item.left == null || item.status !== "pinned" && item.status !== "drifted" ? null : _jsxs6("button", { type: "button", className: [
-    "cs-pin",
-    item.status === "drifted" ? "is-drifted" : "",
-    activeId === item.thread.id && surface === "inbox" ? "is-active" : ""
-  ].join(" "), "data-cs-ui": "pin", "data-thread-id": item.thread.id, "data-cs-status": item.status, "aria-label": `Comment by ${item.thread.createdBy}`, style: { top: item.top >= 0 && item.top < 16 ? 16 : item.top, left: item.left }, onMouseEnter: () => setPeekId(item.thread.id), onMouseLeave: () => setPeekId(null), onClick: () => {
-    setPeekId(null);
-    setTab("page");
-    setActiveId(item.thread.id);
-    setSurface("inbox");
-  }, children: [_jsx6(Avatar, { name: item.thread.createdBy, size: 22 }), item.thread.messages.length > 1 ? _jsx6("span", { className: "cs-pin-count", children: item.thread.messages.length }) : null] }, item.thread.id)), peek && !pinsHidden && peek.top != null && peek.left != null ? _jsxs6("div", { className: "cs-peek", style: { top: peek.top + 18, left: Math.max(8, peek.left - 12) }, children: [_jsxs6("div", { className: "cs-meta", children: [_jsx6(Avatar, { name: peek.thread.createdBy, size: 18 }), _jsx6("strong", { children: peek.thread.createdBy }), _jsx6("time", { children: ago(peek.thread.createdAt) })] }), _jsx6("p", { className: "cs-text", children: _jsx6(MessageText, { body: peek.thread.messages[0]?.body ?? "", mentions: peek.thread.messages[0]?.mentions }) }), peek.thread.messages.length > 1 ? _jsxs6("div", { className: "cs-replies", children: [peek.thread.messages.length - 1, " ", peek.thread.messages.length === 2 ? "reply" : "replies"] }) : null] }) : null, draft ? _jsxs6("form", { className: "cs-card cs-composer cs-hit", "data-cs-ui": "composer", style: { top: draft.top, left: draft.left }, onSubmit: async (event) => {
-    event.preventDefault();
-    if (!member || !canPost || draftFiles.uploading)
-      return;
-    setBusy(true);
-    const picked = mentionsIn(body, draftPicked.current);
-    const screenshot = picked.length ? await (draftShot.current ?? captureAround(draft.element)).catch(() => null) : null;
-    createThread(session, member, draft.anchor, body, {
-      mentions: picked.map((person) => person.id),
-      screenshot,
-      attachments: draftFiles.ids,
-      url: pageHref(),
-      ...detailsPayload(settings, draftDetails)
-    }).then(async ({ thread, delivery }) => {
-      setDraft(null);
-      setBody("");
-      setDraftDetails(noDetails);
-      draftFiles.reset();
-      setError("");
-      draftPicked.current = /* @__PURE__ */ new Map();
-      draftShot.current = null;
-      const firstId = thread.messages[0]?.id;
-      if (delivery && firstId) {
-        setDeliveries((current) => ({ ...current, [firstId]: delivery }));
-        const note = deliveryText(delivery);
-        if (note)
-          say(note);
-      }
-      setActiveId(thread.id);
-      if (tab === "resolved")
-        setTab("page");
-      setSurface("inbox");
-      await refresh();
-    }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t post.")).finally(() => setBusy(false));
-  }, children: [_jsxs6("div", { className: "cs-composer-target", children: [_jsx6(Target, {}), _jsx6("span", { className: "cs-composer-name", children: targetName(draft.anchor) }), draft.anchor.component?.file ? _jsx6("code", { children: draft.anchor.component.file }) : null, _jsx6("button", { className: "cs-icon-button", type: "button", "aria-label": "Discard", onClick: () => setDraft(null), children: _jsx6(Close, {}) })] }), _jsxs6("div", { className: "cs-composer-body", children: [_jsx6(Avatar, { name: memberName, size: 24 }), _jsx6(MentionTextarea, { "data-cs-ui": "composer-body", "aria-label": "Comment", placeholder: "Add a comment\u2026 (@ to mention)", value: body, autoFocus: true, onValueChange: setBody, members, selfEmail: readJwt(member ?? "")?.email, onMention: (person) => {
-    draftPicked.current.set(person.id, person);
-    if (!draftShot.current)
-      draftShot.current = captureAround(draft.element);
-  }, onKeyDown: submitOnCmdEnter, onPaste: (event) => {
-    const files = filesFromClipboard(event);
-    if (files.length) {
-      event.preventDefault();
-      draftFiles.add(files);
-    }
-  } })] }), _jsx6(DetailsInput, { settings, value: draftDetails, onChange: setDraftDetails, onKeyDown: submitOnCmdEnter }), _jsx6(AttachmentTray, { items: draftFiles.items, onRemove: draftFiles.remove }), error ? _jsx6("p", { className: "cs-error cs-pad", children: error }) : null, _jsxs6("div", { className: "cs-composer-foot", children: [_jsx6(AttachButtons, { onFiles: draftFiles.add, capturing, onSnapshot: () => snapshot(draft.element, draftFiles.add) }), _jsx6("span", { className: "cs-hint", children: capturing ? "Capturing\u2026" : draftFiles.uploading ? "Uploading\u2026" : busy ? "Posting\u2026" : "\u2318\u21B5 to post" }), _jsx6("button", { className: "cs-send", "data-cs-ui": "composer-submit", type: "submit", "aria-label": "Post comment", disabled: busy || draftFiles.uploading || !canPost, children: _jsx6(Send, {}) })] })] }) : null, surface === "unlock" && !member ? unlockCard : null, surface === "menu" && member ? menuCard : null, surface === "settings" && member ? _jsx6(SettingsPanel, { settings, onChange: changeSettings, onBack: () => setSurface("menu"), error }) : null, surface === "inbox" && member ? view === "table" ? table : inbox : null, toast ? _jsx6("div", { className: "cs-toast", role: "status", children: toast }) : null, bar] });
-  return createPortal2(ui, host);
+  }, [sessionPath, source]);
+  useEffect(() => {
+    handle.current?.update(props.current);
+  }, [pollMs, position, theme, hasNavigate]);
+  return null;
 }
 export {
   CommentToolbar