overplay 4.0.0

package/dist/overplay.esm.js

@@ -0,0 +1,3907 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
+var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
+function record(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) throw new Error("Invalid comment data.");
+  return value;
+}
+function string(value, field) {
+  if (typeof value !== "string" || !value.trim()) throw new Error(`Invalid ${field}.`);
+  return value;
+}
+function date(value) {
+  const result = new Date(value);
+  if (!Number.isFinite(result.getTime())) throw new Error("Invalid comment date.");
+  return result;
+}
+function reply(value) {
+  const r = record(value);
+  return {
+    id: string(r.id, "reply ID"),
+    text: string(r.text, "reply text"),
+    author: string(r.author, "author"),
+    authorId: typeof r.authorId === "string" ? r.authorId : void 0,
+    via: typeof r.via === "string" ? r.via.slice(0, 60) : void 0,
+    avatarUrl: typeof r.avatarUrl === "string" ? r.avatarUrl : void 0,
+    timestamp: date(r.timestamp),
+    commentId: string(r.commentId, "comment ID")
+  };
+}
+function revealSteps(value) {
+  if (!Array.isArray(value)) return {};
+  const short = (v, max) => typeof v === "string" && v.trim() ? v.trim().slice(0, max) : void 0;
+  const steps = value.slice(0, 6).flatMap((step) => {
+    const s = step && typeof step === "object" ? step : {};
+    const t = s.target && typeof s.target === "object" ? s.target : {};
+    const selector = short(t.selector, 500);
+    if (!["press", "hover", "focus"].includes(s.action) || !selector) return [];
+    const role = short(t.role, 40), name = short(t.name, 120), tag = short(t.tag, 40);
+    return [{ action: s.action, target: { selector, ...role ? { role } : {}, ...name ? { name } : {}, ...tag ? { tag } : {} } }];
+  });
+  return steps.length ? { reveal: steps } : {};
+}
+function normalizeComments(value) {
+  if (!Array.isArray(value)) throw new Error("Expected a list of comments.");
+  return value.map((value2) => {
+    const c = record(value2);
+    if (typeof c.x !== "number" || typeof c.y !== "number" || !Number.isFinite(c.x) || !Number.isFinite(c.y)) {
+      throw new Error("Invalid comment position.");
+    }
+    const anchor = c.anchor ? record(c.anchor) : null;
+    const info = c.element && typeof c.element === "object" ? c.element : null;
+    const text = (v) => typeof v === "string" && v.trim() ? v.trim().slice(0, 120) : void 0;
+    return {
+      id: string(c.id, "comment ID"),
+      text: string(c.text, "comment text"),
+      author: string(c.author, "author"),
+      authorId: typeof c.authorId === "string" ? c.authorId : void 0,
+      via: typeof c.via === "string" ? c.via.slice(0, 60) : void 0,
+      revision: typeof c.revision === "number" ? c.revision : void 0,
+      updatedAt: typeof c.updatedAt === "string" ? c.updatedAt : void 0,
+      avatarUrl: typeof c.avatarUrl === "string" ? c.avatarUrl : void 0,
+      timestamp: date(c.timestamp),
+      x: c.x,
+      y: c.y,
+      resolved: c.resolved === true,
+      pageUrl: string(c.pageUrl, "page URL"),
+      pageTitle: typeof c.pageTitle === "string" && c.pageTitle.trim() ? c.pageTitle.trim().slice(0, 300) : void 0,
+      replies: Array.isArray(c.replies) ? c.replies.map(reply) : [],
+      selector: typeof c.selector === "string" ? c.selector : void 0,
+      element: info && text(info.label) ? { label: text(info.label), ...text(info.place) ? { place: text(info.place) } : {}, ...revealSteps(info.reveal) } : void 0,
+      anchor: anchor && typeof anchor.x === "number" && typeof anchor.y === "number" && Number.isFinite(anchor.x) && Number.isFinite(anchor.y) ? { x: Math.max(0, Math.min(1, anchor.x)), y: Math.max(0, Math.min(1, anchor.y)) } : void 0
+    };
+  });
+}
+function copyComments(comments) {
+  return normalizeComments(comments);
+}
+function safePageUrl(path, base) {
+  const url = new URL(path, base);
+  if (!["http:", "https:"].includes(url.protocol) || url.origin !== new URL(base).origin) {
+    throw new Error("Comments can only link to pages on this site.");
+  }
+  return url;
+}
+function withoutCommentLink(search) {
+  const parts = search.replace(/^\?/, "").split("&").filter((part) => {
+    try {
+      return decodeURIComponent(part.split("=")[0].replace(/\+/g, " ")) !== "cw_comment";
+    } catch {
+      return true;
+    }
+  });
+  const value = parts.join("&");
+  return value ? "?" + value : "";
+}
+function defaultPageId(location2) {
+  return `${location2.pathname}${withoutCommentLink(location2.search)}${/^#!?\//.test(location2.hash) ? location2.hash : ""}`;
+}
+function samePage(pageUrl, pageId) {
+  return pageUrl === pageId || pageUrl.replace(/#(?!!?\/).*$/, "") === pageId;
+}
+const MOVED_SERVICES = {
+  "comments.artsvit.com": "https://overplay.app"
+};
+function serviceOrigin(origin) {
+  return MOVED_SERVICES[new URL(origin).hostname] ?? origin;
+}
+class HostedAdapter {
+  constructor(serverUrl, projectId, page, sessionChanged) {
+    __publicField(this, "base");
+    __publicField(this, "key");
+    __publicField(this, "accessToken", "");
+    __publicField(this, "expiresAt", 0);
+    __publicField(this, "initialized", false);
+    __publicField(this, "pending");
+    __publicField(this, "cancelSignIn");
+    __publicField(this, "user");
+    this.projectId = projectId;
+    this.page = page;
+    this.sessionChanged = sessionChanged;
+    const url = new URL(serverUrl);
+    if (url.protocol !== "https:" && !(url.protocol === "http:" && ["localhost", "127.0.0.1"].includes(url.hostname)))
+      throw new Error("serverUrl must use HTTPS.");
+    if (url.username || url.password || url.search || url.hash || url.pathname !== "/")
+      throw new Error("serverUrl must be a service origin without a path.");
+    this.base = serviceOrigin(url.origin);
+    this.key = `overplay:${this.base}:${projectId}:session`;
+    try {
+      const saved = JSON.parse(sessionStorage.getItem(this.key) || "null");
+      if ((saved == null ? void 0 : saved.expiresAt) > Date.now()) {
+        this.accessToken = saved.accessToken;
+        this.expiresAt = saved.expiresAt;
+      }
+    } catch {
+    }
+  }
+  get signedIn() {
+    return !!this.user && this.expiresAt > Date.now();
+  }
+  clear() {
+    this.accessToken = "";
+    this.expiresAt = 0;
+    this.user = void 0;
+    try {
+      sessionStorage.removeItem(this.key);
+    } catch {
+    }
+    this.sessionChanged();
+  }
+  async request(path, method = "GET", body) {
+    const url = new URL(`/api${path}`, this.base);
+    url.searchParams.set("projectId", this.projectId);
+    const response = await fetch(url, {
+      method,
+      credentials: "omit",
+      headers: {
+        ...body !== void 0 ? { "Content-Type": "application/json" } : {},
+        ...this.accessToken ? { Authorization: `Bearer ${this.accessToken}` } : {}
+      },
+      body: body === void 0 ? void 0 : JSON.stringify(body)
+    });
+    const result = await response.json().catch(() => null);
+    if (!response.ok) {
+      if (response.status === 401 || response.status === 403 && method === "GET")
+        this.clear();
+      throw new Error(
+        (result == null ? void 0 : result.error) || `Comment service returned ${response.status}.`
+      );
+    }
+    if (result === null)
+      throw new Error("Comment service returned an invalid response.");
+    return result;
+  }
+  async initialize() {
+    if (this.initialized) return;
+    this.initialized = true;
+    if (!this.accessToken) return;
+    try {
+      this.user = (await this.request("/me")).user;
+      this.sessionChanged(this.user);
+    } catch (error) {
+      if (this.accessToken) this.initialized = false;
+      throw error;
+    }
+  }
+  signIn() {
+    if (this.pending) return this.pending;
+    const popup = window.open(
+      "about:blank",
+      `overplay-${this.projectId}`,
+      "popup,width=520,height=760"
+    );
+    if (!popup)
+      return Promise.reject(
+        new Error("Allow popups to sign in to Overplay.")
+      );
+    this.pending = new Promise((resolve, reject) => {
+      let done = false;
+      const finish = (error) => {
+        if (done) return;
+        done = true;
+        window.removeEventListener("message", receive);
+        clearInterval(closed);
+        clearTimeout(timeout);
+        popup.close();
+        this.pending = void 0;
+        this.cancelSignIn = void 0;
+        if (error) reject(error);
+        else resolve();
+      };
+      const verifier = Array.from(
+        crypto.getRandomValues(new Uint8Array(32)),
+        (b) => b.toString(16).padStart(2, "0")
+      ).join("");
+      let exchanging = false;
+      const receive = (event) => {
+        var _a;
+        if (exchanging || event.origin !== this.base || event.source !== popup || ((_a = event.data) == null ? void 0 : _a.type) !== "overplay:authorization" || event.data.projectId !== this.projectId || typeof event.data.code !== "string")
+          return;
+        exchanging = true;
+        void (async () => {
+          const result = await this.request("/connect/token", "POST", {
+            code: event.data.code,
+            verifier
+          });
+          if (done) return;
+          this.accessToken = result.accessToken;
+          this.expiresAt = result.expiresAt;
+          this.user = (await this.request("/me")).user;
+          if (done) {
+            this.clear();
+            return;
+          }
+          this.initialized = true;
+          try {
+            sessionStorage.setItem(
+              this.key,
+              JSON.stringify({
+                accessToken: this.accessToken,
+                expiresAt: this.expiresAt
+              })
+            );
+          } catch {
+          }
+          this.sessionChanged(this.user);
+          finish();
+        })().catch((e) => {
+          this.clear();
+          finish(e instanceof Error ? e : new Error("Sign-in failed."));
+        });
+      };
+      const closed = setInterval(() => {
+        if (popup.closed && !exchanging)
+          finish(new Error("Sign-in window was closed."));
+      }, 750);
+      const timeout = setTimeout(
+        () => finish(new Error("Sign-in timed out. Please try again.")),
+        5 * 6e4
+      );
+      this.cancelSignIn = () => finish(new Error("Widget was closed."));
+      window.addEventListener("message", receive);
+      void crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier)).then((hash) => {
+        if (done) return;
+        const encoded = btoa(String.fromCharCode(...new Uint8Array(hash))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+        const url = new URL("/connect", this.base);
+        url.search = new URLSearchParams({
+          projectId: this.projectId,
+          origin: location.origin,
+          challenge: encoded
+        }).toString();
+        popup.location.href = url.href;
+      }).catch(() => finish(new Error("Secure sign-in is unavailable.")));
+    });
+    return this.pending;
+  }
+  async signOut() {
+    try {
+      if (this.accessToken) await this.request("/connect/logout", "POST", {});
+    } finally {
+      this.clear();
+    }
+  }
+  destroy() {
+    var _a;
+    (_a = this.cancelSignIn) == null ? void 0 : _a.call(this);
+  }
+  async loadComments() {
+    await this.initialize();
+    if (this.expiresAt && this.expiresAt <= Date.now()) this.clear();
+    if (!this.signedIn) return [];
+    const sessionToken = this.accessToken;
+    const comments = [];
+    let after = "";
+    do {
+      const query = new URLSearchParams({ after });
+      const page = await this.request(`/comments?${query}`);
+      comments.push(...page.comments);
+      after = page.next || "";
+    } while (after);
+    return sessionToken === this.accessToken && this.signedIn ? normalizeComments(comments) : [];
+  }
+  subscribeToChanges(callback) {
+    let running = false;
+    let stopped = false;
+    const poll = async () => {
+      if (stopped || running || document.visibilityState === "hidden" || !this.user)
+        return;
+      running = true;
+      const pageId = this.page();
+      const sessionToken = this.accessToken;
+      try {
+        const comments = await this.loadComments();
+        if (!stopped && this.signedIn && sessionToken === this.accessToken && pageId === this.page())
+          callback(comments);
+      } catch {
+      } finally {
+        running = false;
+      }
+    };
+    const interval = setInterval(() => {
+      void poll();
+    }, 3e4);
+    const visible = () => {
+      if (document.visibilityState === "visible") void poll();
+    };
+    document.addEventListener("visibilitychange", visible);
+    return () => {
+      stopped = true;
+      clearInterval(interval);
+      document.removeEventListener("visibilitychange", visible);
+    };
+  }
+  async saveComments() {
+    throw new Error("Hosted storage requires individual comment mutations.");
+  }
+  async upsertComment(comment) {
+    await this.request(
+      `/comments/${encodeURIComponent(comment.id)}`,
+      "PUT",
+      comment
+    );
+  }
+  async deleteComment(id) {
+    await this.request(`/comments/${encodeURIComponent(id)}`, "DELETE");
+  }
+  async addReply(id, reply2) {
+    await this.request(
+      `/comments/${encodeURIComponent(id)}/replies`,
+      "POST",
+      reply2
+    );
+  }
+  async setResolved(id, resolved) {
+    await this.request(`/comments/${encodeURIComponent(id)}`, "PATCH", {
+      resolved
+    });
+  }
+}
+class LocalStorageAdapter {
+  constructor(storageKey = "overplay-comments") {
+    this.storageKey = storageKey;
+  }
+  async loadComments() {
+    const value = localStorage.getItem(this.storageKey);
+    return value === null ? [] : normalizeComments(JSON.parse(value));
+  }
+  async saveComments(comments) {
+    localStorage.setItem(this.storageKey, JSON.stringify(comments));
+  }
+  async upsertComment(comment) {
+    await this.change((comments) => [...comments.filter((c) => c.id !== comment.id), comment]);
+  }
+  async deleteComment(id) {
+    await this.change((comments) => comments.filter((c) => c.id !== id));
+  }
+  async addReply(id, reply2) {
+    await this.change((comments) => {
+      if (!comments.some((c) => c.id === id)) throw new Error("This comment was removed. Refresh to see the latest notes.");
+      return comments.map((c) => c.id === id && !c.replies.some((r) => r.id === reply2.id) ? { ...c, replies: [...c.replies, reply2] } : c);
+    });
+  }
+  async setResolved(id, resolved) {
+    await this.change((comments) => {
+      if (!comments.some((c) => c.id === id)) throw new Error("This comment was removed. Refresh to see the latest notes.");
+      return comments.map((c) => c.id === id ? { ...c, resolved } : c);
+    });
+  }
+  async change(update) {
+    const write = async () => this.saveComments(update(await this.loadComments()));
+    if (typeof navigator !== "undefined" && navigator.locks) {
+      await navigator.locks.request(`overplay:${this.storageKey}`, write);
+    } else await write();
+  }
+  subscribeToChanges(callback) {
+    const listener = (event) => {
+      if (event.storageArea !== localStorage || event.key !== this.storageKey && event.key !== null) return;
+      void this.loadComments().then(callback).catch(() => {
+      });
+    };
+    window.addEventListener("storage", listener);
+    return () => window.removeEventListener("storage", listener);
+  }
+}
+function parseShortcut(value) {
+  const parts = value.toLowerCase().split("+").map((part) => part.trim());
+  const key2 = parts.pop();
+  if (!key2) return null;
+  const shortcut = { key: key2, alt: false, shift: false, ctrl: false, meta: false };
+  for (const part of parts) {
+    if (part === "alt" || part === "option") shortcut.alt = true;
+    else if (part === "shift") shortcut.shift = true;
+    else if (part === "ctrl" || part === "control") shortcut.ctrl = true;
+    else if (part === "meta" || part === "cmd") shortcut.meta = true;
+    else return null;
+  }
+  return shortcut;
+}
+function matchesShortcut(event, shortcut) {
+  if (event.altKey !== shortcut.alt || event.ctrlKey !== shortcut.ctrl || event.metaKey !== shortcut.meta) return false;
+  if (shortcut.shift && !event.shiftKey) return false;
+  const code = /^[a-z]$/.test(shortcut.key) ? `Key${shortcut.key.toUpperCase()}` : /^\d$/.test(shortcut.key) ? `Digit${shortcut.key}` : "";
+  return event.key.toLowerCase() === shortcut.key || !!code && event.code === code;
+}
+function newId() {
+  if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+  bytes[6] = bytes[6] & 15 | 64;
+  bytes[8] = bytes[8] & 63 | 128;
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+function validateUser(user) {
+  if (!user || typeof user.id !== "string" || !user.id.trim() || typeof user.name !== "string" || !user.name.trim()) {
+    throw new Error("A user needs a stable ID and a name.");
+  }
+  const role = user.role === "owner" || user.role === "admin" || user.role === "member" ? { role: user.role } : {};
+  return { id: user.id.trim(), name: user.name.trim().slice(0, 80), avatarUrl: user.avatarUrl, ...role };
+}
+function guestIdentity(key2) {
+  let saved;
+  try {
+    const value = localStorage.getItem(key2);
+    if (value) saved = validateUser(JSON.parse(value));
+  } catch {
+  }
+  const user = saved ?? { id: newId(), name: "Guest" };
+  return { user, persistent: saveGuest(key2, user) };
+}
+function saveGuest(key2, user) {
+  try {
+    localStorage.setItem(key2, JSON.stringify(user));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function newActivity(comments, seen, selfId) {
+  const found = [];
+  const visit = (key2, kind, commentId, item) => {
+    if (seen.has(key2)) return;
+    seen.add(key2);
+    if (item.authorId !== selfId) found.push({ kind, commentId, author: item.author, avatarUrl: item.avatarUrl, text: item.text });
+  };
+  for (const comment of comments) {
+    visit(comment.id, "comment", comment.id, comment);
+    for (const reply2 of comment.replies) visit(`${comment.id}/${reply2.id}`, "reply", comment.id, reply2);
+  }
+  return found;
+}
+function sameComments(a, b) {
+  return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
+}
+const version = "4.0.0";
+const VERSION = version;
+const PACKAGE = "overplay";
+const UPDATE_COMMAND = `npm install ${PACKAGE}@latest`;
+function isNewer(latest, current) {
+  const parse = (v) => {
+    var _a;
+    return (_a = /^(\d+)\.(\d+)\.(\d+)$/.exec(v.trim())) == null ? void 0 : _a.slice(1).map(Number);
+  };
+  const a = parse(latest), b = parse(current);
+  if (!a || !b) return false;
+  for (let i = 0; i < 3; i++) if (a[i] !== b[i]) return a[i] > b[i];
+  return false;
+}
+function developmentHost(hostname) {
+  return ["localhost", "127.0.0.1", "[::1]", "::1"].includes(hostname) || /\.(localhost|local|test)$/.test(hostname);
+}
+const CACHE_MS = 12 * 60 * 60 * 1e3;
+async function latestVersion(fetcher = fetch, now = Date.now()) {
+  const key2 = "overplay:latest-version";
+  try {
+    const cached = JSON.parse(localStorage.getItem(key2) || "null");
+    if (cached && typeof cached.version === "string" && now - cached.checkedAt < CACHE_MS) return cached.version;
+  } catch {
+  }
+  try {
+    const response = await fetcher(`https://registry.npmjs.org/${PACKAGE}/latest`, { credentials: "omit", referrerPolicy: "no-referrer" });
+    if (!response.ok) return null;
+    const result = await response.json();
+    if (typeof result.version !== "string") return null;
+    try {
+      localStorage.setItem(key2, JSON.stringify({ version: result.version, checkedAt: now }));
+    } catch {
+    }
+    return result.version;
+  } catch {
+    return null;
+  }
+}
+const PIN_COLORS = {
+  indigo: { label: "Indigo", color: "#575ce5" },
+  violet: { label: "Violet", color: "#8048d8" },
+  blue: { label: "Blue", color: "#0068f9" },
+  teal: { label: "Teal", color: "#0f8a8c" },
+  amber: { label: "Amber", color: "#b97a06" },
+  orange: { label: "Orange", color: "#d9641e" },
+  red: { label: "Red", color: "#d23c3c" },
+  pink: { label: "Pink", color: "#d0427f" },
+  graphite: { label: "Graphite", color: "#242736" }
+};
+const CHOICES = {
+  theme: ["light", "dark", "system"],
+  pinColor: ["site", "indigo", "violet", "blue", "teal", "amber", "orange", "red", "pink", "graphite"],
+  buttonColor: ["default", "site", "indigo", "violet", "blue", "teal", "amber", "orange", "red", "pink"],
+  resolvedPins: ["green", "gray"],
+  pinSize: ["regular", "small"],
+  pinLabel: ["number", "initials"],
+  pushContent: [true, false],
+  notifications: [true, false],
+  shortcut: [true, false]
+};
+function readSettings(key2, defaults) {
+  const settings = { ...defaults };
+  try {
+    const saved = JSON.parse(localStorage.getItem(key2) || "{}");
+    for (const name of Object.keys(CHOICES)) {
+      if (CHOICES[name].includes(saved[name])) Object.assign(settings, { [name]: saved[name] });
+    }
+  } catch {
+  }
+  return settings;
+}
+function writeSettings(key2, settings, defaults) {
+  const changed = Object.fromEntries(Object.entries(settings).filter(([name, value]) => defaults[name] !== value));
+  try {
+    if (Object.keys(changed).length) localStorage.setItem(key2, JSON.stringify(changed));
+    else localStorage.removeItem(key2);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function initials(name) {
+  const words2 = name.trim().split(/\s+/).filter(Boolean);
+  const letters = words2.length > 1 ? `${[...words2[0]][0]}${[...words2[words2.length - 1]][0]}` : [...words2[0] ?? "?"].slice(0, 2).join("");
+  return letters.toUpperCase();
+}
+function element(tag, className = "", text) {
+  const el = document.createElement(tag);
+  if (className) el.className = className;
+  if (text !== void 0) el.textContent = text;
+  return el;
+}
+const paths = {
+  comment: "M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z",
+  plus: "M12 5v14M5 12h14",
+  close: "m6 6 12 12M6 18 18 6",
+  check: "m5 12 4 4L19 6",
+  back: "m12 5-7 7 7 7M5 12h14",
+  arrow: "M12 19V5m-6 6 6-6 6 6",
+  refresh: "M20.5 12a8.5 8.5 0 1 1-2.6-6.1L20.5 8.5M20.5 3.5v5h-5",
+  open: "M7 17 17 7M9 7h8v8",
+  trash: "M3 6h18M9 6V4h6v2M5 6l1 14h12l1-14M10 10v6m4-6v6",
+  pin: "M12 21s7-6 7-13A7 7 0 0 0 5 8c0 7 7 13 7 13ZM12 6v4M10 8h4",
+  search: "m21 21-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z",
+  eye: "M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12ZM12 14.8a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6Z",
+  eyeOff: "M3 3l18 18M10.6 5.6A9 9 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a16 16 0 0 1-2.9 3.6M6.5 6.9A16 16 0 0 0 2.5 12S6 18.5 12 18.5a9 9 0 0 0 4.6-1.3M10 10a2.8 2.8 0 0 0 4 4",
+  unlink: "M4.5 4.5h15v15h-15zM9.5 9.5l5 5M14.5 9.5l-5 5",
+  dock: "M4 5h16v14H4zM15 5v14",
+  settings: "M4 7h9m4 0h3M4 17h3m4 0h9M15 5v4M9 15v4",
+  edit: "M4 20h4L19 9l-4-4L4 16v4ZM13 7l4 4",
+  signin: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3",
+  signout: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9",
+  more: "M5 12h.01M12 12h.01M19 12h.01",
+  popout: "M14 4h6v6M20 4l-8 8M18 14v5H5V6h5"
+};
+function icon(name) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.65");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS(svg.namespaceURI, "path");
+  path.setAttribute("d", paths[name]);
+  svg.append(path);
+  return svg;
+}
+function button(label, className, onClick, name) {
+  const el = element("button", className);
+  el.type = "button";
+  el.setAttribute("aria-label", label);
+  el.title = label;
+  if (name) el.append(icon(name));
+  if (!className.includes("icon-button")) el.append(element("span", "", label));
+  el.addEventListener("click", onClick);
+  return el;
+}
+function avatar(name, url) {
+  const el = element("span", "avatar", initials(name));
+  el.setAttribute("aria-hidden", "true");
+  if (url) {
+    try {
+      const safe = new URL(url, location.href);
+      if (safe.protocol === "https:" || safe.protocol === "http:" && safe.origin === location.origin) {
+        const img = element("img");
+        img.src = safe.href;
+        img.alt = "";
+        img.referrerPolicy = "no-referrer";
+        if (img.complete && img.naturalWidth) el.replaceChildren(img);
+        else img.addEventListener("load", () => el.replaceChildren(img));
+      }
+    } catch {
+    }
+  }
+  return el;
+}
+function relativeTime(date2) {
+  const minutes = Math.max(0, Math.floor((Date.now() - date2.getTime()) / 6e4));
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (minutes < 1440) return `${Math.floor(minutes / 60)}h ago`;
+  return date2.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+const tokens = {
+  // Brand: Overplay blue. One accent for buttons, links, open pins and focus.
+  accent: "#0068f9",
+  "accent-strong": "#0055d4",
+  "accent-soft": "#eef4ff",
+  "accent-line": "#d3e3fd",
+  "accent-focus": "#99c2ff",
+  // Text
+  ink: "#121722",
+  "ink-soft": "#3a3f4a",
+  muted: "#636874",
+  subtle: "#8a8e97",
+  // Surfaces and lines
+  surface: "#ffffff",
+  canvas: "#f7f7f8",
+  "surface-soft": "#f0f1f3",
+  line: "#e8e9ec",
+  "line-strong": "#dedfe3",
+  // People
+  "avatar-bg": "#e8f1ff",
+  "avatar-ink": "#2560c4",
+  // Raised dark chips on the page: the launcher button, toasts and the placing notice.
+  inverse: "#121722",
+  "on-inverse": "#ffffff",
+  "inverse-muted": "#b8bcc6",
+  // States. "Resolved" is the one positive state: resolved pins, saved, verified, approved.
+  resolved: "#0f9a6c",
+  "resolved-text": "#0b7a55",
+  "resolved-soft": "#e7f6ef",
+  danger: "#c43d3d",
+  "danger-soft": "#fff4f3",
+  "danger-line": "#f3cfcf",
+  warning: "#745320",
+  "warning-soft": "#fff8e8",
+  "warning-line": "#ebd59f",
+  // Shape. Buttons and chips are pills; cards and windows have soft corners; big page panels have 26px.
+  "radius-sm": "6px",
+  radius: "10px",
+  "radius-md": "12px",
+  "radius-lg": "16px",
+  "radius-xl": "26px",
+  "radius-pill": "999px",
+  // Hairline rings instead of heavy shadows.
+  "shadow-sm": "0 0 0 1px #1217221a,0 1px 2px #12172229",
+  shadow: "0 1px 3px #1217221a,0 16px 32px -12px #12172233",
+  font: '"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif'
+};
+const darkTokens = {
+  "accent-strong": "color-mix(in srgb,var(--cw-accent) 66%,#ffffff)",
+  "accent-soft": "color-mix(in srgb,var(--cw-accent) 18%,#16181d)",
+  "accent-line": "color-mix(in srgb,var(--cw-accent) 42%,#16181d)",
+  "accent-focus": "color-mix(in srgb,var(--cw-accent) 60%,#16181d)",
+  ink: "#eef0f3",
+  "ink-soft": "#c6c9d0",
+  muted: "#9a9ea8",
+  subtle: "#767a84",
+  surface: "#16181d",
+  canvas: "#0e0f12",
+  "surface-soft": "#1f2228",
+  line: "#262930",
+  "line-strong": "#33373f",
+  "avatar-bg": "#1b2a45",
+  "avatar-ink": "#9cc3ff",
+  inverse: "#23262d",
+  "inverse-muted": "#a6aab3",
+  resolved: "#16a877",
+  "resolved-text": "#48d3a0",
+  "resolved-soft": "#13302a",
+  danger: "#ec6a6a",
+  "danger-soft": "#341c21",
+  "danger-line": "#5b2b31",
+  warning: "#efc56e",
+  "warning-soft": "#2f2718",
+  "warning-line": "#57472a",
+  "shadow-sm": "0 0 0 1px #ffffff14,0 1px 2px #00000066",
+  shadow: "0 1px 3px #00000066,0 16px 40px -12px #000000b3"
+};
+function tokenDeclarations(set = tokens) {
+  return Object.entries(set).map(([name, value]) => `--cw-${name}:${value};`).join("");
+}
+const styles = `
+:host{all:initial;${tokenDeclarations()}color:var(--cw-ink);font:16px/1.5 var(--cw-font);letter-spacing:normal;text-align:left;color-scheme:light}
+:host([data-theme=dark]){${tokenDeclarations(darkTokens)}color-scheme:dark}
+@media(prefers-color-scheme:dark){:host([data-theme=system]){${tokenDeclarations(darkTokens)}color-scheme:dark}}
+:host>div{font:16px/1.5 var(--cw-font);color:var(--cw-ink);letter-spacing:normal;text-align:left}*,*::before,*::after{box-sizing:border-box}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--cw-accent);outline-offset:3px}button{color:inherit}svg{width:18px;height:18px;flex-shrink:0}button{touch-action:manipulation}img{max-width:100%}[hidden]{display:none!important}
+.launcher{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid #ffffff24;background:var(--cw-inverse);color:var(--cw-on-inverse);padding:0;border-radius:50%;box-shadow:0 6px 24px #12172233;font-weight:600;font-size:16px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .16s,box-shadow .16s}.launcher:hover{transform:translateY(-2px);box-shadow:0 8px 28px #20243733}.launcher.dragging{cursor:grabbing;transition:none;transform:scale(1.06);box-shadow:0 12px 32px #2024374d}.launcher[aria-expanded=true]{background:var(--cw-accent)}.launcher>svg{width:23px;height:23px}.badge{position:absolute;top:-5px;right:-5px;font-weight:650;font-size:12px;line-height:18px;min-width:22px;height:22px;border:2px solid var(--cw-surface);border-radius:999px;background:var(--cw-accent);color:#fff;text-align:center;padding:0 4px}.launcher[aria-expanded=true] .badge{background:var(--cw-inverse)}
+.panel{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;display:flex;flex-direction:column;background:var(--cw-surface);border-left:1px solid var(--cw-line);box-shadow:var(--cw-shadow);pointer-events:auto;overflow:hidden}.panel.entering{animation:slide-in .2s ease-out}.panel.left{right:auto;left:0;border-left:0;border-right:1px solid var(--cw-line);--cw-slide:-24px}.detail{display:flex;flex-direction:column;flex:1;min-height:0}.detail.entering{animation:enter .16s ease-out}.detail:focus{outline:0}.head{display:flex;align-items:center;gap:10px;padding:22px 20px 16px}.brand-icon{width:34px;height:34px;display:grid;place-items:center;background:var(--cw-accent-soft);color:var(--cw-accent);border-radius:50%}.heading{flex:1;min-width:0}.heading h2{font-size:19px;line-height:1.3;letter-spacing:-.4px;margin:0;font-weight:650}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.4px;color:var(--cw-muted);text-transform:uppercase;margin:0 0 4px}.subtext{color:var(--cw-muted);font-size:14px;margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-button{width:32px;height:32px;display:inline-grid;place-items:center;background:transparent;border:0;border-radius:50%;flex-shrink:0}.icon-button:hover{background:var(--cw-surface-soft)}.icon-button.danger{color:var(--cw-danger)}.icon-button svg{width:16px;height:16px}.icon-button.outlined{width:42px;height:42px;border:1px solid var(--cw-line-strong);border-radius:50%;color:var(--cw-ink-soft)}.icon-button.outlined svg{width:18px;height:18px}.icon-button.busy:disabled{opacity:1;color:var(--cw-accent)}.icon-button.busy svg{animation:spin .9s linear infinite}.toolbar{padding:0 20px 16px;display:flex;gap:10px;align-items:center}.primary{border:0;border-radius:var(--cw-radius-pill);background:var(--cw-accent);color:#fff;display:inline-flex;gap:7px;align-items:center;justify-content:center;padding:10px 16px;font-size:14px;font-weight:550;white-space:nowrap;box-shadow:inset 0 -1px 0 #12172238;transition:filter .16s}.primary:hover{filter:brightness(.94)}.toolbar .primary{flex:1}.quiet{border:1px solid var(--cw-line-strong);background:var(--cw-surface);color:var(--cw-ink);border-radius:var(--cw-radius-pill);padding:9px 16px;font-size:14px}.quiet:hover{background:var(--cw-canvas)}.quiet.update{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;color:var(--cw-accent);border-color:var(--cw-accent-line);background:var(--cw-accent-soft);font-weight:600}.quiet.update:hover{border-color:var(--cw-accent)}.quiet.update svg{width:14px;height:14px}.scope{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 20px 8px;padding:4px;background:var(--cw-surface-soft);border-radius:var(--cw-radius-pill)}.scope-option{display:flex;gap:7px;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--cw-radius-pill);padding:8px 6px;font-size:14px;font-weight:550;color:var(--cw-muted);white-space:nowrap}.scope-option:hover{color:var(--cw-ink)}.scope-option[aria-pressed=true]{background:var(--cw-surface);color:var(--cw-ink);box-shadow:0 1px 3px #2024371f}.scope-option[aria-pressed=true] .count{background:var(--cw-accent-soft);color:var(--cw-accent)}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 20px 8px;padding:4px;border:1px solid var(--cw-line);border-radius:var(--cw-radius-pill)}.tab{display:flex;gap:7px;align-items:center;justify-content:center;border:0;border-radius:var(--cw-radius-pill);background:transparent;padding:7px 6px;color:var(--cw-muted);font-size:14px;font-weight:550;white-space:nowrap}.tab[aria-pressed=true]{color:var(--cw-on-inverse);background:var(--cw-inverse)}.tab[aria-pressed=true] .count{background:#ffffff2e;color:var(--cw-on-inverse)}.count{background:var(--cw-surface-soft);padding:0 6px;border-radius:5px;font-size:12px;line-height:18px}.search{position:relative;margin:4px 20px 8px}.search>svg{position:absolute;left:11px;top:11px;width:15px;height:15px;color:var(--cw-subtle);pointer-events:none}.search input{border:1px solid var(--cw-line);border-radius:var(--cw-radius);background:var(--cw-canvas);width:100%;padding:9px 38px 9px 34px;color:var(--cw-ink);font-size:14px}.search input::placeholder{color:var(--cw-subtle)}.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.search-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:28px;height:28px;color:var(--cw-muted)}.search-clear svg{width:14px;height:14px}.people{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 20px 6px}.filter-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--cw-line);background:var(--cw-surface);color:var(--cw-ink-soft);border-radius:999px;padding:4px 6px 4px 11px;font-size:13px;font-weight:600;white-space:nowrap}.filter-chip:hover{background:var(--cw-canvas)}.filter-chip[aria-pressed=true]{background:var(--cw-accent-soft);border-color:var(--cw-accent-line);color:var(--cw-accent)}.filter-chip[aria-pressed=true] .count{background:var(--cw-surface);color:var(--cw-accent)}.select{position:relative;display:inline-flex;min-width:0;max-width:220px;color:var(--cw-muted)}.select::after{content:'';position:absolute;right:12px;top:50%;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}.select select{appearance:none;-webkit-appearance:none;border:1px solid var(--cw-line);background:var(--cw-surface);color:var(--cw-ink-soft);border-radius:999px;padding:5px 30px 5px 11px;font-size:13px;font-weight:600;line-height:18px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.select select:hover{background:var(--cw-canvas)}.select.chosen{color:var(--cw-accent)}.select.chosen select{background:var(--cw-accent-soft);border-color:var(--cw-accent-line);color:var(--cw-accent)}.select option{color:var(--cw-ink);background:var(--cw-surface)}.link-button{margin-left:auto;border:0;background:transparent;color:var(--cw-accent);font-size:13px;font-weight:600;padding:4px 2px;white-space:nowrap}.link-button:hover{text-decoration:underline}mark.hit{background:color-mix(in srgb,var(--cw-accent) 22%,transparent);color:inherit;border-radius:3px;padding:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.note-match{display:flex;align-items:center;gap:5px;margin:4px 0 0 31px;font-size:12.5px;line-height:1.5;color:var(--cw-muted);min-width:0}.note-match svg{width:12px;height:12px}.note-match-label{font-weight:600;color:var(--cw-ink-soft);white-space:nowrap;flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis}.note-match-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.list{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px 12px 16px;min-height:0}.list-title{display:flex;align-items:center;gap:8px;padding:12px 8px 6px;color:var(--cw-muted);font-size:12px;letter-spacing:1.15px;text-transform:uppercase;font-weight:600}.page-path{text-transform:none;letter-spacing:0;font-size:13px;color:var(--cw-ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.page-name{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--cw-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.here{flex-shrink:0;padding:0 6px;border-radius:5px;background:var(--cw-accent-soft);color:var(--cw-accent);font-size:11px;letter-spacing:.4px;line-height:18px}.go{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--cw-accent);font-weight:600}.note.current{background:var(--cw-accent-soft);border-color:var(--cw-accent-line)}.note{display:block;text-align:left;width:100%;border:1px solid transparent;background:var(--cw-surface);color:var(--cw-ink);border-radius:10px;padding:9px 10px;margin-bottom:2px}.note .note-header .via{color:var(--cw-muted);font-size:10px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-header{margin-bottom:4px;gap:7px}.note .avatar{width:24px;height:24px;font-size:11px}.note .name{font-size:13px}.note .time{margin-left:0}.note-meta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--cw-muted);white-space:nowrap;flex-shrink:0}.note-meta svg{width:12px;height:12px}.note:hover{background:var(--cw-canvas);border-color:var(--cw-line)}.note-header{display:flex;align-items:center;gap:8px;margin-bottom:9px}.avatar{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--cw-avatar-bg);color:var(--cw-avatar-ink);font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden}.avatar img{height:100%;width:100%;object-fit:cover}.name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.time{font-size:12px;color:var(--cw-muted);margin-left:auto;white-space:nowrap}.note-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 0 31px;line-height:1.5;font-size:14px;color:var(--cw-ink-soft);overflow-wrap:anywhere}.note-footer{display:flex;gap:6px;align-items:center;margin:6px 0 0 31px;color:var(--cw-muted);font-size:12px}.note-footer svg{width:12px;height:12px}.note-number{color:var(--cw-accent);font-weight:700}.status{display:inline-flex;align-items:center;gap:4px}.status.resolved{color:var(--cw-resolved-text)}.status-dot{width:5px;height:5px;background:var(--cw-accent);border-radius:50%;display:inline-block}.empty{height:100%;min-height:230px;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 16px}.empty-icon{position:relative;display:grid;place-items:center;margin:0 auto 18px;width:64px;height:64px;border:1px solid var(--cw-line);border-radius:21px;transform:rotate(-7deg);background:var(--cw-canvas);color:var(--cw-accent)}.empty-icon svg{width:27px;height:27px}.empty h3{font-size:17px;letter-spacing:-.25px;margin:0 0 8px}.empty p{font-size:14px;color:var(--cw-muted);line-height:1.7;margin:0 auto 18px;max-width:230px}.footer{display:flex;align-items:center;gap:9px;border-top:1px solid var(--cw-line);padding:14px 20px;background:var(--cw-canvas)}.footer .avatar{width:25px;height:25px;font-size:11px}.identity{border:0;background:transparent;text-align:left;padding:0;min-width:0;flex:1}.identity strong{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity small{font-size:12px;color:var(--cw-muted)}.storage-label{font-size:11px;color:var(--cw-muted);text-align:right;line-height:1.5;max-width:105px}.storage-dot{display:inline-block;width:5px;height:5px;background:var(--cw-resolved);border-radius:50%;margin-right:4px}.error{padding:12px 16px;margin:12px 20px;border:1px solid var(--cw-danger-line);background:var(--cw-danger-soft);color:var(--cw-danger);border-radius:10px;font-size:14px;overflow-wrap:anywhere}.error button{display:block;margin-top:8px}.notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1;background:var(--cw-inverse);color:var(--cw-on-inverse);border:1px solid #ffffff20;border-radius:12px;padding:12px 15px;display:flex;align-items:center;gap:12px;font-size:14px;box-shadow:0 6px 30px #0002;pointer-events:auto;max-width:calc(100vw - 32px)}.notice kbd{font-size:12px;color:var(--cw-inverse-muted);border:1px solid #ffffff30;border-radius:4px;padding:2px 5px}.notice button{color:var(--cw-on-inverse)}.notice.beside-panel{left:calc(50% - 200px)}.notice.beside-panel.left{left:calc(50% + 200px)}.pins{position:fixed;inset:0;pointer-events:none}.pin{position:absolute;width:32px;height:36px;transform:translate(-50%,-100%);border:2px solid #fff;border-radius:15px 15px 15px 4px;background:var(--cw-accent);color:#fff;box-shadow:var(--cw-shadow-sm);display:grid;place-items:center;font-size:13px;font-weight:650;pointer-events:auto;transition:scale .15s}.pin:hover,.pin[aria-pressed=true]{scale:1.12}.pin.resolved{background:var(--cw-resolved)}.pin.highlight{animation:pulse 1s ease-out 2}.pin.hovered{animation:pulse 1s ease-out infinite;scale:1.12;opacity:1!important}.focus-ring.hover-ring{animation:none;border-style:dashed}.focus-ring{position:absolute;border:2px solid var(--cw-accent);border-radius:var(--cw-radius);background:color-mix(in srgb,var(--cw-accent) 6%,transparent);pointer-events:none;animation:enter .16s ease-out}.pick-ring{border-style:dashed;animation:none;transition:left .08s,top .08s,width .08s,height .08s}.pin:focus-visible{outline-offset:3px}.pin.preview{pointer-events:none;opacity:.7}.pin.movable{cursor:grab;touch-action:none}.pins.focused .pin:not([aria-pressed=true]):not(.dragging){opacity:.3;transition:opacity .15s,scale .15s}.pins.focused .pin:hover,.pins.focused .pin:focus-visible{opacity:1}.pin.dragging{cursor:grabbing;scale:1.15;pointer-events:none;box-shadow:var(--cw-shadow);transition:none;z-index:1}.detail-hint{margin:16px 20px 12px;color:var(--cw-muted);font-size:14px;line-height:1.6}.compose{padding:0 20px 20px}.compose textarea,.reply-bar textarea{scrollbar-width:none}
+.compose textarea::-webkit-scrollbar,.reply-bar textarea::-webkit-scrollbar{display:none}
+.compose textarea{width:100%;display:block;resize:vertical;min-height:120px;max-height:40vh;border:1px solid var(--cw-line);border-radius:var(--cw-radius);padding:12px;color:var(--cw-ink);background:var(--cw-canvas);font-size:16px;line-height:1.6}.compose textarea::placeholder{color:var(--cw-subtle)}.compose-bar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px}.compose-hint{font-size:11px;color:var(--cw-muted)}.thread-body{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:18px 20px 4px}.message{padding:16px 0;border-bottom:1px solid var(--cw-line)}.message:first-child{padding-top:0}.message:last-child{border:0}.message-text{font-size:16px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0 37px}.thread-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;border-top:1px solid var(--cw-line)}.resolve{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-weight:600}.resolve svg{width:16px;height:16px;color:var(--cw-resolved)}.resolve:hover{border-color:var(--cw-resolved);background:var(--cw-resolved-soft);color:var(--cw-resolved-text)}.resolve.done svg{color:var(--cw-muted)}.resolve.done:hover{border-color:var(--cw-line-strong);background:var(--cw-canvas);color:var(--cw-ink)}.confirm-delete{display:flex;align-items:center;gap:8px}.danger-button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--cw-radius-pill);background:var(--cw-danger);color:#fff;padding:10px 12px;font-size:14px;font-weight:600;white-space:nowrap}.danger-button svg{width:15px;height:15px}.detail-head{padding:12px 20px 16px;border-bottom:1px solid var(--cw-line)}.detail-bar{display:flex;align-items:center;justify-content:space-between;margin:0 -8px 12px -10px}.back-link{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:var(--cw-radius-sm);padding:6px 10px;font-size:14px;font-weight:600;color:var(--cw-muted)}.back-link:hover{background:var(--cw-surface-soft);color:var(--cw-ink)}.back-link svg{width:16px;height:16px}.detail-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.detail-title h2{font-size:20px;line-height:1.3;letter-spacing:-.4px;margin:0;font-weight:650}.detail-head .subtext{white-space:normal}.chip{display:inline-flex;align-items:center;gap:6px;padding:1px 9px;border-radius:999px;background:var(--cw-accent-soft);color:var(--cw-accent);font-size:12px;font-weight:600;line-height:20px}.chip svg{width:12px;height:12px}.chip.resolved{background:var(--cw-resolved-soft);color:var(--cw-resolved-text)}.thread .compose{padding-top:12px;border-top:1px solid var(--cw-line)}.thread textarea{min-height:88px}.anchor-status{margin:0 20px 12px;padding:12px;background:var(--cw-canvas);border:1px solid var(--cw-line);border-radius:10px;color:var(--cw-muted);font-size:13px;line-height:1.55}.anchor-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}.anchor-icon{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--cw-warning-soft);color:var(--cw-warning)}.anchor-status.removed .anchor-icon{background:var(--cw-danger-soft);color:var(--cw-danger)}.anchor-icon svg{width:16px;height:16px}.anchor-titles{display:flex;flex-direction:column;min-width:0}.anchor-titles strong{color:var(--cw-ink);font-size:13px;font-weight:650;line-height:1.35}.anchor-target{color:var(--cw-ink-soft);overflow-wrap:anywhere}.identity-form{padding:0 20px 20px}.identity-form label{font-size:14px;font-weight:600;display:block;margin-bottom:7px}.identity-form input{width:100%;border:1px solid var(--cw-line);background:var(--cw-canvas);color:var(--cw-ink);padding:10px;border-radius:var(--cw-radius);margin-bottom:14px}.identity-form p{font-size:13px;color:var(--cw-muted);line-height:1.7;margin:0 0 14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@keyframes enter{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}@keyframes slide-in{from{opacity:0;translate:var(--cw-slide,24px) 0}to{opacity:1;translate:0 0}}@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cw-accent) 55%,transparent)}100%{box-shadow:0 0 0 16px transparent}}@keyframes spin{to{rotate:360deg}}@keyframes toast-out{to{opacity:0;translate:0 6px}}
+.toasts{position:fixed;right:24px;bottom:88px;width:320px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:8px;pointer-events:none}.toasts.left{right:auto;left:24px}.toasts.top{bottom:auto;top:88px;flex-direction:column-reverse}.toasts.beside-panel{right:424px;bottom:24px;max-width:calc(100vw - 448px)}.toasts.beside-panel.left{right:auto;left:424px}.toasts.beside-panel.top{top:24px;bottom:auto}.toast{display:flex;gap:10px;align-items:flex-start;background:var(--cw-inverse);color:var(--cw-on-inverse);border:1px solid #ffffff20;border-radius:var(--cw-radius-md,12px);padding:12px 14px;box-shadow:var(--cw-shadow,var(--cw-shadow));animation:enter .18s ease-out}.toast.leaving{animation:toast-out .2s ease-in forwards}.toast-icon{background:var(--cw-accent-soft,var(--cw-accent-soft));color:var(--cw-accent)}.toast-icon svg{width:15px;height:15px}.toast-body{min-width:0;flex:1}.toast-title{margin:0;font-size:14px;line-height:1.4;color:var(--cw-inverse-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-title strong{color:var(--cw-on-inverse);font-weight:600}.toast-number{margin-left:6px;padding:0 6px;border-radius:5px;background:var(--cw-accent-soft,var(--cw-accent-soft));color:var(--cw-accent);font-size:12px;font-weight:650;line-height:18px;display:inline-block}.toast-text{margin:3px 0 0;font-size:14px;line-height:1.5;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
+.popover{position:fixed;left:0;top:0;z-index:1;width:320px;max-height:min(560px,calc(100vh - 24px));display:flex;flex-direction:column;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--cw-radius-lg);box-shadow:var(--cw-shadow);pointer-events:auto;color:var(--cw-ink)}.popover>.detail{min-height:0}.popover .detail.entering{animation:pop .18s cubic-bezier(.2,.9,.3,1.15)}@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}.popover.sheet{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:75vh}
+.card-head .detail-bar{margin:0;padding:12px 12px 0 10px}.pop-head{position:relative;display:flex;align-items:center;gap:10px;padding:14px 10px 12px 14px}.panel .pop-head{padding:12px 14px 12px 20px}.pop-icon{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--cw-accent-soft);color:var(--cw-accent)}.pop-icon svg{width:15px;height:15px}.pop-title{flex:1;min-width:0}.pop-title h2{margin:0;font-size:14px;font-weight:650;letter-spacing:-.2px;line-height:1.35}.pop-sub{margin:0;font-size:12px;line-height:1.5;color:var(--cw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pop-head .icon-button{width:28px;height:28px;color:var(--cw-muted)}.pop-head .icon-button:hover{background:var(--cw-surface-soft);color:var(--cw-ink)}.pop-head .icon-button svg{width:16px;height:16px}.pop-head .more svg{stroke-width:3.2}
+.pop-menu{position:absolute;top:46px;right:10px;z-index:2;min-width:190px;padding:4px;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--cw-radius-md);box-shadow:var(--cw-shadow)}.menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:transparent;font-size:13px;text-align:left;color:var(--cw-ink)}.menu-item:hover{background:var(--cw-surface-soft)}.menu-item svg{width:15px;height:15px;color:var(--cw-muted)}.menu-item.danger,.menu-item.danger svg{color:var(--cw-danger)}
+.thread .thread-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 14px}.panel .thread .thread-body{padding:0 20px}.thread .message{padding:12px 0;border-top:1px solid var(--cw-line);border-bottom:0}.thread .message:first-child{padding-top:12px}.thread .note-header{gap:8px;margin:0}.thread .avatar{width:26px;height:26px;font-size:10px}.thread .name{font-size:14px}.thread .time{font-size:12px}.thread .message-text{margin:4px 0 0 34px;font-size:14px;line-height:1.55;color:var(--cw-ink-soft)}.panel .thread .message-text{font-size:15px}
+.thread-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px solid var(--cw-line)}.panel .thread-actions{padding:12px 20px}.reply-bar{flex:1;min-width:0;display:flex;align-items:flex-end;gap:8px}.reply-bar textarea{flex:1;min-width:0;min-height:32px;max-height:120px;resize:none;padding:6px 10px;border:1px solid var(--cw-line-strong);border-radius:var(--cw-radius);background:var(--cw-surface);color:var(--cw-ink);font-size:13px;line-height:1.45;overflow:auto}.reply-bar textarea:focus-visible{outline:0;border-color:var(--cw-accent);box-shadow:0 0 0 3px var(--cw-accent-line)}.reply-bar textarea::placeholder{color:var(--cw-subtle)}.thread-actions .primary{padding:7px 12px;font-size:13px;border-radius:var(--cw-radius-pill);white-space:nowrap}.thread-actions .primary svg{width:14px;height:14px}.thread-actions .primary.resolve,.thread-actions .primary.resolve:hover{border:0;background:var(--cw-accent);color:#fff}.thread-actions .primary.resolve:hover{filter:brightness(.94)}.thread-actions .primary.resolve svg{color:currentColor}.thread-actions .status{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--cw-resolved-text)}.thread-actions .status svg{width:14px;height:14px}.thread-actions .reopen{padding:6px 12px;font-size:13px;font-weight:500}
+.popover .anchor-status,.popover .error{margin:0 14px 10px}.new-comment .compose{margin:0 14px;padding:14px 0;border-top:1px solid var(--cw-line)}.panel .new-comment .compose{margin:0 20px;padding:16px 0 20px}.popover .compose textarea:focus-visible{outline:0;border-color:var(--cw-accent);box-shadow:0 0 0 3px var(--cw-accent-line)}.popover .new-comment .compose textarea{min-height:76px;font-size:14px}.popover .compose-hint{font-size:11px}
+.pin.below{transform:translate(-50%,0);border-radius:4px 15px 15px 15px}
+.pick-ring{border-style:solid;background:transparent}.head-actions{display:flex;align-items:center;gap:2px;margin-right:-6px}
+.head-actions>.icon-button{color:var(--cw-muted)}
+.head-actions>.icon-button:hover{color:var(--cw-ink)}
+.menu-wrap{position:relative;display:flex}
+.user-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent}
+.user-button .avatar{width:28px;height:28px;font-size:11px;box-shadow:0 0 0 2px var(--cw-surface),0 0 0 3px var(--cw-line)}
+.user-button:hover .avatar,.user-button[aria-expanded=true] .avatar{box-shadow:0 0 0 2px var(--cw-surface),0 0 0 3px var(--cw-accent)}
+.quiet.sign-in{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:13px;font-weight:600;margin-right:2px}
+.quiet.sign-in svg{width:14px;height:14px}
+.user-menu{top:calc(100% + 8px);right:-40px;min-width:256px;padding:6px}
+.menu-user{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--cw-line)}
+.menu-user .avatar{width:34px;height:34px;font-size:13px}
+.menu-user-text{min-width:0}
+.menu-user-text strong{display:block;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.menu-user-text small{display:block;font-size:12px;color:var(--cw-muted)}
+.menu-note{display:flex;align-items:center;gap:2px;margin:4px 0 0;padding:8px 10px 4px;border-top:1px solid var(--cw-line);font-size:12px;color:var(--cw-muted)}
+.footer{justify-content:space-between}
+.footer-note{font-size:13px;color:var(--cw-muted)}
+.settings-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 12px}
+.setting-group{padding:14px 0 6px}
+.setting-group+.setting-group{border-top:1px solid var(--cw-line)}
+.setting-group h3{margin:0 0 6px;font-size:12px;font-weight:650;letter-spacing:1.1px;text-transform:uppercase;color:var(--cw-muted)}
+.setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0}
+.setting-text{min-width:0}
+.setting-text strong{display:block;font-size:14px;font-weight:600}
+.setting-text small{display:block;font-size:12px;line-height:1.5;color:var(--cw-muted)}
+.segmented{display:inline-flex;flex-shrink:0;gap:2px;padding:3px;background:var(--cw-surface-soft);border-radius:var(--cw-radius-pill)}
+.segment{border:0;background:transparent;border-radius:var(--cw-radius-pill);padding:5px 10px;font-size:13px;font-weight:600;color:var(--cw-muted);white-space:nowrap}
+.segment:hover{color:var(--cw-ink)}
+.segment[aria-pressed=true]{background:var(--cw-surface);color:var(--cw-ink);box-shadow:0 1px 3px #2024371f}
+.switch{position:relative;flex-shrink:0;width:38px;height:22px;padding:0;border:0;border-radius:999px;background:var(--cw-line-strong);transition:background .16s}
+.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #20243733;transition:translate .16s}
+.switch[aria-checked=true]{background:var(--cw-accent)}
+.switch[aria-checked=true]::after{translate:16px 0}
+.switch:disabled{opacity:.45;cursor:not-allowed}
+.swatches{display:flex;justify-content:space-between;gap:6px;width:100%}
+.setting.wide{flex-direction:column;align-items:stretch;gap:10px}
+.swatch{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px var(--cw-line-strong)}
+.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--cw-surface),0 0 0 4px var(--swatch)}
+.swatch:hover{scale:1.1}
+.pin-sample{display:flex;align-items:flex-end;gap:14px;height:62px;margin:2px 0 6px;padding:0 16px 12px;border:1px dashed var(--cw-line-strong);border-radius:var(--cw-radius-md);background:var(--cw-canvas)}
+.pin-sample .pin{position:static;transform:none;pointer-events:none}
+.pin-sample.small .pin{width:26px;height:30px;border-radius:13px 13px 13px 4px;font-size:11px}
+.pin-sample.resolved-gray .pin.resolved{background:var(--cw-subtle)}
+.launcher.colored,.launcher.colored[aria-expanded=true]{background:var(--cw-launcher)}.launcher.colored .badge,.launcher-mini.colored .badge{background:var(--cw-inverse)}
+.launcher-sample{display:flex;align-items:center;gap:14px;height:72px;margin:2px 0 6px;padding:0 16px;border:1px dashed var(--cw-line-strong);border-radius:var(--cw-radius-md);background:var(--cw-canvas)}
+.launcher-mini{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff24;border-radius:50%;background:var(--cw-inverse);color:var(--cw-on-inverse);box-shadow:0 6px 24px #12172233}.launcher-mini.colored{background:var(--cw-launcher)}
+.launcher-mini>svg{width:19px;height:19px}
+.pin-sample-text{margin-left:auto;font-size:12px;color:var(--cw-muted)}
+.settings-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-top:1px solid var(--cw-line);background:var(--cw-canvas);font-size:12px;color:var(--cw-muted)}
+.settings-foot .quiet{padding:7px 11px;font-size:13px}
+.pins.small .pin{width:26px;height:30px;border-radius:13px 13px 13px 4px;font-size:11px}
+.pins.resolved-gray .pin.resolved{background:var(--cw-subtle)}
+.pins.small .pin.below{border-radius:4px 13px 13px 13px}
+.note{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
+.note-main{min-width:0}
+.note .time{margin-left:0}
+.note-meta{flex-direction:column;align-items:flex-end;gap:2px;margin:2px 0 0;min-width:64px;line-height:18px}
+.note-number,.count{font-variant-numeric:tabular-nums}
+.count{min-width:20px;text-align:center}
+.hidden-flag{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:1px 7px 1px 6px;border-radius:6px;background:var(--cw-warning-soft);color:var(--cw-warning);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hidden-flag.removed{background:var(--cw-danger-soft);color:var(--cw-danger)}.note-footer .hidden-flag svg{width:12px;height:12px;flex-shrink:0}
+.pin.detached{border-style:dashed;opacity:.85;background:color-mix(in srgb,var(--cw-accent) 70%,var(--cw-subtle))}
+.anchor-status p{margin:0}
+.page-path.sub{font-size:11px;color:var(--cw-subtle);flex-shrink:1}
+.anchor-status .quiet{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 11px 6px 9px;font-size:13px;font-weight:600}.anchor-status .quiet svg{width:15px;height:15px;flex-shrink:0}
+@media(max-width:600px){.panel,.panel.left{inset:0;width:auto;border:0}.panel.placing{visibility:hidden}.panel.behind{visibility:hidden}.launcher{right:16px;bottom:16px}.notice,.notice.beside-panel,.notice.beside-panel.left{left:50%;bottom:24px;width:calc(100vw - 32px);font-size:13px}.compose-hint{display:none}.compose-bar{justify-content:flex-end}.toasts,.toasts.left,.toasts.beside-panel,.toasts.beside-panel.left{left:16px;right:16px;width:auto;max-width:none;bottom:82px}.toasts.top,.toasts.beside-panel.top{top:82px;bottom:auto}.toasts.beside-panel{display:none}.head{padding-top:18px}}
+.popover.moving{visibility:hidden;pointer-events:none}
+.update-bar{display:grid;grid-template-columns:30px 1fr auto;align-items:start;gap:4px 12px;padding:14px 12px 16px 20px;background:var(--cw-accent-soft);border-top-color:var(--cw-accent-line)}.update-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--cw-surface);color:var(--cw-accent);box-shadow:var(--cw-shadow-sm)}.update-icon svg{width:16px;height:16px}.update-text{display:flex;flex-direction:column;gap:1px;min-width:0;color:var(--cw-muted);font-size:12.5px;line-height:1.45}.update-text strong{color:var(--cw-ink);font-size:13px;font-weight:650}.update-command{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:8px 8px 0 0;padding:4px 4px 4px 10px;border:1px solid var(--cw-line);border-radius:9px;background:var(--cw-surface)}.update-command code{flex:1;min-width:0;color:var(--cw-ink);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.update-bar .quiet.update{padding:5px 12px;border-radius:var(--cw-radius-pill)}
+@media(max-width:600px){.search input{font-size:16px}.select{max-width:100%}}
+@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
+`;
+const WINDOW = 700;
+const MAX_AGE = 12e4;
+const MAX_STEPS = 6;
+function isVisible(el) {
+  if (!el || !el.isConnected || !el.getClientRects().length) return false;
+  const rect = el.getBoundingClientRect();
+  if (rect.width < 1 || rect.height < 1 || getComputedStyle(el).visibility !== "visible" || el.closest("[inert]")) return false;
+  const check = el.checkVisibility;
+  if (check && !check.call(el, { opacityProperty: true, visibilityProperty: true })) return false;
+  let fixed = false;
+  for (let parent = el; parent && parent !== document.documentElement; parent = parent.parentElement) {
+    const style = getComputedStyle(parent);
+    if (!check && parseFloat(style.opacity) < 0.05) return false;
+    if (style.position === "fixed") fixed = true;
+    if (parent === el || parent === document.body) continue;
+    const clips = /(hidden|clip)/.test(style.overflowX + style.overflowY);
+    const collapsed = /(auto|scroll)/.test(style.overflowX + style.overflowY) && (parent.clientWidth < 1 || parent.clientHeight < 1);
+    if (clips || collapsed) {
+      const box = parent.getBoundingClientRect();
+      if (Math.min(rect.right, box.right) - Math.max(rect.left, box.left) < 1 || Math.min(rect.bottom, box.bottom) - Math.max(rect.top, box.top) < 1) return false;
+    }
+  }
+  return !(fixed && (rect.right <= 0 || rect.bottom <= 0 || rect.left >= innerWidth || rect.top >= innerHeight));
+}
+const clean$1 = (text, max = 120) => (text ?? "").replace(/\s+/g, " ").trim().slice(0, max);
+const GENERATED = /:|(^|[-_])(r\d+|radix|headlessui|mui|v-\d|react-aria|\d{3,})/i;
+const NESTED = "ul,ol,[role=menu],[role=listbox],[popover],dialog,nav";
+function ownText(el) {
+  var _a;
+  let text = "";
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) text += node.textContent;
+    else if (node instanceof Element && !node.matches(NESTED) && !node.querySelector(`${NESTED},a,button`)) text += ` ${node.textContent}`;
+  }
+  return clean$1(text) || clean$1((_a = el.firstElementChild) == null ? void 0 : _a.textContent);
+}
+function nameOf$1(el) {
+  var _a, _b;
+  const ids = el.getAttribute("aria-labelledby");
+  return clean$1(el.getAttribute("aria-label")) || clean$1(ids == null ? void 0 : ids.split(/\s+/).map((id) => {
+    var _a2;
+    return ((_a2 = document.getElementById(id)) == null ? void 0 : _a2.textContent) ?? "";
+  }).join(" ")) || clean$1(el.getAttribute("title")) || ownText(el) || clean$1((_a = el.querySelector("img[alt]")) == null ? void 0 : _a.getAttribute("alt")) || clean$1((_b = el.querySelector("svg title")) == null ? void 0 : _b.textContent);
+}
+const sameName = (a, b) => a.toLowerCase() === b.toLowerCase();
+const ROLES = { BUTTON: "button", SUMMARY: "button", A: "link", LABEL: "label", INPUT: "input" };
+function selectorOf(el) {
+  const parts = [];
+  for (let node = el; node && node !== document.body && node !== document.documentElement; node = node.parentElement) {
+    for (const attr of ["data-overplay-anchor", "data-testid", "data-test", "data-cy"]) {
+      const value = node.getAttribute(attr);
+      const selector = value && `[${attr}="${CSS.escape(value)}"]`;
+      if (selector && document.querySelectorAll(selector).length === 1) {
+        parts.unshift(selector);
+        return parts.join(" > ");
+      }
+    }
+    if (node.id && !GENERATED.test(node.id) && document.querySelectorAll(`#${CSS.escape(node.id)}`).length === 1) {
+      parts.unshift(`#${CSS.escape(node.id)}`);
+      return parts.join(" > ");
+    }
+    const tag = node.tagName;
+    const siblings = node.parentElement ? Array.from(node.parentElement.children).filter((child) => child.tagName === tag) : [node];
+    parts.unshift(`${tag.toLowerCase()}:nth-of-type(${siblings.indexOf(node) + 1})`);
+  }
+  return parts.join(" > ");
+}
+function describe(el) {
+  const name = nameOf$1(el);
+  return { selector: selectorOf(el), role: el.getAttribute("role") || ROLES[el.tagName] || el.tagName.toLowerCase(), tag: el.tagName.toLowerCase(), ...name ? { name } : {} };
+}
+function findTarget(target) {
+  const pool = [];
+  const bySelector = () => {
+    try {
+      return document.querySelector(target.selector);
+    } catch {
+      return null;
+    }
+  };
+  const first = bySelector();
+  if (first && (!target.name || sameName(nameOf$1(first), target.name))) pool.push(first);
+  if (target.name) {
+    const selector = [target.tag, target.role && /^[a-z]+$/.test(target.role) ? `[role="${target.role}"]` : ""].filter(Boolean).join(",");
+    try {
+      pool.push(...Array.from(document.querySelectorAll(selector || "*")).filter((el) => sameName(nameOf$1(el), target.name)));
+    } catch {
+    }
+  }
+  if (!pool.length && first) pool.push(first);
+  return pool.find(isVisible) ?? pool[0] ?? null;
+}
+const CONTROL$1 = 'button,summary,label,[role=button],[role=tab],[role=menuitem],[aria-haspopup],[aria-expanded],[aria-controls],[popovertarget],[data-bs-toggle],a[href^="#"],input[type=checkbox],input[type=radio]';
+const unsafe = (el) => el.matches('a[href]:not([href^="#"]):not([href=""]),[type=submit],form button:not([type])') && !el.matches("[aria-haspopup],[aria-expanded]");
+const ACTION = /\b(delete|remove|erase|destroy|pay|buy|purchase|checkout|order|send|submit|publish|confirm|sign ?out|log ?out|unsubscribe|cancel subscription|deactivate)\b/i;
+const risky = (el) => unsafe(el) || !el.matches("[aria-haspopup],[aria-expanded],[aria-controls],summary,[popovertarget],[data-bs-toggle]") && ACTION.test(nameOf$1(el));
+const KEYS = ["Enter", " ", "ArrowDown", "ArrowRight"];
+const VISUAL = /^(display|visibility|opacity|transform|translate|max-height|height|clip|clip-path|left|top|right|bottom|inset|pointer-events)$/;
+function pressable(el) {
+  const control = el.closest(CONTROL$1);
+  if (control) return control;
+  let best = el;
+  for (let parent = el; parent && parent !== document.body; parent = parent.parentElement) {
+    if (getComputedStyle(parent).cursor === "pointer") best = parent;
+    else if (best !== el) break;
+  }
+  return best;
+}
+class RevealRecorder {
+  /**
+   * @param ignore The widget's own elements.
+   * @param paused True while the widget takes page presses itself (placing a note, dragging a pin). Those presses open
+   *   nothing on the page, and page changes right after them are not theirs.
+   */
+  constructor(ignore, paused = () => false) {
+    __publicField(this, "actions", []);
+    __publicField(this, "open", /* @__PURE__ */ new Set());
+    __publicField(this, "lastHover", null);
+    __publicField(this, "observer", null);
+    __publicField(this, "onPress", (event) => {
+      if (!event.isTrusted || event instanceof KeyboardEvent && !KEYS.includes(event.key)) return;
+      const el = this.target(event);
+      if (!el) return;
+      if (this.paused()) {
+        this.open.clear();
+        return;
+      }
+      const last = this.lastAction("press");
+      if (last && (last.el === el || last.el.control === el) && performance.now() - last.time < 500) {
+        this.keep(last);
+        return;
+      }
+      this.track("press", el);
+    });
+    __publicField(this, "onHover", (event) => {
+      if (!event.isTrusted) return;
+      const el = this.target(event);
+      if (!el || el === this.lastHover) return;
+      this.lastHover = el;
+      this.actions = this.actions.filter((action) => action.kind === "press" || this.open.has(action) || action.changed.size);
+      this.track("hover", el);
+    });
+    __publicField(this, "onState", (event) => {
+      if (event.target instanceof Element) this.note(event.target, false);
+    });
+    __publicField(this, "onMutations", (records) => {
+      if (!this.open.size) return;
+      for (const record2 of records) {
+        if (record2.type === "attributes" && record2.attributeName === "style" && (record2.target === document.body || record2.target === document.documentElement)) continue;
+        const nodes = record2.type === "childList" ? Array.from(record2.addedNodes) : [record2.target];
+        for (const node of nodes) if (node instanceof Element) this.note(node, record2.type === "childList");
+      }
+    });
+    this.ignore = ignore;
+    this.paused = paused;
+  }
+  start(signal) {
+    const options = { capture: true, signal };
+    for (const type of ["pointerdown", "mousedown", "click", "keydown"]) document.addEventListener(type, this.onPress, options);
+    document.addEventListener("mouseover", this.onHover, options);
+    document.addEventListener("toggle", this.onState, options);
+    document.addEventListener("change", this.onState, options);
+    window.addEventListener("hashchange", () => {
+      const id = decodeURIComponent(location.hash.slice(1));
+      const el = id && document.getElementById(id);
+      if (el) this.note(el, false);
+    }, { signal });
+    this.observer = new MutationObserver(this.onMutations);
+    this.observer.observe(document, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["class", "style", "hidden", "open", "aria-expanded", "aria-hidden", "data-state", "data-open", "data-headlessui-state"]
+    });
+    signal.addEventListener("abort", () => {
+      var _a;
+      (_a = this.observer) == null ? void 0 : _a.disconnect();
+      this.actions = [];
+      this.open.clear();
+    });
+  }
+  track(kind, el) {
+    const action = { kind, el, time: performance.now(), changed: /* @__PURE__ */ new Set(), added: /* @__PURE__ */ new Set() };
+    this.actions.push(action);
+    this.keep(action);
+    if (this.actions.length > 40) this.actions.shift();
+  }
+  keep(action) {
+    this.open.add(action);
+    setTimeout(() => this.open.delete(action), WINDOW);
+  }
+  target(event) {
+    const el = event.composedPath().find((node) => node instanceof Element);
+    return el && !this.ignore(el) ? el : null;
+  }
+  /** A change belongs to the newest action still in its window, or a submenu hover is credited to the first click. */
+  note(el, added) {
+    if (this.ignore(el)) return;
+    let action;
+    for (const candidate of this.actions) if (this.open.has(candidate)) action = candidate;
+    if (!action) return;
+    action.changed.add(el);
+    if (added) action.added.add(el);
+  }
+  lastAction(kind) {
+    for (let i = this.actions.length - 1; i >= 0; i--) if (this.actions[i].kind === kind) return this.actions[i];
+    return void 0;
+  }
+  /** The steps that show `target` again. Call it when the person picks the element. Empty when it is on the page itself. */
+  capture(target) {
+    const now = performance.now();
+    const steps = [];
+    const elements = [];
+    const used = /* @__PURE__ */ new Set();
+    let want = target;
+    for (let i = this.actions.length - 1; i >= 0 && steps.length < MAX_STEPS; i--) {
+      const action = this.actions[i];
+      if (now - action.time > MAX_AGE || used.has(action) || !action.el.isConnected || want.contains(action.el)) continue;
+      const el = action.kind === "press" ? pressable(action.el) : action.el;
+      if (el.contains(want) && !el.matches("label") || risky(el) || !this.opened(action, el, want)) continue;
+      if (action.kind === "hover" && !Array.from(action.added).some((node) => node.isConnected && node.contains(want)) && this.actions.some((press2) => press2.kind === "press" && press2.time <= action.time && action.time - press2.time < 800 && this.changedFor(press2, want))) continue;
+      if (action.kind === "hover" && elements[0] === el) continue;
+      steps.unshift({ action: action.kind, target: describe(el) });
+      elements.unshift(el);
+      used.add(action);
+      want = el;
+      if (this.onPage(el)) break;
+    }
+    const pseudo2 = pseudoSteps(target).filter((step) => !elements.includes(step.el)).map((step) => ({ action: step.action, target: describe(step.el) }));
+    return [...pseudo2, ...steps].slice(0, MAX_STEPS);
+  }
+  changedFor(action, want) {
+    for (const node of action.changed) {
+      if (!node.isConnected) continue;
+      if (node === want || node.contains(want)) return true;
+      if (node instanceof HTMLInputElement && /^(checkbox|radio)$/.test(node.type)) {
+        for (let sibling = node.nextElementSibling; sibling; sibling = sibling.nextElementSibling) if (sibling.contains(want)) return true;
+      }
+    }
+    return false;
+  }
+  opened(action, el, want) {
+    var _a, _b, _c;
+    if (this.changedFor(action, want)) return true;
+    if (action.kind !== "press") return false;
+    const control = el instanceof HTMLLabelElement ? el.control : null;
+    const popover = el.getAttribute("popovertarget");
+    const hash = el.matches('a[href^="#"]') ? el.getAttribute("href") : "";
+    return !!(popover && ((_a = document.getElementById(popover)) == null ? void 0 : _a.contains(want))) || !!(hash.length > 1 && location.hash === hash && ((_b = document.getElementById(hash.slice(1))) == null ? void 0 : _b.contains(want))) || !!(control instanceof HTMLInputElement && control.checked) || el.matches("summary") && !!((_c = el.parentElement) == null ? void 0 : _c.open) && el.parentElement.contains(want);
+  }
+  /** The trigger sits on the page itself, not inside a layer that another action opened. */
+  onPage(el) {
+    var _a;
+    if ((_a = el.parentElement) == null ? void 0 : _a.closest("[role=menu],[role=dialog],[role=listbox],[popover],dialog")) return false;
+    return !this.actions.some((action) => action.el !== el && !action.el.contains(el) && Array.from(action.changed).some((node) => node.isConnected && node !== document.body && node !== document.documentElement && node.contains(el)));
+  }
+}
+function pseudoSteps(target) {
+  const rules = [];
+  const walk = (list) => {
+    for (const rule of Array.from(list)) {
+      if (rule instanceof CSSStyleRule) {
+        if (/:(hover|focus-within)\b/.test(rule.selectorText) && Array.from(rule.style).some((p) => VISUAL.test(p))) rules.push(rule);
+      } else if ("cssRules" in rule) walk(rule.cssRules);
+    }
+  };
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      walk(sheet.cssRules);
+    } catch {
+    }
+  }
+  if (!rules.length) return [];
+  const steps = [];
+  for (const kind of ["hover", "focus-within"]) {
+    for (const el of Array.from(document.querySelectorAll(`:${kind}`))) {
+      if (el === document.documentElement || el === document.body || target.contains(el)) continue;
+      const shows = rules.some((rule) => rule.selectorText.split(",").some((selector) => {
+        const at = selector.indexOf(`:${kind}`);
+        if (at < 0 || !/^\s*[\s>~+]/.test(selector.slice(at + kind.length + 1)) || !selector.slice(at + kind.length + 1).trim()) return false;
+        try {
+          return el.matches(selector.slice(0, at).trim() || "*") && Array.from(document.querySelectorAll(selector.split(`:${kind}`).join(""))).some((shown) => shown !== el && (el.contains(shown) || shown.parentElement === el.parentElement) && shown.contains(target));
+        } catch {
+          return false;
+        }
+      }));
+      if (shows) steps.push({ action: kind === "hover" ? "hover" : "focus", el });
+    }
+  }
+  return steps.sort((a, b) => a.el.contains(b.el) ? -1 : b.el.contains(a.el) ? 1 : 0);
+}
+const frame = () => new Promise((done) => requestAnimationFrame(() => done()));
+async function waitFor(check, ms) {
+  const end = performance.now() + ms;
+  while (performance.now() < end) {
+    if (check()) return true;
+    await frame();
+  }
+  return check();
+}
+function pointer(el, type) {
+  const rect = el.getBoundingClientRect();
+  const init2 = {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    view: window,
+    button: 0,
+    buttons: type.endsWith("down") ? 1 : 0,
+    clientX: rect.left + rect.width / 2,
+    clientY: rect.top + rect.height / 2
+  };
+  el.dispatchEvent(type.startsWith("pointer") ? new PointerEvent(type, { ...init2, pointerId: 1, pointerType: "mouse", isPrimary: true }) : new MouseEvent(type, init2));
+}
+function press(el) {
+  var _a, _b;
+  for (const type of ["pointerover", "pointerenter", "mouseover", "mouseenter", "pointermove", "mousemove", "pointerdown", "mousedown"]) pointer(el, type);
+  (_a = el.focus) == null ? void 0 : _a.call(el, { preventScroll: true });
+  for (const type of ["pointerup", "mouseup"]) pointer(el, type);
+  (_b = el.click) == null ? void 0 : _b.call(el);
+}
+function key(el, name) {
+  var _a;
+  (_a = el.focus) == null ? void 0 : _a.call(el, { preventScroll: true });
+  for (const type of ["keydown", "keyup"]) el.dispatchEvent(new KeyboardEvent(type, { key: name, code: name === " " ? "Space" : name, bubbles: true, cancelable: true, composed: true }));
+}
+const looksOpen = (el) => {
+  var _a;
+  return el.matches("[aria-expanded=true],[data-state=open],[role=tab][aria-selected=true]") || el.matches("summary") && !!((_a = el.parentElement) == null ? void 0 : _a.open) || el instanceof HTMLInputElement && el.checked;
+};
+class PseudoStates {
+  constructor() {
+    __publicField(this, "sheet", null);
+    __publicField(this, "marked", []);
+  }
+  set(el, kind) {
+    const attr = `data-overplay-${kind}`;
+    const pattern = kind === "hover" ? /:hover\b/g : /:focus-within\b/g;
+    if (!this.sheet) {
+      try {
+        this.sheet = new CSSStyleSheet();
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.sheet];
+      } catch {
+        return;
+      }
+    }
+    const copy = (list, wrap) => {
+      for (const rule of Array.from(list)) {
+        if (rule instanceof CSSStyleRule && rule.selectorText.match(pattern)) {
+          try {
+            this.sheet.insertRule(wrap(`${rule.selectorText.replace(pattern, `[${attr}]`)}{${rule.style.cssText}}`), this.sheet.cssRules.length);
+          } catch {
+          }
+        } else if (rule instanceof CSSMediaRule) copy(rule.cssRules, (text) => wrap(`@media ${rule.media.mediaText}{${text}}`));
+      }
+    };
+    if (!this.marked.some(([, a]) => a === attr)) for (const sheet of Array.from(document.styleSheets)) {
+      try {
+        copy(sheet.cssRules, (text) => text);
+      } catch {
+      }
+    }
+    el.setAttribute(attr, "");
+    this.marked.push([el, attr]);
+  }
+  clear() {
+    for (const [el, attr] of this.marked) el.removeAttribute(attr);
+    this.marked = [];
+    if (this.sheet) {
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter((sheet) => sheet !== this.sheet);
+      this.sheet = null;
+    }
+  }
+}
+const pseudo = new PseudoStates();
+function clearReveal() {
+  pseudo.clear();
+}
+async function replay(steps, target) {
+  var _a;
+  const goal = () => isVisible(target());
+  if (goal()) return { shown: true };
+  for (let i = 0; i < steps.length; i++) {
+    const step = steps[i];
+    const el = findTarget(step.target);
+    if (step.action === "press" && el && risky(el)) return { shown: false };
+    if (!el || step.action !== "focus" && !isVisible(el)) return { shown: false, failed: step };
+    const next = steps[i + 1] ? () => isVisible(findTarget(steps[i + 1].target)) : goal;
+    if (step.action === "hover") {
+      for (const type of ["pointerover", "pointerenter", "mouseover", "mouseenter", "pointermove", "mousemove"]) pointer(el, type);
+      if (!await waitFor(next, 500)) {
+        pseudo.set(el, "hover");
+        if (!await waitFor(next, 300)) {
+          press(el);
+          if (!await waitFor(next, 500)) key(el, "ArrowRight");
+        }
+      }
+    } else if (step.action === "focus") {
+      (_a = el.focus) == null ? void 0 : _a.call(el, { preventScroll: true });
+      if (!await waitFor(next, 200)) pseudo.set(el, "focus");
+    } else if (!looksOpen(el)) {
+      const changed = () => next() || looksOpen(el);
+      press(el);
+      if (!await waitFor(changed, 900)) {
+        let worked = false;
+        for (const name of KEYS) {
+          key(el, name);
+          if (await waitFor(changed, 400)) {
+            worked = true;
+            break;
+          }
+        }
+        if (!worked) return { shown: false, failed: step };
+      }
+    }
+    await waitFor(next, 1200);
+  }
+  return { shown: await waitFor(goal, 1500) };
+}
+const CONTROL = "a[href],button,label,summary,select,textarea,input,[role=button],[role=link],[role=tab],[role=menuitem],[role=checkbox],[role=switch],[role=option]";
+const REPLACED = /* @__PURE__ */ new Set(["IMG", "svg", "VIDEO", "CANVAS", "IFRAME", "PICTURE", "INPUT", "SELECT", "TEXTAREA", "BUTTON"]);
+const area = (el) => {
+  const r = el.getBoundingClientRect();
+  return r.width * r.height;
+};
+function componentTarget(target, container) {
+  var _a;
+  const permitted = (el2) => el2 !== document.body && el2 !== document.documentElement && (!container || container.contains(el2)) && !el2.closest("[data-overplay]");
+  if (target.closest("[data-overplay]")) return null;
+  const keyed = target.closest("[data-overplay-anchor]");
+  const key2 = keyed == null ? void 0 : keyed.getAttribute("data-overplay-anchor");
+  const anchor = keyed && key2 && permitted(keyed) && resolveComponent(`[data-overplay-anchor="${CSS.escape(key2)}"]`, container) === keyed ? keyed : null;
+  let el = target;
+  if (el instanceof SVGElement) for (let svg = el.closest("svg"); svg; svg = ((_a = svg.parentElement) == null ? void 0 : _a.closest("svg")) ?? null) el = svg;
+  const control = el.closest(CONTROL);
+  if (control && permitted(control)) el = control;
+  else {
+    while (!REPLACED.has(el.tagName) && el.parentElement && permitted(el.parentElement) && /^(inline|contents)$/.test(getComputedStyle(el).display)) el = el.parentElement;
+  }
+  if (anchor && (el === anchor || !anchor.contains(el) || !permitted(el) || area(anchor) <= innerWidth * innerHeight / 4)) return anchor;
+  if (permitted(el)) return el;
+  if (container) return container;
+  return document.body.getClientRects().length && document.body.getBoundingClientRect().height ? document.body : document.documentElement;
+}
+const GENERATED_ID = /^(radix-|headlessui-|react-aria\d*-|mui-\d|ember\d|_r_)|[:«»]|^[a-f0-9]{8}-[a-f0-9]{4}-/i;
+const generatedId = (id) => GENERATED_ID.test(id);
+function componentSelector(target, container) {
+  const key2 = target.getAttribute("data-overplay-anchor");
+  if (key2 && resolveComponent(`[data-overplay-anchor="${CSS.escape(key2)}"]`, container) === target) {
+    return `[data-overplay-anchor="${CSS.escape(key2)}"]`;
+  }
+  if (target === document.body) return "body";
+  if (target === document.documentElement) return "html";
+  const parts = [];
+  for (let el = target; el && el !== document.body; el = el.parentElement) {
+    if (el.id && !generatedId(el.id) && document.querySelectorAll(`#${CSS.escape(el.id)}`).length === 1) {
+      parts.unshift(`#${CSS.escape(el.id)}`);
+      break;
+    }
+    const key22 = el !== target ? el.getAttribute("data-overplay-anchor") : null;
+    if (key22 && document.querySelectorAll(`[data-overplay-anchor="${CSS.escape(key22)}"]`).length === 1) {
+      parts.unshift(`[data-overplay-anchor="${CSS.escape(key22)}"]`);
+      break;
+    }
+    const siblings = el.parentElement ? Array.from(el.parentElement.children).filter((sibling) => sibling.tagName === el.tagName) : [];
+    parts.unshift(`${el.tagName.toLowerCase()}:nth-of-type(${siblings.indexOf(el) + 1})`);
+  }
+  return parts.join(" > ");
+}
+function resolveComponent(selector, container) {
+  try {
+    const matches = Array.from(document.querySelectorAll(selector)).filter((el) => !container || container.contains(el));
+    if (matches.length === 1) return matches[0];
+    const visible = matches.filter((el) => {
+      const rect = el.getBoundingClientRect();
+      return el.getClientRects().length && rect.width && rect.height && getComputedStyle(el).visibility === "visible";
+    });
+    return visible.length === 1 ? visible[0] : null;
+  } catch {
+    return null;
+  }
+}
+function componentPosition(comment, container) {
+  if (!comment.selector) return { x: comment.x - scrollX, y: comment.y - scrollY };
+  const target = resolveComponent(comment.selector, container);
+  if (!target || !target.getClientRects().length) return null;
+  const rect = target.getBoundingClientRect();
+  if (!rect.width || !rect.height || getComputedStyle(target).visibility !== "visible") return null;
+  const anchor = comment.anchor ?? { x: 0.5, y: 0.5 };
+  const point = { x: rect.left + rect.width * anchor.x, y: rect.top + rect.height * anchor.y };
+  for (let parent = target.parentElement; parent && parent !== document.body && parent !== document.documentElement; parent = parent.parentElement) {
+    const style = getComputedStyle(parent);
+    const bounds = parent.getBoundingClientRect();
+    const left = bounds.left + parent.clientLeft, top = bounds.top + parent.clientTop;
+    if (/(auto|scroll|hidden|clip)/.test(style.overflowX) && (point.x < left || point.x > left + parent.clientWidth)) return null;
+    if (/(auto|scroll|hidden|clip)/.test(style.overflowY) && (point.y < top || point.y > top + parent.clientHeight)) return null;
+  }
+  return point;
+}
+function revealElement(target) {
+  const chain = [];
+  for (let el = target instanceof HTMLElement ? target : target.parentElement; el && el !== document.body; el = el.parentElement) chain.unshift(el);
+  let changed = false;
+  for (const el of chain) {
+    if (el instanceof HTMLDetailsElement && !el.open) {
+      el.open = true;
+      changed = true;
+    }
+    if (el.hasAttribute("popover") && !el.matches(":popover-open")) {
+      try {
+        el.showPopover();
+        changed = true;
+      } catch {
+      }
+    }
+    if (!el.id || !(el.hidden || getComputedStyle(el).display === "none")) continue;
+    const id = CSS.escape(el.id);
+    const toggle = document.querySelector(`[aria-controls~="${id}"][aria-expanded="false"]`) ?? (el.getAttribute("role") === "tabpanel" ? document.querySelector(`[role=tab][aria-controls~="${id}"][aria-selected="false"]`) : null);
+    if (toggle) {
+      toggle.click();
+      changed = true;
+    }
+  }
+  return changed;
+}
+function elementState(comment, container) {
+  if (!comment.selector) return "shown";
+  let found = false;
+  try {
+    found = Array.from(document.querySelectorAll(comment.selector)).some((el) => !container || container.contains(el));
+  } catch {
+  }
+  if (!found) return "removed";
+  return isVisible(resolveComponent(comment.selector, container)) ? "shown" : "hidden";
+}
+function isDetached(comment, container) {
+  return elementState(comment, container) !== "shown";
+}
+const KINDS = [
+  ["input[type=checkbox],[role=checkbox]", "Checkbox"],
+  ["input[type=radio],[role=radio]", "Option"],
+  ["[role=switch]", "Switch"],
+  ["button,input[type=button],input[type=submit],[role=button]", "Button"],
+  ["a[href],[role=link]", "Link"],
+  ["[role=tab]", "Tab"],
+  ["[role=menuitem]", "Menu item"],
+  ["[role=option],option", "Option"],
+  ["select", "Menu"],
+  ["input,textarea", "Field"],
+  ["img,picture,[role=img]", "Image"],
+  ["svg", "Icon"],
+  ["video", "Video"],
+  ["canvas", "Canvas"],
+  ["iframe", "Frame"],
+  ["h1,h2,h3,h4,h5,h6,[role=heading]", "Heading"],
+  ["label", "Label"],
+  ["li", "List item"],
+  ["tr", "Row"],
+  ["td,th", "Cell"],
+  ["table", "Table"],
+  ["nav", "Navigation"],
+  ["form", "Form"],
+  ["p", "Text"],
+  ["summary", "Button"]
+];
+const clean = (text, max = 48) => {
+  const value = (text ?? "").replace(/\s+/g, " ").trim();
+  return value.length > max ? `${value.slice(0, max - 1).trimEnd()}…` : value;
+};
+const byIds = (ids) => clean(ids == null ? void 0 : ids.split(/\s+/).map((id) => {
+  var _a;
+  return ((_a = document.getElementById(id)) == null ? void 0 : _a.textContent) ?? "";
+}).join(" "));
+function nameOf(el) {
+  var _a, _b;
+  const field = el;
+  const label = el.id ? document.querySelector(`label[for="${CSS.escape(el.id)}"]`) : null;
+  return clean(el.getAttribute("aria-label")) || byIds(el.getAttribute("aria-labelledby")) || clean(el.getAttribute("alt")) || clean(label == null ? void 0 : label.textContent) || clean((_a = el.closest("label")) == null ? void 0 : _a.textContent) || clean(field.placeholder) || clean(el.getAttribute("title")) || clean((_b = el.querySelector("title")) == null ? void 0 : _b.textContent) || clean(el.innerText ?? el.textContent);
+}
+const words = (key2) => clean(key2.replace(/[-_:./]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase()));
+function describeElement(el) {
+  var _a, _b, _c;
+  const key2 = el.getAttribute("data-overplay-anchor");
+  const kind = key2 ? words(key2) : ((_a = KINDS.find(([selector]) => el.matches(selector))) == null ? void 0 : _a[1]) ?? (el === document.body || el === document.documentElement ? "Page" : "Element");
+  const name = key2 || el === document.body || el === document.documentElement ? "" : nameOf(el);
+  const info = { label: name && name !== kind ? `${kind} “${name}”` : kind };
+  for (let parent = el.parentElement; parent && parent !== document.body; parent = parent.parentElement) {
+    const id = parent.id ? CSS.escape(parent.id) : "";
+    const toggle = id ? document.querySelector(`[aria-controls~="${id}"]`) : null;
+    const place = toggle ? nameOf(toggle) : parent instanceof HTMLDetailsElement ? clean((_b = parent.querySelector("summary")) == null ? void 0 : _b.textContent) : parent instanceof HTMLFieldSetElement ? clean((_c = parent.querySelector("legend")) == null ? void 0 : _c.textContent) : parent.hasAttribute("data-overplay-anchor") ? words(parent.getAttribute("data-overplay-anchor")) : parent.matches("[role=dialog],[role=menu],[role=listbox],[role=tabpanel],dialog,nav,section,aside,form,[popover]") ? clean(parent.getAttribute("aria-label")) || byIds(parent.getAttribute("aria-labelledby")) : "";
+    if (place && place !== name) {
+      info.place = place;
+      break;
+    }
+  }
+  return info;
+}
+const DEFAULT_FILTERS = Object.freeze({ status: "open", query: "", mine: false, author: "" });
+const MAX_QUERY = 200, MAX_WORDS = 8;
+function foldChar(char) {
+  return char.normalize("NFKD").replace(new RegExp("\\p{M}", "gu"), "").toLowerCase();
+}
+function fold(text) {
+  let folded = "";
+  const map = [];
+  for (let i = 0; i < text.length; ) {
+    const code = text.codePointAt(i), char = String.fromCodePoint(code), part = foldChar(char);
+    for (let j = 0; j < part.length; j++) map.push(i);
+    folded += part;
+    i += char.length;
+  }
+  map.push(text.length);
+  return { folded, map };
+}
+function parseQuery(query) {
+  const words2 = fold(query.slice(0, MAX_QUERY)).folded.split(/\s+/).filter(Boolean);
+  return [...new Set(words2)].slice(0, MAX_WORDS);
+}
+const includesAll = (text, words2) => {
+  const folded = fold(text).folded;
+  return words2.filter((word) => folded.includes(word));
+};
+function highlightRanges(text, words2) {
+  if (!words2.length || !text) return [];
+  const { folded, map } = fold(text), ranges = [];
+  for (const word of words2) {
+    for (let at = folded.indexOf(word); at !== -1; at = folded.indexOf(word, at + word.length)) {
+      const start = map[at], last = map[at + word.length - 1];
+      const end = map.slice(at + word.length).find((index) => index > last) ?? text.length;
+      ranges.push([start, end]);
+    }
+  }
+  ranges.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  const merged = [];
+  for (const range of ranges) {
+    const previous = merged[merged.length - 1];
+    if (previous && range[0] <= previous[1]) previous[1] = Math.max(previous[1], range[1]);
+    else merged.push([...range]);
+  }
+  return merged;
+}
+function excerpt(text, words2, size = 90) {
+  var _a;
+  const clean2 = text.replace(/\s+/g, " ").trim();
+  if (clean2.length <= size) return clean2;
+  const first = ((_a = highlightRanges(clean2, words2)[0]) == null ? void 0 : _a[0]) ?? 0;
+  const start = Math.max(0, Math.min(first - Math.floor(size / 3), clean2.length - size));
+  return `${start > 0 ? "…" : ""}${clean2.slice(start, start + size).trim()}${start + size < clean2.length ? "…" : ""}`;
+}
+function elementName(info) {
+  return info ? info.place ? `${info.label} in ${info.place}` : info.label : "";
+}
+function matchNote(comment, words2, context = {}) {
+  if (!words2.length) return {};
+  const element2 = elementName(context.elementOf ? context.elementOf(comment) : comment.element);
+  const own = [comment.text, comment.author, context.includePage ? `${comment.pageTitle ?? ""} ${comment.pageUrl}` : ""].join("\n");
+  const found = new Set(includesAll(own, words2));
+  const match = {};
+  if (found.size < words2.length) {
+    for (const reply2 of comment.replies) {
+      const hits = includesAll(`${reply2.text}
+${reply2.author}`, words2);
+      if (hits.some((word) => !found.has(word))) {
+        match.reply ?? (match.reply = reply2);
+        hits.forEach((word) => found.add(word));
+      }
+    }
+  }
+  if (found.size < words2.length && element2) {
+    const hits = includesAll(element2, words2);
+    if (hits.some((word) => !found.has(word))) {
+      match.element = element2;
+      hits.forEach((word) => found.add(word));
+    }
+  }
+  return found.size === words2.length ? match : null;
+}
+function authorKey(note) {
+  return note.authorId ? `id:${note.authorId}` : `name:${note.author.trim().toLowerCase()}`;
+}
+function isMine(note, userId) {
+  return !!note.authorId && note.authorId === userId;
+}
+function statusMatches(comment, status) {
+  return status === "all" || (status === "resolved" ? comment.resolved : !comment.resolved);
+}
+function filterNotes(comments, filters, context) {
+  const words2 = parseQuery(filters.query);
+  return comments.filter((c) => statusMatches(c, filters.status) && (!filters.mine || isMine(c, context.userId)) && (!filters.author || authorKey(c) === filters.author) && !!matchNote(c, words2, context));
+}
+function filterCounts(comments, filters, context) {
+  const words2 = parseQuery(filters.query);
+  const searched = comments.filter((c) => !!matchNote(c, words2, context));
+  const byPerson = (c) => (!filters.mine || isMine(c, context.userId)) && (!filters.author || authorKey(c) === filters.author);
+  const people = searched.filter(byPerson);
+  const inStatus = searched.filter((c) => statusMatches(c, filters.status));
+  const authors = /* @__PURE__ */ new Map();
+  for (const c of comments) {
+    const key2 = authorKey(c), entry = authors.get(key2) ?? { key: key2, name: c.author, count: 0 };
+    entry.name = c.author;
+    authors.set(key2, entry);
+  }
+  for (const c of inStatus) {
+    const entry = authors.get(authorKey(c));
+    if (entry) entry.count++;
+  }
+  return {
+    open: people.filter((c) => !c.resolved).length,
+    resolved: people.filter((c) => c.resolved).length,
+    all: people.length,
+    mine: inStatus.filter((c) => isMine(c, context.userId)).length,
+    authors: [...authors.values()].sort((a, b) => a.name.localeCompare(b.name) || a.key.localeCompare(b.key))
+  };
+}
+function filtersActive(filters) {
+  return !!filters.query.trim() || filters.mine || !!filters.author;
+}
+function clearFilters(comments) {
+  return { ...DEFAULT_FILTERS, status: comments.some((c) => !c.resolved) || !comments.length ? "open" : "all" };
+}
+function readFilters(value) {
+  const v = value && typeof value === "object" ? value : {};
+  return {
+    status: v.status === "resolved" || v.status === "all" ? v.status : "open",
+    query: typeof v.query === "string" ? v.query.slice(0, MAX_QUERY) : "",
+    mine: v.mine === true,
+    author: typeof v.author === "string" ? v.author.slice(0, 300) : ""
+  };
+}
+const THEMES = ["light", "dark", "system"];
+const LAUNCHER = 52, EDGE = 12, SIDEBAR = 400, PIN_HEIGHT = 36, PIN_HALF = 16;
+const UPDATE_DISMISSED = "overplay:update-dismissed";
+const clamp = (value, min, max) => Math.max(min, Math.min(Math.max(min, max), value));
+function eventInit(event) {
+  const e = event;
+  return {
+    view: window,
+    clientX: e.clientX,
+    clientY: e.clientY,
+    screenX: e.screenX,
+    screenY: e.screenY,
+    button: e.button,
+    buttons: e.buttons,
+    ctrlKey: e.ctrlKey,
+    shiftKey: e.shiftKey,
+    altKey: e.altKey,
+    metaKey: e.metaKey,
+    pointerId: e.pointerId,
+    pointerType: e.pointerType,
+    isPrimary: e.isPrimary,
+    width: e.width,
+    height: e.height,
+    pressure: e.pressure
+  };
+}
+function matchAll(selector) {
+  try {
+    return Array.from(document.querySelectorAll(selector));
+  } catch {
+    return [];
+  }
+}
+function readSpot(key2) {
+  try {
+    const value = JSON.parse(localStorage.getItem(key2) || "null");
+    return value && Number.isFinite(value.x) && Number.isFinite(value.y) ? { x: clamp(value.x, 0, 1), y: clamp(value.y, 0, 1) } : null;
+  } catch {
+    return null;
+  }
+}
+function pageLabel(pageUrl) {
+  try {
+    const url = new URL(pageUrl, location.href);
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return pageUrl;
+  }
+}
+function pageTitle() {
+  const clean2 = (text) => (text ?? "").replace(/\s+/g, " ").trim();
+  const title = clean2(document.title);
+  const heading = Array.from(document.querySelectorAll("main h1, [role=main] h1, h1")).find((h) => !h.closest("[data-overplay]") && h.getClientRects().length);
+  const name = clean2(heading == null ? void 0 : heading.textContent).slice(0, 120);
+  const generic = !title || title.toLowerCase() === location.hostname.toLowerCase() || !/[-–—|·:]/.test(title) && !!name && !title.includes(name);
+  return (generic && name ? name : title || name).slice(0, 300) || void 0;
+}
+function marked(target, text, words2) {
+  let at = 0;
+  for (const [start, end] of highlightRanges(text, words2.filter((word) => word.length > 1))) {
+    if (start > at) target.append(document.createTextNode(text.slice(at, start)));
+    target.append(element("mark", "hit", text.slice(start, end)));
+    at = end;
+  }
+  target.append(document.createTextNode(text.slice(at)));
+  return target;
+}
+class Overlay {
+  constructor(config = {}) {
+    __publicField(this, "ready");
+    __publicField(this, "config");
+    __publicField(this, "storage");
+    __publicField(this, "host", element("div"));
+    __publicField(this, "shadow");
+    __publicField(this, "surface", element("div"));
+    __publicField(this, "pins", element("div", "pins"));
+    /** While placing: the component under the pointer, outlined before the click. */
+    __publicField(this, "pickTarget", null);
+    __publicField(this, "live", element("div", "sr-only"));
+    __publicField(this, "toasts", element("div", "toasts"));
+    __publicField(this, "toastTimers", /* @__PURE__ */ new Set());
+    __publicField(this, "seen", /* @__PURE__ */ new Set());
+    __publicField(this, "seenKey", "");
+    __publicField(this, "detailKey", "");
+    __publicField(this, "events", new AbortController());
+    __publicField(this, "resizeObserver");
+    __publicField(this, "mutationObserver");
+    __publicField(this, "anchorObserver");
+    __publicField(this, "observedAnchors", /* @__PURE__ */ new Set());
+    __publicField(this, "unsubscribe");
+    __publicField(this, "routeTimer");
+    __publicField(this, "frame", 0);
+    __publicField(this, "motionFrame", 0);
+    __publicField(this, "destroyed", false);
+    __publicField(this, "visible", false);
+    __publicField(this, "placing", false);
+    /** A pin being dragged, in viewport coordinates. It stays set until the move is saved, so the pin does not jump back. */
+    __publicField(this, "pinDrag", null);
+    __publicField(this, "suppressPinClick", false);
+    __publicField(this, "loading", true);
+    /** The current page and account have loaded once. Later loads keep the list on screen. */
+    __publicField(this, "loaded", false);
+    __publicField(this, "loadFailed", false);
+    __publicField(this, "saving", false);
+    __publicField(this, "error", "");
+    __publicField(this, "comments", []);
+    __publicField(this, "activeId", null);
+    __publicField(this, "draft", null);
+    __publicField(this, "text", "");
+    __publicField(this, "replyText", "");
+    __publicField(this, "replyId", newId());
+    /** Search, status, Mine and author for the list and the pins. Kept for this browser tab (session storage). */
+    __publicField(this, "filters", { ...DEFAULT_FILTERS });
+    __publicField(this, "scope", "page");
+    __publicField(this, "filterKey");
+    __publicField(this, "searchTimer");
+    __publicField(this, "launcherKey");
+    __publicField(this, "openKey");
+    __publicField(this, "launcherSpot");
+    __publicField(this, "dragging", false);
+    __publicField(this, "suppressClick", false);
+    __publicField(this, "highlightId", null);
+    __publicField(this, "hoverId", null);
+    __publicField(this, "highlightTimer");
+    __publicField(this, "sidebarOpen", false);
+    /** Show the open comment in the sidebar instead of next to its pin. The person's choice is saved. */
+    __publicField(this, "docked", false);
+    __publicField(this, "dockKey");
+    __publicField(this, "project");
+    /** The person's display choices for this project, read again when the account changes. */
+    __publicField(this, "settingsCache", null);
+    /** A newer npm version, found when the sidebar first opens. See checkForUpdate(). */
+    __publicField(this, "update", null);
+    __publicField(this, "updateChecked", false);
+    /** The page margin we replaced to make room for the sidebar, restored when it closes. */
+    __publicField(this, "pushed", null);
+    /** Records how menus were opened, so a note in a menu can open it again. See src/core/reveal.ts. */
+    __publicField(this, "recorder", new RevealRecorder((el) => el === this.host || el.getRootNode() === this.shadow, () => this.placing || !!this.pinDrag));
+    /** The note whose menu Show Element opened, and the result. The menu stays open while that note is open. */
+    __publicField(this, "revealed", null);
+    /** Show Element is pressing the page's menu buttons. A label's click on its checkbox counts as trusted, so we also check this. */
+    __publicField(this, "replaying", false);
+    /** A view that fills the sidebar instead of the list: the guest name form or the settings. */
+    __publicField(this, "editing", null);
+    __publicField(this, "user");
+    __publicField(this, "managedUser");
+    __publicField(this, "identityKey");
+    __publicField(this, "persistentGuest");
+    __publicField(this, "pageId");
+    __publicField(this, "loadVersion", 0);
+    __publicField(this, "queuedSnapshot", null);
+    __publicField(this, "returnFocus", null);
+    __publicField(this, "shortcut");
+    __publicField(this, "composing", false);
+    __publicField(this, "renderDeferred", false);
+    __publicField(this, "applyQueuedSnapshot", () => {
+      if (this.destroyed || !this.queuedSnapshot || this.saving || this.loading || this.typing()) return;
+      const next = this.queuedSnapshot;
+      this.queuedSnapshot = null;
+      this.apply(next);
+    });
+    __publicField(this, "receiveSnapshot", (comments) => {
+      if (this.destroyed) return;
+      try {
+        const normalized = normalizeComments(comments);
+        if (this.saving || this.loading || this.typing()) this.queuedSnapshot = normalized;
+        else this.apply(normalized);
+      } catch (error) {
+        this.report(error);
+        this.render();
+      }
+    });
+    __publicField(this, "shieldPress", (event) => {
+      if (!event.isTrusted || !event.composedPath().includes(this.host)) return;
+      event.stopImmediatePropagation();
+      const inner = event.composedPath()[0];
+      if (event.type === "touchstart" || !(inner instanceof Element) || inner.getRootNode() !== this.shadow) return;
+      if (!event.composedPath().some((el) => el instanceof Element && el.matches("[role=menu],[aria-haspopup=menu]"))) this.closeMenus();
+      const Copy = event.constructor;
+      inner.dispatchEvent(new Copy(event.type, Object.assign({}, eventInit(event), { bubbles: true, cancelable: true, composed: false })));
+    });
+    __publicField(this, "onRouteChange", () => {
+      if (this.destroyed) return;
+      const next = this.currentPage();
+      if (next !== this.pageId) {
+        this.pageId = next;
+        this.activeId = null;
+        this.draft = null;
+        this.placing = false;
+        this.text = "";
+        this.replyText = "";
+        this.noticeActivity();
+        this.render();
+        if (this.storage instanceof HostedAdapter) void this.refresh();
+        else this.openPending();
+      }
+    });
+    __publicField(this, "onKeyDown", (event) => {
+      if (event.defaultPrevented || event.isComposing) return;
+      const opener = event.key === "Escape" ? this.closeMenus() : null;
+      if (opener) {
+        event.preventDefault();
+        opener.focus();
+        return;
+      }
+      if (event.key === "Escape" && this.visible) {
+        event.preventDefault();
+        if (this.draft || this.placing || this.activeId || this.editing) this.closePopup();
+        else this.hide();
+        return;
+      }
+      const target = event.composedPath()[0];
+      if (this.placing && event.key === "Enter" && !event.composedPath().includes(this.host)) {
+        const el = target instanceof Element && target !== document.body ? target : this.config.container ?? document.documentElement;
+        if (this.config.container && !this.config.container.contains(el) && el !== this.config.container) return;
+        const rect = el.getBoundingClientRect();
+        const x = Math.max(16, Math.min(innerWidth - 16, rect.left + rect.width / 2));
+        const y = Math.max(48, Math.min(innerHeight - 48, rect.top + Math.min(rect.height / 2, innerHeight / 2)));
+        event.preventDefault();
+        this.choosePoint({ x: x + scrollX, y: y + scrollY }, el);
+        return;
+      }
+      if (target instanceof Element && (target.closest("input,textarea,select,[contenteditable]:not([contenteditable=false])") || target.closest("[role=textbox]"))) return;
+      if (!event.repeat && this.settings.shortcut && this.shortcut && matchesShortcut(event, this.shortcut)) {
+        event.preventDefault();
+        if (this.visible) this.hide();
+        else this.show();
+      }
+    });
+    __publicField(this, "onPageClick", (event) => {
+      if (event.composedPath().includes(this.host)) return;
+      if (!this.placing) {
+        if (!event.isTrusted || this.replaying) return;
+        const open = this.activeId ? !this.replyText.trim() : this.draft ? !this.text.trim() : false;
+        if (this.visible && open && !this.docked && !this.saving) this.closePopup(false);
+        return;
+      }
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+      const target = event.target;
+      if (!(target instanceof Element) || this.config.container && !this.config.container.contains(target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.choosePoint({ x: event.clientX + scrollX, y: event.clientY + scrollY }, target);
+    });
+    __publicField(this, "onPointerMove", (event) => {
+      const preview = this.pins.querySelector(".preview");
+      if (!preview) return;
+      const target = event.target;
+      const inside = !this.config.container || target instanceof Node && this.config.container.contains(target);
+      preview.hidden = event.composedPath().includes(this.host) || !inside;
+      preview.style.left = `${event.clientX}px`;
+      preview.style.top = `${event.clientY}px`;
+      const component = !preview.hidden && target instanceof Element ? componentTarget(target, this.config.container) : null;
+      this.pickTarget = component === document.body || component === document.documentElement ? null : component;
+      this.placePickRing();
+    });
+    __publicField(this, "trackLayoutMotion", () => {
+      if (this.motionFrame || !this.visible || this.destroyed) return;
+      const tick = () => {
+        this.motionFrame = 0;
+        if (!this.visible || this.destroyed) return;
+        this.positionPins();
+        if (document.getAnimations().some((animation) => animation.playState === "running")) {
+          this.motionFrame = requestAnimationFrame(tick);
+        }
+      };
+      this.motionFrame = requestAnimationFrame(tick);
+    });
+    __publicField(this, "schedulePosition", () => {
+      if (this.frame || this.destroyed || !this.visible) return;
+      this.frame = requestAnimationFrame(() => {
+        this.frame = 0;
+        this.positionPins();
+      });
+    });
+    /**
+     * The open sidebar pushes the page aside instead of covering it, so every part of the page can still get a comment.
+     * It adds a margin to <html> on the sidebar's side and restores the page's own value when it closes.
+     * Phones keep the full-screen sidebar. Set pushContent: false to keep the sidebar above the page.
+     */
+    __publicField(this, "pushPage", () => {
+      var _a;
+      const root = document.documentElement;
+      const want = this.sidebarOpen && this.settings.pushContent && innerWidth > 600;
+      const property = ((_a = this.config.position) == null ? void 0 : _a.endsWith("left")) ? "margin-left" : "margin-right";
+      if (want && !this.pushed) {
+        this.pushed = { property, value: root.style.getPropertyValue(property), priority: root.style.getPropertyPriority(property) };
+        root.style.setProperty(property, `${SIDEBAR}px`, "important");
+      } else if (!want && this.pushed) {
+        const { property: property2, value, priority } = this.pushed;
+        this.pushed = null;
+        if (value) root.style.setProperty(property2, value, priority);
+        else root.style.removeProperty(property2);
+      }
+    });
+    /** Keeps a dragged launcher inside the viewport when the window size changes. */
+    __publicField(this, "placeLauncher", () => {
+      const launcher = this.shadow.querySelector(".launcher");
+      if (!launcher || !this.launcherSpot) return;
+      const left = clamp(this.launcherSpot.x * innerWidth - LAUNCHER / 2, EDGE, innerWidth - LAUNCHER - EDGE);
+      const top = clamp(this.launcherSpot.y * innerHeight - LAUNCHER / 2, EDGE, innerHeight - LAUNCHER - EDGE);
+      Object.assign(launcher.style, { left: `${left}px`, top: `${top}px`, right: "auto", bottom: "auto" });
+    });
+    __publicField(this, "submitComment", () => {
+      if (!this.draft || !this.text.trim()) return;
+      const draft = this.draft;
+      const comment = {
+        id: draft.id,
+        x: draft.position.x,
+        y: draft.position.y,
+        text: this.text.trim(),
+        author: this.user.name,
+        authorId: this.user.id,
+        avatarUrl: this.user.avatarUrl,
+        timestamp: draft.timestamp,
+        replies: [],
+        resolved: false,
+        pageUrl: draft.pageUrl,
+        pageTitle: pageTitle(),
+        selector: draft.selector,
+        anchor: draft.anchor,
+        element: draft.element
+      };
+      const next = [...this.getAllComments(), comment];
+      void this.mutate(next, () => this.storage.upsertComment ? this.storage.upsertComment(comment) : this.storage.saveComments(next), () => {
+        this.draft = null;
+        this.text = "";
+        this.activeId = comment.id;
+      });
+    });
+    __publicField(this, "submitReply", () => {
+      const comment = this.comments.find((c) => c.id === this.activeId);
+      if (!comment || !this.replyText.trim()) return;
+      const reply2 = {
+        id: this.replyId,
+        text: this.replyText.trim(),
+        author: this.user.name,
+        authorId: this.user.id,
+        avatarUrl: this.user.avatarUrl,
+        timestamp: /* @__PURE__ */ new Date(),
+        commentId: comment.id
+      };
+      const updated = { ...comment, replies: [...comment.replies, reply2] };
+      const next = this.getAllComments().map((c) => c.id === comment.id ? updated : c);
+      void this.mutate(next, () => this.storage.addReply ? this.storage.addReply(comment.id, reply2) : this.storage.upsertComment ? this.storage.upsertComment(updated) : this.storage.saveComments(next), () => {
+        this.replyText = "";
+        this.replyId = newId();
+      });
+    });
+    var _a, _b, _c;
+    this.config = { primaryColor: "#0068f9", position: "bottom-right", keyboardShortcut: "alt+shift+c", enableKeyboardShortcuts: true, ...config };
+    if (!/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(this.config.primaryColor ?? "")) {
+      throw new Error("primaryColor must be a 3- or 6-digit hex color.");
+    }
+    if (this.config.theme !== void 0 && !THEMES.includes(this.config.theme)) throw new Error('theme must be "light", "dark" or "system".');
+    this.shortcut = parseShortcut(this.config.keyboardShortcut ?? "");
+    if (this.config.enableKeyboardShortcuts && !this.shortcut) throw new Error('keyboardShortcut must be a key such as "alt+shift+c".');
+    const project = config.projectId || location.hostname || "default";
+    this.identityKey = `overplay:${project}:user`;
+    this.launcherKey = `overplay:${project}:launcher`;
+    this.openKey = `overplay:${project}:open`;
+    this.dockKey = `overplay:${project}:docked`;
+    this.filterKey = `overplay:${project}:filters`;
+    this.restoreFilters();
+    this.project = project;
+    try {
+      this.docked = localStorage.getItem(this.dockKey) === "1";
+    } catch {
+    }
+    this.launcherSpot = readSpot(this.launcherKey);
+    const guest = guestIdentity(this.identityKey);
+    this.user = config.user ? validateUser(config.user) : guest.user;
+    this.persistentGuest = guest.persistent;
+    this.managedUser = !!config.user;
+    if (config.serverUrl && (!config.projectId || config.storage || config.user)) throw new Error("Hosted mode requires projectId and manages storage and user itself.");
+    this.storage = config.serverUrl ? new HostedAdapter(config.serverUrl, project, () => this.currentPage(), (user) => this.hostedSession(user)) : config.storage ?? new LocalStorageAdapter(`overplay:${project}:comments`);
+    if (config.serverUrl) {
+      this.user = { id: "signed-out", name: "Sign in" };
+      this.managedUser = true;
+    }
+    this.pageId = this.currentPage();
+    this.host.dataset.overplay = "root";
+    this.host.style.cssText = "all:initial;position:fixed;inset:0;pointer-events:none;z-index:2147483646;";
+    this.shadow = this.host.attachShadow({ mode: "open" });
+    const style = element("style");
+    style.textContent = styles;
+    if (config.nonce) style.nonce = config.nonce;
+    this.host.style.setProperty("--cw-accent", this.config.primaryColor);
+    this.live.setAttribute("role", "status");
+    this.live.setAttribute("aria-live", "polite");
+    this.toasts.setAttribute("role", "status");
+    this.toasts.setAttribute("aria-live", "polite");
+    this.shadow.append(style, this.pins, this.surface, this.toasts, this.live);
+    document.body.append(this.host);
+    const options = { signal: this.events.signal };
+    if (this.config.autoReveal !== false) this.recorder.start(this.events.signal);
+    for (const type of ["pointerdown", "mousedown", "pointerup", "mouseup", "click", "touchstart", "touchend", "focusin", "focusout"]) {
+      this.host.addEventListener(type, (event) => event.stopPropagation(), options);
+    }
+    for (const type of ["pointerdown", "mousedown", "touchstart"]) window.addEventListener(type, this.shieldPress, { ...options, capture: true });
+    window.addEventListener("focusin", (event) => {
+      if (event.composedPath().includes(this.host)) event.stopImmediatePropagation();
+    }, { ...options, capture: true });
+    window.addEventListener("focusout", (event) => {
+      if (event.relatedTarget === this.host && !event.composedPath().includes(this.host)) event.stopImmediatePropagation();
+    }, { ...options, capture: true });
+    const unhide = new MutationObserver(() => {
+      this.host.removeAttribute("aria-hidden");
+      this.host.removeAttribute("inert");
+    });
+    unhide.observe(this.host, { attributes: true, attributeFilter: ["aria-hidden", "inert"] });
+    this.events.signal.addEventListener("abort", () => unhide.disconnect());
+    this.shadow.addEventListener("compositionstart", () => {
+      this.composing = true;
+    }, options);
+    this.shadow.addEventListener("compositionend", () => {
+      this.composing = false;
+      if (this.renderDeferred) {
+        this.renderDeferred = false;
+        this.render();
+      }
+    }, options);
+    this.shadow.addEventListener("focusout", () => setTimeout(this.applyQueuedSnapshot), options);
+    document.addEventListener("keydown", this.onKeyDown, options);
+    document.addEventListener("click", this.onPageClick, { ...options, capture: true });
+    document.addEventListener("pointerdown", (event) => {
+      if (!event.composedPath().some((el) => el instanceof Element && el.matches("[role=menu],[aria-haspopup=menu]"))) this.closeMenus();
+    }, { ...options, capture: true });
+    document.addEventListener("pointermove", this.onPointerMove, { ...options, passive: true });
+    window.addEventListener("scroll", this.schedulePosition, { ...options, capture: true, passive: true });
+    window.addEventListener("resize", this.schedulePosition, options);
+    window.addEventListener("resize", this.placeLauncher, options);
+    window.addEventListener("resize", this.pushPage, options);
+    (_a = window.visualViewport) == null ? void 0 : _a.addEventListener("resize", this.schedulePosition, options);
+    (_b = window.visualViewport) == null ? void 0 : _b.addEventListener("scroll", this.schedulePosition, options);
+    window.addEventListener("popstate", this.onRouteChange, options);
+    window.addEventListener("hashchange", this.onRouteChange, options);
+    this.resizeObserver = new ResizeObserver(this.schedulePosition);
+    this.resizeObserver.observe(config.container ?? document.documentElement);
+    this.anchorObserver = new ResizeObserver(this.schedulePosition);
+    document.addEventListener("load", this.schedulePosition, { ...options, capture: true });
+    (_c = document.fonts) == null ? void 0 : _c.addEventListener("loadingdone", this.schedulePosition, options);
+    document.addEventListener("transitionrun", this.trackLayoutMotion, { ...options, capture: true });
+    document.addEventListener("animationstart", this.trackLayoutMotion, { ...options, capture: true });
+    this.mutationObserver = new MutationObserver(this.schedulePosition);
+    this.mutationObserver.observe(config.container ?? document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "id", "data-overplay-anchor", "hidden", "open"] });
+    this.routeTimer = setInterval(this.onRouteChange, 500);
+    this.render();
+    this.ready = this.refresh().then(() => {
+      if (!this.destroyed && this.storage.subscribeToChanges) {
+        try {
+          this.unsubscribe = this.storage.subscribeToChanges(this.receiveSnapshot);
+        } catch (error) {
+          this.report(error);
+          this.render();
+        }
+      }
+    });
+  }
+  /** Site defaults come from the configuration. Each person can change them for this project. */
+  settingDefaults() {
+    return {
+      theme: this.config.theme ?? "light",
+      pinColor: "site",
+      buttonColor: "default",
+      resolvedPins: "green",
+      pinSize: "regular",
+      pinLabel: "number",
+      pushContent: this.config.pushContent !== false,
+      notifications: this.config.showNotifications !== false,
+      shortcut: !!this.config.enableKeyboardShortcuts && !!this.shortcut
+    };
+  }
+  /** Saved per project and per account, so people who share a browser keep their own choices. */
+  settingsKey() {
+    return `overplay:${this.project}:settings:${this.user.id}`;
+  }
+  get settings() {
+    var _a;
+    const key2 = this.settingsKey();
+    if (((_a = this.settingsCache) == null ? void 0 : _a.key) !== key2) this.settingsCache = { key: key2, value: readSettings(key2, this.settingDefaults()) };
+    return this.settingsCache.value;
+  }
+  setSetting(name, value) {
+    const key2 = this.settingsKey(), settings = { ...this.settings, [name]: value };
+    this.settingsCache = { key: key2, value: settings };
+    if (!writeSettings(key2, settings, this.settingDefaults())) this.announce("Browser storage is unavailable. This choice lasts for this page view.");
+    this.render();
+  }
+  setTheme(theme) {
+    if (!THEMES.includes(theme)) throw new Error('theme must be "light", "dark" or "system".');
+    if (this.destroyed || this.config.theme === theme) return;
+    this.config.theme = theme;
+    this.settingsCache = null;
+    this.render();
+  }
+  resetSettings() {
+    const key2 = this.settingsKey(), defaults = this.settingDefaults();
+    writeSettings(key2, defaults, defaults);
+    this.settingsCache = { key: key2, value: defaults };
+    this.docked = false;
+    try {
+      localStorage.removeItem(this.dockKey);
+    } catch {
+    }
+    this.render();
+    this.announce("Settings reset to the site defaults.");
+  }
+  currentPage() {
+    var _a, _b;
+    return ((_b = (_a = this.config).getPageId) == null ? void 0 : _b.call(_a)) ?? defaultPageId(location);
+  }
+  onCurrentPage(pageUrl) {
+    const page = this.currentPage();
+    return this.config.getPageId ? pageUrl === page : samePage(pageUrl, page);
+  }
+  /** A field in the widget has focus. Background updates wait so typing, undo and IME input are not interrupted. */
+  typing() {
+    const active = this.shadow.activeElement;
+    return this.composing || active instanceof HTMLTextAreaElement || active instanceof HTMLInputElement;
+  }
+  announce(message) {
+    this.live.textContent = message;
+  }
+  report(error) {
+    var _a, _b;
+    const failure = error instanceof Error ? error : new Error("Could not save your changes.");
+    this.error = failure.message;
+    this.announce(failure.message);
+    try {
+      (_b = (_a = this.config).onError) == null ? void 0 : _b.call(_a, failure);
+    } catch {
+    }
+  }
+  changed() {
+    var _a, _b;
+    try {
+      (_b = (_a = this.config).onChange) == null ? void 0 : _b.call(_a, this.getAllComments());
+    } catch {
+    }
+    this.host.dispatchEvent(new CustomEvent("comments-changed", { detail: this.getAllComments(), bubbles: true, composed: true }));
+  }
+  /** Shows a background snapshot. An unchanged snapshot does not touch the DOM, so polling never makes the overlay flash. */
+  apply(comments) {
+    if (sameComments(comments, this.comments)) return;
+    this.comments = comments;
+    this.changed();
+    this.noticeActivity();
+    this.render();
+  }
+  /** Shows a short notification for each comment or reply that someone else added since the last load. */
+  noticeActivity() {
+    const key2 = `${this.user.id}
+${this.currentPage()}`;
+    if (key2 !== this.seenKey) {
+      this.seenKey = key2;
+      this.seen.clear();
+      newActivity(this.comments, this.seen, this.user.id);
+      return;
+    }
+    if (!this.settings.notifications) {
+      newActivity(this.comments, this.seen, this.user.id);
+      return;
+    }
+    const found = newActivity(this.pageComments(), this.seen, this.user.id);
+    newActivity(this.comments, this.seen, this.user.id);
+    if (found.length > 3) this.toast({ kind: "comment", commentId: "", author: `${found.length} new comments`, text: "Open the comments panel to read them." }, true);
+    else for (const item of found) this.toast(item);
+  }
+  toast(item, summary = false) {
+    var _a;
+    const toast = element("div", "toast");
+    const body = element("div", "toast-body");
+    const title = element("p", "toast-title");
+    title.append(element("strong", "", item.author));
+    if (!summary) {
+      title.append(document.createTextNode(item.kind === "reply" ? " replied" : " commented"));
+      const number = this.pageComments().findIndex((c) => c.id === item.commentId) + 1;
+      if (number) title.append(element("span", "toast-number", `#${number}`));
+    }
+    body.append(title, element("p", "toast-text", item.text));
+    if (summary) {
+      const mark = element("span", "avatar toast-icon");
+      mark.append(icon("comment"));
+      toast.append(mark);
+    } else toast.append(avatar(item.author, item.avatarUrl));
+    toast.append(body);
+    while (this.toasts.childElementCount >= 3) (_a = this.toasts.firstElementChild) == null ? void 0 : _a.remove();
+    this.toasts.append(toast);
+    const later = (ms, run) => {
+      const timer = setTimeout(() => {
+        this.toastTimers.delete(timer);
+        run();
+      }, ms);
+      this.toastTimers.add(timer);
+    };
+    later(7e3, () => {
+      toast.classList.add("leaving");
+      later(this.reducedMotion() ? 0 : 200, () => toast.remove());
+    });
+  }
+  async refresh() {
+    if (this.destroyed || this.saving) return;
+    const version2 = ++this.loadVersion;
+    this.loading = true;
+    this.render();
+    try {
+      const comments = normalizeComments(await this.storage.loadComments());
+      if (this.destroyed || version2 !== this.loadVersion) return;
+      const next = this.queuedSnapshot ?? comments;
+      const changed = !this.loaded || !sameComments(next, this.comments);
+      this.comments = next;
+      this.queuedSnapshot = null;
+      this.loadFailed = false;
+      this.error = "";
+      this.loaded = true;
+      if (changed) {
+        this.changed();
+        this.noticeActivity();
+      }
+    } catch (error) {
+      if (this.destroyed || version2 !== this.loadVersion) return;
+      this.loadFailed = true;
+      this.report(error);
+    } finally {
+      if (!this.destroyed && version2 === this.loadVersion) {
+        this.loading = false;
+        this.render();
+        if (this.loaded) this.openPending();
+      }
+    }
+  }
+  getAllComments() {
+    return copyComments(this.comments);
+  }
+  getUser() {
+    return { ...this.user };
+  }
+  hostedSession(user) {
+    if (this.destroyed) return;
+    this.comments = [];
+    this.queuedSnapshot = null;
+    this.loaded = false;
+    this.user = user ?? { id: "signed-out", name: "Sign in" };
+    this.managedUser = true;
+    this.draft = null;
+    this.text = "";
+    this.replyText = "";
+    this.placing = false;
+    this.activeId = null;
+    this.changed();
+    this.render();
+  }
+  async signIn() {
+    if (!(this.storage instanceof HostedAdapter)) return;
+    try {
+      await this.storage.signIn();
+      await this.refresh();
+    } catch (error) {
+      if (!this.destroyed) {
+        this.report(error);
+        this.render();
+      }
+    }
+  }
+  async signOut() {
+    if (!(this.storage instanceof HostedAdapter) || this.saving) return;
+    try {
+      await this.storage.signOut();
+      await this.refresh();
+    } catch (error) {
+      this.report(error);
+      this.render();
+    }
+  }
+  setUser(user) {
+    if (this.storage instanceof HostedAdapter) throw new Error("Hosted mode manages the signed-in account. Use signIn or signOut.");
+    if (this.destroyed) return;
+    if (this.saving) throw new Error("Wait until the current comment is saved before changing users.");
+    this.user = user ? validateUser(user) : guestIdentity(this.identityKey).user;
+    this.managedUser = !!user;
+    this.editing = null;
+    this.draft = null;
+    this.text = "";
+    this.replyText = "";
+    this.placing = false;
+    this.render();
+  }
+  show() {
+    var _a;
+    if (this.destroyed) return;
+    if (!this.visible) this.returnFocus = document.activeElement;
+    this.visible = true;
+    this.render();
+    this.trackLayoutMotion();
+    (_a = this.shadow.querySelector(".panel button, .launcher")) == null ? void 0 : _a.focus();
+    this.checkForUpdate();
+  }
+  hide() {
+    var _a;
+    if (this.destroyed) return;
+    this.visible = false;
+    this.placing = false;
+    this.draft = null;
+    this.activeId = null;
+    this.editing = null;
+    this.text = "";
+    this.replyText = "";
+    this.render();
+    if (this.returnFocus instanceof HTMLElement && this.returnFocus.isConnected) this.returnFocus.focus();
+    else (_a = this.shadow.querySelector(".launcher")) == null ? void 0 : _a.focus();
+  }
+  startComment(position) {
+    var _a;
+    if (this.storage instanceof HostedAdapter && !this.storage.signedIn) {
+      void this.signIn();
+      return;
+    }
+    if (this.destroyed || this.initialLoad() || this.loadFailed || this.saving) return;
+    this.visible = true;
+    this.activeId = null;
+    this.editing = null;
+    this.text = "";
+    if (position) {
+      if (!Number.isFinite(position.x) || !Number.isFinite(position.y)) throw new Error("Comment coordinates must be finite.");
+      const x = position.x - window.scrollX, y = position.y - window.scrollY;
+      const target = document.elementFromPoint(x, y);
+      if (this.config.container && (!target || !this.config.container.contains(target))) {
+        throw new Error("Choose a position inside the configured container.");
+      }
+      this.draft = this.makeDraft(position, target);
+      this.placing = false;
+    } else {
+      this.placing = true;
+      this.draft = null;
+    }
+    this.render();
+    this.announce(position ? "Write your comment." : "Click a place on the page, or Tab to an element and press Enter. Press Escape to cancel.");
+    (_a = this.shadow.querySelector("textarea")) == null ? void 0 : _a.focus();
+  }
+  navigateToComment(id) {
+    var _a;
+    if (this.destroyed) return;
+    const comment = this.comments.find((c) => c.id === id);
+    if (!comment) return;
+    try {
+      const url = safePageUrl(comment.pageUrl, location.href);
+      if (!this.onCurrentPage(comment.pageUrl)) {
+        try {
+          sessionStorage.setItem(this.openKey, id);
+        } catch {
+        }
+        location.assign(url.href);
+        return;
+      }
+      this.visible = true;
+      this.placing = false;
+      this.draft = null;
+      this.editing = null;
+      this.activeId = id;
+      this.replyText = "";
+      this.replyId = newId();
+      this.flash(id);
+      this.render();
+      const state = comment.selector ? this.elementState(comment) : "shown";
+      if (state === "hidden" || state === "removed" && this.canReveal(comment)) void this.reveal(comment);
+      else this.scrollToComment(comment);
+      (_a = this.shadow.querySelector(".detail")) == null ? void 0 : _a.focus({ preventScroll: true });
+    } catch (error) {
+      this.report(error);
+      this.visible = true;
+      this.render();
+    }
+  }
+  scrollToComment(comment) {
+    const behavior = this.reducedMotion() ? "instant" : "smooth";
+    const target = this.anchorElement(comment);
+    if (target && !this.detached(comment)) target.scrollIntoView({ block: "center", behavior });
+    else window.scrollTo({ top: Math.max(0, comment.y - window.innerHeight / 2), behavior });
+  }
+  detached(comment) {
+    return isDetached(comment, this.config.container);
+  }
+  /**
+   * Many menus (Radix, Headless UI, MUI, Vue) take a closed menu's items out of the page. A note that saved how its menu
+   * was opened counts as hidden while the button that opens the menu is on the page; it counts as removed only when that
+   * button is gone too, or opening the menu did not bring the element back.
+   */
+  elementState(comment) {
+    var _a, _b, _c, _d;
+    const state = elementState(comment, this.config.container);
+    if (state !== "removed" || ((_a = this.revealed) == null ? void 0 : _a.id) === comment.id && !this.revealed.result.shown) return state;
+    const opener = this.config.autoReveal !== false ? (_d = (_c = (_b = comment.element) == null ? void 0 : _b.reveal) == null ? void 0 : _c[0]) == null ? void 0 : _d.target : void 0;
+    return opener && findTarget(opener) ? "hidden" : state;
+  }
+  /** The saved name of the note's element. Older notes have none; their element is named from the page while it exists. */
+  elementInfo(comment) {
+    if (comment.element) return comment.element;
+    const target = this.anchorElement(comment) ?? (comment.selector ? (() => {
+      try {
+        return document.querySelector(comment.selector);
+      } catch {
+        return null;
+      }
+    })() : null);
+    return target ? describeElement(target) : void 0;
+  }
+  /**
+   * Tells people who did not write the note what happened to its element and where to look: "Element hidden" with the
+   * menu or section it is in, or "Element removed" when nothing on the page matches it now.
+   */
+  anchorStatus(comment, state) {
+    var _a, _b;
+    const box = element("div", `anchor-status ${state}`);
+    box.dataset.anchorStatus = state;
+    box.hidden = state === "shown";
+    if (state === "shown") return box;
+    const info = this.elementInfo(comment);
+    const hidden = state === "hidden";
+    const head = element("div", "anchor-head");
+    const mark = element("span", "anchor-icon");
+    mark.append(icon(hidden ? "eyeOff" : "unlink"));
+    const titles = element("div", "anchor-titles");
+    titles.append(element("strong", "", hidden ? "Element hidden" : "Element removed"));
+    if (info) titles.append(element("span", "anchor-target", info.place ? `${info.label} in ${info.place}` : info.label));
+    head.append(mark, titles);
+    box.append(head);
+    const failed = ((_a = this.revealed) == null ? void 0 : _a.id) === comment.id ? (_b = this.revealed.result.failed) == null ? void 0 : _b.target.name : void 0;
+    const opener = failed ?? (info == null ? void 0 : info.place);
+    const where = hidden || failed ? opener ? `Open “${opener}” to see it.` : "It is on this page, but not shown now. It can be in a closed menu, tab or filter." : "Nothing on this page matches it now. It was deleted, or it shows only after an action.";
+    box.append(element("p", "", `${where} The dashed pin shows where the note was left.${this.canMove(comment) ? " Drag the pin to attach it again." : ""}`));
+    if (hidden || this.canReveal(comment)) box.append(button("Show Element", "quiet anchor-action", () => {
+      void this.reveal(comment);
+    }, "eye"));
+    return box;
+  }
+  /** A note on a removed element can still be shown when the site has a hook or the note saved how its menu was opened. */
+  canReveal(comment) {
+    var _a, _b;
+    return !!this.config.revealComponent || this.config.autoReveal !== false && !!((_b = (_a = comment.element) == null ? void 0 : _a.reveal) == null ? void 0 : _b.length);
+  }
+  /**
+   * Shows a component that is hidden: first the site's revealComponent hook (a map can zoom to a marker), then the
+   * steps saved with the note (the menu, drawer or tab that was open), then closed details, popovers, menus,
+   * accordions and tabs found from the page's ARIA. Frameworks render after a click, so each step waits for the next.
+   */
+  async reveal(comment) {
+    var _a, _b, _c;
+    let handled = false;
+    try {
+      handled = !!await ((_b = (_a = this.config).revealComponent) == null ? void 0 : _b.call(_a, copyComments([comment])[0], this.anchorElement(comment)));
+    } catch (error) {
+      this.report(error);
+    }
+    const steps = (_c = comment.element) == null ? void 0 : _c.reveal;
+    if (!handled && this.config.autoReveal !== false && (steps == null ? void 0 : steps.length)) {
+      this.endReveal();
+      this.replaying = true;
+      let result;
+      try {
+        result = await replay(steps, () => this.anchorElement(comment));
+      } finally {
+        this.replaying = false;
+      }
+      if (this.destroyed || this.activeId !== comment.id) {
+        clearReveal();
+        return;
+      }
+      this.revealed = { id: comment.id, result };
+      handled = result.shown;
+    }
+    if (!handled && this.config.autoReveal !== false) {
+      const target = this.anchorElement(comment);
+      if (target && revealElement(target)) {
+        handled = true;
+        await new Promise((done) => setTimeout(done, 250));
+      }
+    }
+    if (this.destroyed || this.activeId !== comment.id) return;
+    this.scrollToComment(comment);
+    this.render();
+    const state = this.elementState(comment);
+    this.announce(state === "shown" ? "Showing the comment’s element." : state === "hidden" ? "The comment’s element is still hidden. A dashed pin shows where it was." : "The comment’s element was removed. A dashed pin shows where it was.");
+  }
+  /**
+   * A modal <dialog> makes the rest of the page inert, and a press outside an open popover closes it. While the note
+   * being written or read is on an element in one of these top-layer parts, the widget moves inside it.
+   */
+  syncLayer() {
+    const active = this.activeId ? this.comments.find((c) => c.id === this.activeId) : null;
+    const target = this.draft ? this.anchorElement(this.draft) : active ? this.anchorElement(active) : null;
+    const layers = target ? [...matchAll("dialog:modal"), ...matchAll(":popover-open")].filter((el) => el.contains(target)) : [];
+    const parent = layers.find((el) => layers.every((other) => other.contains(el))) ?? document.body;
+    if (this.host.parentElement !== parent) parent.append(this.host);
+  }
+  /** The note that Show Element opened a menu for has closed: end the CSS hover states it set. */
+  endReveal() {
+    if (!this.revealed) return;
+    this.revealed = null;
+    clearReveal();
+  }
+  /** Opens the comment that a click in "All comments" on another page asked for. */
+  openPending() {
+    const linkId = new URL(location.href).searchParams.get("cw_comment");
+    const linked = linkId ? this.comments.find((c) => c.id === linkId && this.onCurrentPage(c.pageUrl)) : null;
+    if (linked) {
+      const url = new URL(location.href);
+      url.search = withoutCommentLink(url.search);
+      history.replaceState(history.state, "", url.href);
+      this.navigateToComment(linked.id);
+      return;
+    }
+    let id = null;
+    try {
+      id = sessionStorage.getItem(this.openKey);
+      sessionStorage.removeItem(this.openKey);
+    } catch {
+      return;
+    }
+    const comment = id ? this.comments.find((c) => c.id === id) : null;
+    if (comment && this.onCurrentPage(comment.pageUrl)) this.navigateToComment(comment.id);
+  }
+  /** Pulses the pin and outlines its element while the pointer or focus is on its card in the list. */
+  hoverNote(id) {
+    if (this.hoverId === id) return;
+    this.hoverId = id;
+    for (const pin of this.pins.querySelectorAll(".pin[data-id]")) pin.classList.toggle("hovered", pin.dataset.id === id);
+    this.positionPins();
+  }
+  /** Makes the pin pulse for a moment, so the eye finds it after a jump. */
+  flash(id) {
+    this.highlightId = id;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = setTimeout(() => {
+      var _a;
+      this.highlightId = null;
+      (_a = this.pins.querySelector(".highlight")) == null ? void 0 : _a.classList.remove("highlight");
+    }, 2400);
+  }
+  destroy() {
+    var _a;
+    if (this.destroyed) return;
+    this.destroyed = true;
+    ++this.loadVersion;
+    clearTimeout(this.highlightTimer);
+    clearTimeout(this.searchTimer);
+    if (this.storage instanceof HostedAdapter) this.storage.destroy();
+    this.events.abort();
+    this.resizeObserver.disconnect();
+    this.mutationObserver.disconnect();
+    this.anchorObserver.disconnect();
+    this.observedAnchors.clear();
+    clearInterval(this.routeTimer);
+    cancelAnimationFrame(this.frame);
+    cancelAnimationFrame(this.motionFrame);
+    for (const timer of this.toastTimers) clearTimeout(timer);
+    this.toastTimers.clear();
+    this.sidebarOpen = false;
+    this.pushPage();
+    clearReveal();
+    try {
+      (_a = this.unsubscribe) == null ? void 0 : _a.call(this);
+    } finally {
+      this.host.remove();
+    }
+  }
+  /** The first load for this page and account. Only then does the list show a loading state. */
+  initialLoad() {
+    return this.loading && !this.loaded;
+  }
+  reducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  choosePoint(position, target) {
+    var _a;
+    let draft;
+    try {
+      draft = this.makeDraft(position, target);
+    } catch (error) {
+      this.report(error);
+      this.render();
+      return;
+    }
+    this.placing = false;
+    this.draft = draft;
+    this.render();
+    (_a = this.shadow.querySelector("textarea")) == null ? void 0 : _a.focus();
+  }
+  /** Drag a pin to a new place. A press without movement still opens the comment. */
+  startPinDrag(event, comment) {
+    this.suppressPinClick = false;
+    if (event.button !== 0 || !event.isPrimary || this.saving || this.pinDrag) return;
+    const pin = event.currentTarget;
+    const dx = event.clientX - parseFloat(pin.style.left), dy = event.clientY - parseFloat(pin.style.top);
+    const startX = event.clientX, startY = event.clientY;
+    const stop = new AbortController();
+    const options = { signal: stop.signal };
+    this.events.signal.addEventListener("abort", () => stop.abort(), options);
+    let moved = false;
+    window.addEventListener("pointermove", (move) => {
+      if (move.pointerId !== event.pointerId || !moved && Math.hypot(move.clientX - startX, move.clientY - startY) < 5) return;
+      moved = true;
+      const [minX, maxX] = this.pinBounds();
+      this.pinDrag = { id: comment.id, x: clamp(move.clientX - dx, minX, maxX), y: clamp(move.clientY - dy, PIN_HEIGHT + 10, innerHeight - 6) };
+      const under = document.elementFromPoint(this.pinDrag.x, this.pinDrag.y);
+      const component = under && under !== this.host ? componentTarget(under, this.config.container) : null;
+      this.pickTarget = component === document.body || component === document.documentElement ? null : component;
+      this.positionPins();
+    }, options);
+    const end = (up) => {
+      if (up.pointerId !== event.pointerId) return;
+      stop.abort();
+      this.pickTarget = null;
+      if (!moved) return;
+      this.suppressPinClick = true;
+      const drop = this.pinDrag;
+      if (up.type === "pointercancel" || !drop) {
+        this.pinDrag = null;
+        this.positionPins();
+        return;
+      }
+      void this.movePin(comment.id, drop).finally(() => {
+        this.pinDrag = null;
+        this.positionPins();
+      });
+    };
+    window.addEventListener("pointerup", end, { ...options, capture: true });
+    window.addEventListener("pointercancel", end, { ...options, capture: true });
+  }
+  /** The horizontal range where a pin stays fully visible: inside the screen and outside the open sidebar. */
+  pinBounds() {
+    var _a;
+    const side = this.sidebarOpen && innerWidth > 600 ? SIDEBAR : 0, onLeft = !!((_a = this.config.position) == null ? void 0 : _a.endsWith("left"));
+    return [PIN_HALF + 2 + (onLeft ? side : 0), innerWidth - PIN_HALF - 2 - (onLeft ? 0 : side)];
+  }
+  async movePin(id, drop) {
+    var _a, _b;
+    const comment = this.comments.find((c) => c.id === id);
+    const target = document.elementFromPoint(drop.x, drop.y);
+    if (!comment || !target || target === this.host || this.config.container && !this.config.container.contains(target)) {
+      this.announce("Drop the pin on the page to move it.");
+      return;
+    }
+    const position = { x: drop.x + scrollX, y: drop.y + scrollY };
+    let draft;
+    try {
+      draft = this.makeDraft(position, target);
+    } catch (error) {
+      this.report(error);
+      this.render();
+      return;
+    }
+    if (draft.element && !draft.element.reveal && ((_a = this.revealed) == null ? void 0 : _a.id) === id && ((_b = comment.element) == null ? void 0 : _b.reveal)) draft.element.reveal = comment.element.reveal;
+    const updated = { ...comment, x: position.x, y: position.y, selector: draft.selector, anchor: draft.anchor, element: draft.element, pageTitle: pageTitle() ?? comment.pageTitle };
+    const next = this.getAllComments().map((c) => c.id === id ? updated : c);
+    this.activeId = id;
+    await this.mutate(next, () => this.storage.upsertComment ? this.storage.upsertComment(updated) : this.storage.saveComments(next), () => {
+    });
+  }
+  placePickRing() {
+    var _a;
+    const ring = this.pins.querySelector(".pick-ring");
+    if (!ring) return;
+    const rect = (this.placing || this.pinDrag) && ((_a = this.pickTarget) == null ? void 0 : _a.isConnected) ? this.pickTarget.getBoundingClientRect() : null;
+    ring.hidden = !rect || !rect.width || !rect.height;
+    if (rect) Object.assign(ring.style, { left: `${rect.left - 3}px`, top: `${rect.top - 3}px`, width: `${rect.width + 6}px`, height: `${rect.height + 6}px` });
+  }
+  /** Places the open comment or the new comment form next to its pin, inside the free part of the screen. */
+  placePopover() {
+    var _a, _b;
+    const pop = this.surface.querySelector(".popover");
+    if (!pop) return;
+    const sheet = innerWidth <= 600;
+    pop.classList.toggle("sheet", sheet);
+    if (sheet) {
+      pop.style.left = "";
+      pop.style.top = "";
+      return;
+    }
+    const comment = this.draft ? null : this.comments.find((c) => c.id === this.activeId);
+    const dragging = !!comment && ((_a = this.pinDrag) == null ? void 0 : _a.id) === comment.id;
+    pop.classList.toggle("moving", dragging);
+    if (dragging) return;
+    const pos = dragging ? this.pinDrag : this.draft ? this.position({ ...this.draft, ...this.draft.position }) : comment ? this.position(comment) ?? (this.detached(comment) ? { x: comment.x - scrollX, y: comment.y - scrollY } : null) : null;
+    const target = dragging ? null : this.draft ? this.anchorElement(this.draft) : comment ? this.anchorElement(comment) : null;
+    const width = pop.offsetWidth, height = pop.offsetHeight;
+    const side = this.sidebarOpen ? SIDEBAR : 0, onLeft = !!((_b = this.config.position) == null ? void 0 : _b.endsWith("left"));
+    const minX = EDGE + (onLeft ? side : 0), maxX = innerWidth - EDGE - (onLeft ? 0 : side) - width;
+    let x = maxX, y = 72;
+    if (pos && pos.x >= 0 && pos.y >= 0 && pos.x <= innerWidth && pos.y <= innerHeight) {
+      const rect = target == null ? void 0 : target.getBoundingClientRect();
+      if (rect && rect.right + 12 <= maxX) x = rect.right + 12;
+      else if (rect && rect.left - 12 - width >= minX) x = rect.left - 12 - width;
+      else x = pos.x + 24 <= maxX ? pos.x + 24 : pos.x - 24 - width;
+      y = pos.y - 40;
+    }
+    pop.style.left = `${clamp(x, minX, maxX)}px`;
+    pop.style.top = `${clamp(y, EDGE, innerHeight - EDGE - height)}px`;
+  }
+  makeDraft(position, target) {
+    const draft = { id: newId(), timestamp: /* @__PURE__ */ new Date(), position, pageUrl: this.currentPage() };
+    target = target ? componentTarget(target, this.config.container) : null;
+    if (target && !this.host.contains(target)) {
+      const rect = target.getBoundingClientRect();
+      if (rect.width && rect.height) {
+        draft.selector = componentSelector(target, this.config.container);
+        draft.element = describeElement(target);
+        const reveal = this.config.autoReveal !== false ? this.recorder.capture(target) : [];
+        if (reveal.length) draft.element.reveal = reveal;
+        draft.anchor = {
+          x: Math.max(0, Math.min(1, (position.x - scrollX - rect.left) / rect.width)),
+          y: Math.max(0, Math.min(1, (position.y - scrollY - rect.top) / rect.height))
+        };
+      }
+    }
+    if (!draft.selector || !draft.anchor) throw new Error("Choose a visible page element to attach this note.");
+    return draft;
+  }
+  anchorElement(comment) {
+    return comment.selector ? resolveComponent(comment.selector, this.config.container) : null;
+  }
+  position(comment) {
+    return componentPosition(comment, this.config.container);
+  }
+  observeAnchors() {
+    var _a;
+    const targets = /* @__PURE__ */ new Set();
+    for (const note of this.pageComments()) {
+      const target = this.anchorElement(note);
+      if (target) targets.add(target);
+    }
+    if ((_a = this.draft) == null ? void 0 : _a.selector) {
+      const target = this.anchorElement(this.draft);
+      if (target) targets.add(target);
+    }
+    for (const target of this.observedAnchors) if (!targets.has(target)) this.anchorObserver.unobserve(target);
+    for (const target of targets) if (!this.observedAnchors.has(target)) this.anchorObserver.observe(target);
+    this.observedAnchors = targets;
+  }
+  positionPins() {
+    var _a, _b, _c, _d;
+    this.observeAnchors();
+    const layer = this.host.parentElement;
+    if (layer && layer !== document.body && ![...matchAll("dialog[open]"), ...matchAll(":popover-open")].includes(layer)) document.body.append(this.host);
+    for (const pin of this.pins.querySelectorAll("[data-id]")) {
+      const comment = this.comments.find((c) => c.id === pin.dataset.id);
+      if (!comment) continue;
+      const dragging = ((_a = this.pinDrag) == null ? void 0 : _a.id) === comment.id;
+      pin.classList.toggle("dragging", dragging);
+      const lost = !dragging && comment.id === this.activeId && this.detached(comment);
+      pin.classList.toggle("detached", lost);
+      const pos = dragging ? this.pinDrag : lost ? { x: comment.x - scrollX, y: comment.y - scrollY } : this.position(comment);
+      if (!pos) {
+        pin.hidden = true;
+        continue;
+      }
+      const [minX, maxX] = this.pinBounds();
+      pin.style.left = `${clamp(pos.x, minX, maxX)}px`;
+      pin.style.top = `${pos.y}px`;
+      pin.classList.toggle("below", pos.y < PIN_HEIGHT + 4);
+      pin.hidden = pos.x < 0 || pos.y < 0 || pos.x > innerWidth || pos.y > innerHeight;
+      if (this.config.container) {
+        const rect = this.config.container.getBoundingClientRect();
+        pin.hidden || (pin.hidden = pos.x < rect.left || pos.x > rect.right || pos.y < rect.top || pos.y > rect.bottom);
+      }
+    }
+    const active = this.comments.find((c) => c.id === this.activeId);
+    const ring = this.pins.querySelector(".focus-ring");
+    if (ring) {
+      const rect = active ? (_b = this.anchorElement(active)) == null ? void 0 : _b.getBoundingClientRect() : void 0;
+      ring.hidden = !rect || !rect.width || !rect.height || ((_c = this.pinDrag) == null ? void 0 : _c.id) === (active == null ? void 0 : active.id);
+      if (rect) Object.assign(ring.style, { left: `${rect.left - 4}px`, top: `${rect.top - 4}px`, width: `${rect.width + 8}px`, height: `${rect.height + 8}px` });
+    }
+    const hoverRing = this.pins.querySelector(".hover-ring");
+    if (hoverRing) {
+      const hovered = this.hoverId ? this.comments.find((c) => c.id === this.hoverId) : void 0;
+      const rect = hovered && hovered.id !== this.activeId ? (_d = this.anchorElement(hovered)) == null ? void 0 : _d.getBoundingClientRect() : void 0;
+      hoverRing.hidden = !rect || !rect.width || !rect.height;
+      if (rect) Object.assign(hoverRing.style, { left: `${rect.left - 4}px`, top: `${rect.top - 4}px`, width: `${rect.width + 8}px`, height: `${rect.height + 8}px` });
+    }
+    this.placePickRing();
+    this.placePopover();
+    const status = this.surface.querySelector("[data-anchor-status]");
+    if (status && active) {
+      const state = this.elementState(active);
+      if (status.dataset.anchorStatus !== state) status.replaceWith(this.anchorStatus(active, state));
+    }
+  }
+  /**
+   * Looks once for a newer npm release. A browser cannot update the site's code, so the notice copies the update command.
+   * Only development hosts check by default: that is where the person reading the notice can run npm.
+   */
+  checkForUpdate() {
+    if (this.updateChecked || !(this.config.updateNotice ?? developmentHost(location.hostname))) return;
+    this.updateChecked = true;
+    void latestVersion().then((latest) => {
+      if (this.destroyed || !latest || !isNewer(latest, VERSION)) return;
+      try {
+        if (localStorage.getItem(UPDATE_DISMISSED) === latest) return;
+      } catch {
+      }
+      this.update = latest;
+      this.render();
+    });
+  }
+  async copyUpdate() {
+    let copied = false;
+    try {
+      await navigator.clipboard.writeText(UPDATE_COMMAND);
+      copied = true;
+    } catch {
+    }
+    this.toast({
+      kind: "comment",
+      commentId: "",
+      author: copied ? `Update command copied` : "Run this to update",
+      text: copied ? `Run it in your project, then reload: ${UPDATE_COMMAND}` : UPDATE_COMMAND
+    }, true);
+    this.announce(copied ? "Update command copied." : `Run ${UPDATE_COMMAND} to update.`);
+  }
+  /** "Later" hides the notice until the next version comes out. */
+  dismissUpdate() {
+    try {
+      localStorage.setItem(UPDATE_DISMISSED, this.update ?? "");
+    } catch {
+    }
+    this.update = null;
+    this.render();
+  }
+  /** Drags the launcher anywhere on the screen. A press without movement stays a click. */
+  startDrag(event) {
+    this.suppressClick = false;
+    if (event.button !== 0 || !event.isPrimary) return;
+    const launcher = event.currentTarget;
+    const rect = launcher.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
+    const startX = event.clientX, startY = event.clientY;
+    const stop = new AbortController();
+    const options = { signal: stop.signal };
+    this.events.signal.addEventListener("abort", () => stop.abort(), { signal: stop.signal });
+    window.addEventListener("pointermove", (move) => {
+      var _a;
+      if (move.pointerId !== event.pointerId) return;
+      if (!this.dragging && Math.hypot(move.clientX - startX, move.clientY - startY) < 5) return;
+      this.dragging = true;
+      const left = clamp(move.clientX - offsetX, EDGE, innerWidth - LAUNCHER - EDGE);
+      const top = clamp(move.clientY - offsetY, EDGE, innerHeight - LAUNCHER - EDGE);
+      this.launcherSpot = { x: (left + LAUNCHER / 2) / innerWidth, y: (top + LAUNCHER / 2) / innerHeight };
+      (_a = this.shadow.querySelector(".launcher")) == null ? void 0 : _a.classList.add("dragging");
+      this.placeLauncher();
+    }, options);
+    const end = (up) => {
+      var _a;
+      if (up.pointerId !== event.pointerId) return;
+      stop.abort();
+      if (!this.dragging) return;
+      this.dragging = false;
+      this.suppressClick = true;
+      (_a = this.shadow.querySelector(".launcher")) == null ? void 0 : _a.classList.remove("dragging");
+      try {
+        localStorage.setItem(this.launcherKey, JSON.stringify(this.launcherSpot));
+      } catch {
+      }
+    };
+    window.addEventListener("pointerup", end, { ...options, capture: true });
+    window.addEventListener("pointercancel", end, { ...options, capture: true });
+  }
+  pageComments() {
+    return this.comments.filter((c) => this.onCurrentPage(c.pageUrl)).sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime() || a.id.localeCompare(b.id));
+  }
+  closePopup(focus = true) {
+    var _a;
+    this.draft = null;
+    this.activeId = null;
+    this.placing = false;
+    this.editing = null;
+    this.text = "";
+    this.replyText = "";
+    this.render();
+    if (focus) (_a = this.shadow.querySelector(".panel .primary, .launcher")) == null ? void 0 : _a.focus();
+  }
+  setDocked(docked) {
+    var _a;
+    this.docked = docked;
+    try {
+      localStorage.setItem(this.dockKey, docked ? "1" : "0");
+    } catch {
+    }
+    this.render();
+    (_a = this.shadow.querySelector(".detail")) == null ? void 0 : _a.focus({ preventScroll: true });
+  }
+  /** Comments for the chosen view: this page, or every page of the project. */
+  scopeComments() {
+    if (this.scope === "page") return this.pageComments();
+    return [...this.comments].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime() || a.id.localeCompare(b.id));
+  }
+  /** Note numbers count per page, in the order the notes were made. */
+  noteNumbers() {
+    const counters = /* @__PURE__ */ new Map(), numbers = /* @__PURE__ */ new Map();
+    for (const comment of [...this.comments].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime() || a.id.localeCompare(b.id))) {
+      const page = this.onCurrentPage(comment.pageUrl) ? "" : comment.pageUrl;
+      const next = (counters.get(page) ?? 0) + 1;
+      counters.set(page, next);
+      numbers.set(comment.id, next);
+    }
+    return numbers;
+  }
+  async mutate(next, write, done) {
+    if (this.saving || this.initialLoad() || this.loadFailed || this.destroyed) return;
+    if (this.loading) {
+      ++this.loadVersion;
+      this.loading = false;
+    }
+    this.saving = true;
+    this.error = "";
+    this.render();
+    try {
+      await write();
+      if (this.destroyed) return;
+      this.comments = next;
+      try {
+        this.comments = normalizeComments(await this.storage.loadComments());
+      } catch {
+        this.error = "Saved. Could not refresh other comments. Use Refresh to try again.";
+      }
+      if (this.destroyed) return;
+      this.queuedSnapshot = null;
+      done();
+      this.changed();
+      this.noticeActivity();
+      this.announce(this.error || "Changes saved.");
+    } catch (error) {
+      if (!this.destroyed) this.report(error);
+    } finally {
+      if (!this.destroyed) {
+        this.saving = false;
+        this.render();
+      }
+    }
+  }
+  toggleResolved(comment) {
+    const updated = { ...comment, resolved: !comment.resolved };
+    const next = this.getAllComments().map((c) => c.id === comment.id ? updated : c);
+    void this.mutate(next, () => this.storage.setResolved ? this.storage.setResolved(comment.id, updated.resolved) : this.storage.upsertComment ? this.storage.upsertComment(updated) : this.storage.saveComments(next), () => {
+    });
+  }
+  deleteNote(comment) {
+    const next = this.getAllComments().filter((c) => c.id !== comment.id);
+    void this.mutate(next, () => this.storage.deleteComment ? this.storage.deleteComment(comment.id) : this.storage.saveComments(next), () => {
+      this.activeId = null;
+    });
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (this.destroyed) return;
+    if (this.composing) {
+      this.renderDeferred = true;
+      return;
+    }
+    if (this.revealed && this.activeId !== this.revealed.id) this.endReveal();
+    this.syncLayer();
+    if (!this.sidebarOpen || this.activeId || this.draft) this.hoverId = null;
+    const active = this.shadow.activeElement;
+    const focusKey = active instanceof HTMLElement ? active.dataset.focus : void 0;
+    const selection = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement ? [active.selectionStart, active.selectionEnd] : null;
+    const scroll = ((_a = this.shadow.querySelector(".list")) == null ? void 0 : _a.scrollTop) ?? 0;
+    const threadScroll = ((_b = this.shadow.querySelector(".thread-body")) == null ? void 0 : _b.scrollTop) ?? 0;
+    const hadPanel = !!this.surface.querySelector(".panel");
+    this.host.dataset.theme = this.settings.theme;
+    this.surface.replaceChildren();
+    this.pins.replaceChildren();
+    const detail = this.visible ? this.detail() : null;
+    const docked = !!detail && (this.docked || !!this.editing);
+    const sidebar = this.visible && (docked || !this.config.hideSidebar);
+    if (!this.config.hideButton && !sidebar) this.surface.append(this.launcher());
+    if (this.visible) {
+      if (sidebar) this.surface.append(this.sidebar(docked ? detail : null));
+      if (detail && !docked) {
+        const popover = element("div", "popover");
+        popover.append(detail);
+        this.surface.append(popover);
+        (_c = this.surface.querySelector(".panel")) == null ? void 0 : _c.classList.add("behind");
+      }
+      this.renderPins();
+      if (this.placing) {
+        const notice = element("div", `notice${sidebar ? " beside-panel" : ""}${((_d = this.config.position) == null ? void 0 : _d.endsWith("left")) ? " left" : ""}`);
+        notice.append(icon("pin"), element("span", "", `Click anywhere to leave a note, or Tab to an element and press Enter.`));
+        const escape = element("kbd", "", "Esc");
+        notice.append(escape, button("Cancel placement", "icon-button", () => this.closePopup(), "close"));
+        this.surface.append(notice);
+      }
+    }
+    (_e = this.surface.querySelector(".panel")) == null ? void 0 : _e.classList.toggle("entering", !hadPanel);
+    const detailKey = !detail ? "" : this.editing ? this.editing : this.draft ? `draft:${this.draft.id}` : `thread:${this.activeId}`;
+    detail == null ? void 0 : detail.classList.toggle("entering", (hadPanel || !docked) && detailKey !== this.detailKey);
+    this.detailKey = detailKey;
+    this.toasts.classList.toggle("beside-panel", sidebar);
+    this.sidebarOpen = sidebar;
+    this.pushPage();
+    this.toasts.classList.toggle("left", !!((_f = this.config.position) == null ? void 0 : _f.endsWith("left")));
+    this.toasts.classList.toggle("top", !!((_g = this.config.position) == null ? void 0 : _g.startsWith("top")));
+    const list = this.shadow.querySelector(".list");
+    if (list) list.scrollTop = scroll;
+    const body = this.shadow.querySelector(".thread-body");
+    if (body) body.scrollTop = threadScroll;
+    if (focusKey) {
+      const focus = Array.from(this.shadow.querySelectorAll("[data-focus]")).find((el) => el.dataset.focus === focusKey);
+      focus == null ? void 0 : focus.focus({ preventScroll: true });
+      if (selection && (focus instanceof HTMLInputElement || focus instanceof HTMLTextAreaElement)) {
+        focus.setSelectionRange(selection[0], selection[1]);
+      }
+    }
+    this.positionPins();
+  }
+  launcher() {
+    const launcher = button("Comments", `launcher${this.dragging ? " dragging" : ""}`, () => {
+      if (this.suppressClick) {
+        this.suppressClick = false;
+        return;
+      }
+      if (this.visible) this.hide();
+      else this.show();
+    }, "comment");
+    launcher.replaceChildren(icon("comment"));
+    this.paintLauncher(launcher);
+    launcher.dataset.focus = "launcher";
+    launcher.setAttribute("aria-expanded", String(this.visible));
+    launcher.title = "Comments. Drag to move.";
+    launcher.addEventListener("pointerdown", (event) => this.startDrag(event));
+    const count = this.pageComments().filter((c) => !c.resolved).length;
+    launcher.setAttribute("aria-label", count ? `Comments, ${count} open` : "Comments");
+    if (count) launcher.append(element("span", "badge", String(count)));
+    const position = this.config.position ?? "bottom-right";
+    if (position.endsWith("left")) {
+      launcher.style.left = "24px";
+      launcher.style.right = "auto";
+    }
+    if (position.startsWith("top")) {
+      launcher.style.top = "24px";
+      launcher.style.bottom = "auto";
+    }
+    if (this.launcherSpot) queueMicrotask(this.placeLauncher);
+    return launcher;
+  }
+  heading(title, subtitle) {
+    const head = element("div", "head");
+    const brand = element("span", "brand-icon");
+    brand.append(icon("comment"));
+    const heading = element("div", "heading");
+    heading.append(element("h2", "", title));
+    if (subtitle) heading.append(element("p", "subtext", subtitle));
+    const actions = element("div", "head-actions");
+    const settings = button("Settings", "icon-button", () => this.openSettings(), "settings");
+    settings.dataset.focus = "settings";
+    actions.append(settings, this.userMenu(), button("Close comments", "icon-button", () => this.hide(), "close"));
+    head.append(brand, heading, actions);
+    return head;
+  }
+  menuItem(label, iconName, run, cls = "") {
+    const entry = button(label, `menu-item ${cls}`, run, iconName);
+    entry.setAttribute("role", "menuitem");
+    return entry;
+  }
+  /** A button that opens a menu below it. A click outside or Escape closes the menu. */
+  menuToggle(toggle, menu) {
+    menu.hidden = true;
+    menu.setAttribute("role", "menu");
+    toggle.setAttribute("aria-haspopup", "menu");
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.addEventListener("click", () => {
+      var _a;
+      const open = menu.hidden;
+      this.closeMenus();
+      menu.hidden = !open;
+      toggle.setAttribute("aria-expanded", String(open));
+      if (open) (_a = menu.querySelector("button:not(:disabled)")) == null ? void 0 : _a.focus();
+    });
+  }
+  /** Closes every open menu. Returns the button of the menu that was open, so Escape can put focus back on it. */
+  closeMenus() {
+    let opener = null;
+    for (const menu of this.shadow.querySelectorAll("[role=menu]")) menu.hidden = true;
+    for (const toggle of this.shadow.querySelectorAll("[aria-haspopup=menu]")) {
+      if (toggle.getAttribute("aria-expanded") === "true") opener = toggle;
+      toggle.setAttribute("aria-expanded", "false");
+    }
+    return opener;
+  }
+  /** The account button: the person's picture, and a menu with their name, settings and sign-out. */
+  userMenu() {
+    const hosted = this.storage instanceof HostedAdapter ? this.storage : null;
+    if (hosted && !hosted.signedIn) {
+      const signIn = button("Sign In", "quiet sign-in", () => {
+        void this.signIn();
+      }, "signin");
+      signIn.title = "Sign in to join this project";
+      return signIn;
+    }
+    const wrap = element("div", "menu-wrap");
+    const toggle = element("button", "user-button");
+    toggle.type = "button";
+    toggle.dataset.focus = "user";
+    toggle.setAttribute("aria-label", `Account: ${this.user.name}`);
+    toggle.title = this.user.name;
+    toggle.append(avatar(this.user.name, this.user.avatarUrl));
+    const menu = element("div", "pop-menu user-menu");
+    const card = element("div", "menu-user");
+    const about = element("div", "menu-user-text");
+    about.append(element("strong", "", this.user.name), element("small", "", hosted ? "Signed in to this project" : this.managedUser ? "Your project account" : this.persistentGuest ? "Guest in this browser" : "Guest for this page view"));
+    card.append(avatar(this.user.name, this.user.avatarUrl), about);
+    menu.append(card);
+    if (!hosted && !this.managedUser) menu.append(this.menuItem("Edit Your Name", "edit", () => {
+      var _a;
+      this.editing = "identity";
+      this.draft = null;
+      this.activeId = null;
+      this.placing = false;
+      this.render();
+      (_a = this.shadow.querySelector("#guest-name")) == null ? void 0 : _a.focus();
+    }));
+    menu.append(this.menuItem("Settings", "settings", () => this.openSettings()));
+    if (hosted) {
+      const out = this.menuItem("Sign Out", "signout", () => {
+        void this.signOut();
+      });
+      out.disabled = this.saving;
+      menu.append(out);
+    }
+    const note = element("p", "menu-note");
+    note.append(
+      element("span", "storage-dot"),
+      element("span", "", hosted ? "Comments sync with your team" : this.storage instanceof LocalStorageAdapter ? "Comments are saved in this browser" : "Comments use connected storage")
+    );
+    menu.append(note);
+    this.menuToggle(toggle, menu);
+    wrap.append(toggle, menu);
+    return wrap;
+  }
+  openSettings() {
+    var _a;
+    this.editing = "settings";
+    this.draft = null;
+    this.activeId = null;
+    this.placing = false;
+    this.render();
+    (_a = this.shadow.querySelector(".detail")) == null ? void 0 : _a.focus({ preventScroll: true });
+  }
+  /** Header of a detail view: a back link and close on one bar, then the title. It reads as a step inside the list. */
+  detailHeading(title, subtitle, extra) {
+    const wrap = element("div", "detail-head");
+    const bar = element("div", "detail-bar");
+    const back = button("Back to comments", "back-link", () => this.closePopup(), "back");
+    back.querySelector("span").textContent = "Comments";
+    bar.append(back, button("Close comments", "icon-button", () => this.hide(), "close"));
+    const titleRow = element("div", "detail-title");
+    titleRow.append(element("h2", "", title));
+    if (extra) titleRow.append(extra);
+    wrap.append(bar, titleRow);
+    if (subtitle) wrap.append(element("p", "subtext", subtitle));
+    return wrap;
+  }
+  /** Header of a comment card: icon, title, status line, a menu for less frequent actions, and close. */
+  cardHeading(title, subtitle, name, hint = "", remove) {
+    const wrap = element("div", "card-head");
+    if (this.docked) {
+      const bar = element("div", "detail-bar");
+      const back = button("Back to comments", "back-link", () => this.closePopup(), "back");
+      back.querySelector("span").textContent = "Comments";
+      bar.append(back, button("Close comments", "icon-button", () => this.hide(), "close"));
+      wrap.append(bar);
+    }
+    const head = element("div", "pop-head");
+    if (hint) head.title = hint;
+    const tile = element("span", "pop-icon");
+    tile.append(icon(name));
+    const text = element("div", "pop-title");
+    text.append(element("h2", "", title), element("p", "pop-sub", subtitle));
+    const menu = element("div", "pop-menu");
+    const item = this.menuItem.bind(this);
+    if (remove) {
+      const del = item("Delete Comment", "trash", () => {
+        if (del.dataset.confirm) {
+          remove();
+          return;
+        }
+        del.dataset.confirm = "1";
+        del.querySelector("span").textContent = "Click Again to Delete";
+      }, "danger");
+      del.disabled = this.saving;
+      menu.append(del);
+    }
+    head.append(tile, text);
+    if (menu.childElementCount) {
+      const more = button("More actions", "icon-button more", () => {
+      }, "more");
+      this.menuToggle(more, menu);
+      head.append(more);
+    }
+    if (!this.docked) head.append(button("Close", "icon-button", () => this.closePopup(), "close"));
+    if (menu.childElementCount) head.append(menu);
+    wrap.append(head);
+    return wrap;
+  }
+  errorBox() {
+    const error = element("div", "error", this.error);
+    if (this.loadFailed || this.error.startsWith("Saved.")) error.append(button("Try Again", "quiet", () => {
+      void this.refresh();
+    }));
+    return error;
+  }
+  /** The open comment, the new comment form, or the guest name form. Each fills the sidebar. */
+  detail() {
+    if (this.editing === "settings") return this.settingsView();
+    if (this.editing === "identity") return this.identityForm();
+    if (this.draft) return this.newCommentForm();
+    const comment = this.comments.find((c) => c.id === this.activeId && this.onCurrentPage(c.pageUrl));
+    return comment ? this.thread(comment) : null;
+  }
+  sidebar(detail) {
+    var _a;
+    const panel = element("section", `panel${((_a = this.config.position) == null ? void 0 : _a.endsWith("left")) ? " left" : ""}${this.placing ? " placing" : ""}`);
+    panel.setAttribute("aria-label", "Comments");
+    if (detail) {
+      panel.append(detail);
+      return panel;
+    }
+    panel.append(this.heading("Comments", ""));
+    const toolbar = element("div", "toolbar");
+    const add = button("Add Comment", "primary", () => this.startComment(), "plus");
+    add.disabled = this.initialLoad() || this.loadFailed || this.saving;
+    const refresh = button("Refresh comments", `icon-button outlined${this.loading ? " busy" : ""}`, () => {
+      void this.refresh();
+    }, "refresh");
+    refresh.disabled = this.loading || this.saving;
+    toolbar.append(add, refresh);
+    panel.append(toolbar);
+    panel.append(this.scopeBar());
+    const comments = this.scopeComments();
+    if (comments.length) panel.append(this.searchField(), this.peopleBar());
+    panel.append(this.statusTabs());
+    if (this.error) panel.append(this.errorBox());
+    panel.append(this.commentList(comments));
+    const footer = this.footer();
+    if (footer) panel.append(footer);
+    panel.addEventListener("keydown", (event) => {
+      const target = event.composedPath()[0];
+      if (event.key !== "/" || event.ctrlKey || event.metaKey || event.altKey || event.isComposing) return;
+      if (target instanceof Element && target.closest("input,textarea,select")) return;
+      const field = this.shadow.querySelector(".search input");
+      if (field) {
+        event.preventDefault();
+        field.focus();
+        field.select();
+      }
+    });
+    return panel;
+  }
+  /** Search, the Open/Resolved tabs and the author choices for the notes list. */
+  filterContext(scope = this.scope) {
+    return { userId: this.user.id, includePage: scope === "all", elementOf: (c) => this.onCurrentPage(c.pageUrl) ? this.elementInfo(c) : c.element };
+  }
+  restoreFilters() {
+    try {
+      const saved = JSON.parse(sessionStorage.getItem(this.filterKey) || "null");
+      if (!saved) return;
+      this.filters = readFilters(saved);
+      this.scope = saved.scope === "all" ? "all" : "page";
+    } catch {
+    }
+  }
+  saveFilters() {
+    try {
+      sessionStorage.setItem(this.filterKey, JSON.stringify({ ...this.filters, scope: this.scope }));
+    } catch {
+    }
+  }
+  /** Changes the filters, keeps them for this tab and says how many notes are shown. */
+  setFilters(patch, scope) {
+    this.filters = { ...this.filters, ...patch };
+    if (scope) this.scope = scope;
+    this.saveFilters();
+    this.render();
+    this.announceResults();
+  }
+  announceResults() {
+    const all = this.scopeComments();
+    if (!this.sidebarOpen || !all.length) return;
+    const shown = filterNotes(all, this.filters, this.filterContext()).length;
+    this.announce(shown ? `${shown} ${shown === 1 ? "note" : "notes"} shown.` : "No notes match.");
+  }
+  /** Rebuilds the counts, the list and the pins, not the search field, so typing keeps its undo history and IME state. */
+  refreshResults() {
+    const comments = this.scopeComments();
+    const swap = (selector, next) => {
+      var _a;
+      return (_a = this.shadow.querySelector(selector)) == null ? void 0 : _a.replaceWith(next);
+    };
+    swap(".scope", this.scopeBar());
+    swap(".people", this.peopleBar());
+    swap(".tabs", this.statusTabs());
+    swap(".list", this.commentList(comments));
+    this.pins.replaceChildren();
+    this.renderPins();
+    this.positionPins();
+  }
+  /** Only the search, Mine and author apply to these counts: each count is what that view shows. */
+  scopeBar() {
+    const scopes = element("div", "scope");
+    scopes.setAttribute("role", "group");
+    scopes.setAttribute("aria-label", "Show comments from");
+    const people = { ...this.filters, status: "all" };
+    for (const [scope, label] of [["page", "This Page"], ["all", "All Pages"]]) {
+      const notes = scope === "page" ? this.pageComments() : this.comments;
+      const count = filterNotes(notes, people, this.filterContext(scope)).length;
+      const option = button(label, "scope-option", () => this.setFilters({}, scope));
+      option.setAttribute("aria-label", `${label}, ${count} ${count === 1 ? "note" : "notes"}`);
+      option.setAttribute("aria-pressed", String(this.scope === scope));
+      option.dataset.focus = `scope-${scope}`;
+      option.append(element("span", "count", String(count)));
+      scopes.append(option);
+    }
+    return scopes;
+  }
+  searchField() {
+    const search = element("div", "search");
+    search.setAttribute("role", "search");
+    const input = element("input");
+    input.type = "search";
+    input.placeholder = "Search notes, replies, people…";
+    input.setAttribute("aria-label", "Search comments");
+    input.value = this.filters.query;
+    input.dataset.focus = "search";
+    input.maxLength = 200;
+    input.setAttribute("aria-keyshortcuts", "/");
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    const clear = button("Clear search", "icon-button search-clear", () => {
+      input.value = "";
+      apply(true);
+      input.focus();
+    }, "close");
+    clear.hidden = !input.value;
+    const apply = (now) => {
+      clearTimeout(this.searchTimer);
+      clear.hidden = !input.value;
+      const run = () => {
+        if (this.destroyed || this.filters.query === input.value) return;
+        this.filters = { ...this.filters, query: input.value };
+        this.saveFilters();
+        this.refreshResults();
+        this.announceResults();
+      };
+      if (now) run();
+      else this.searchTimer = setTimeout(run, 180);
+    };
+    input.addEventListener("input", () => apply(false));
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && input.value && !event.isComposing) {
+        event.preventDefault();
+        input.value = "";
+        apply(true);
+      } else if (event.key === "Enter" && !event.isComposing) {
+        event.preventDefault();
+        apply(true);
+      }
+    });
+    search.append(icon("search"), input, clear);
+    return search;
+  }
+  /** Mine, the author list and Clear Filters. */
+  peopleBar() {
+    const bar = element("div", "people");
+    bar.setAttribute("role", "group");
+    bar.setAttribute("aria-label", "Filter by person");
+    const counts = filterCounts(this.scopeComments(), this.filters, this.filterContext());
+    const hosted = this.storage instanceof HostedAdapter ? this.storage : null;
+    if (!hosted || hosted.signedIn) {
+      const mine = button("Mine", "filter-chip", () => this.setFilters({ mine: !this.filters.mine, author: "" }));
+      mine.title = "Only notes you started";
+      mine.dataset.focus = "filter-mine";
+      mine.setAttribute("aria-label", `Mine, ${counts.mine} ${counts.mine === 1 ? "note" : "notes"}`);
+      mine.setAttribute("aria-pressed", String(this.filters.mine));
+      mine.append(element("span", "count", String(counts.mine)));
+      bar.append(mine);
+    }
+    const authors = counts.authors;
+    if (this.filters.author && !authors.some((a) => a.key === this.filters.author)) authors.push({ key: this.filters.author, name: "Earlier author", count: 0 });
+    if (authors.length > 1 || this.filters.author) {
+      const wrap = element("span", `select${this.filters.author ? " chosen" : ""}`);
+      const select = element("select");
+      select.setAttribute("aria-label", "Author");
+      select.dataset.focus = "filter-author";
+      select.append(new Option("All Authors", ""));
+      for (const author of authors) select.append(new Option(`${author.name} (${author.count})`, author.key));
+      select.value = this.filters.author;
+      select.addEventListener("change", () => this.setFilters({ author: select.value, mine: false }));
+      wrap.append(select);
+      bar.append(wrap);
+    }
+    if (filtersActive(this.filters)) {
+      const clear = button("Clear Filters", "link-button", () => this.clearAllFilters());
+      clear.dataset.focus = "filter-clear";
+      bar.append(clear);
+    }
+    bar.hidden = !bar.childElementCount;
+    return bar;
+  }
+  statusTabs() {
+    const tabs = element("div", "tabs");
+    tabs.setAttribute("role", "group");
+    tabs.setAttribute("aria-label", "Filter by status");
+    const counts = filterCounts(this.scopeComments(), this.filters, this.filterContext());
+    for (const [status, label] of [["open", "Open"], ["resolved", "Resolved"], ["all", "All"]]) {
+      const tab = button(label, "tab", () => this.setFilters({ status }));
+      tab.setAttribute("aria-label", `${label}, ${counts[status]} ${counts[status] === 1 ? "note" : "notes"}`);
+      tab.setAttribute("aria-pressed", String(this.filters.status === status));
+      tab.dataset.focus = `tab-${status}`;
+      tab.append(element("span", "count", String(counts[status])));
+      tabs.append(tab);
+    }
+    return tabs;
+  }
+  clearAllFilters() {
+    var _a;
+    this.setFilters(clearFilters(this.scopeComments()));
+    (_a = this.shadow.querySelector(".search input, .panel .primary")) == null ? void 0 : _a.focus();
+  }
+  commentList(comments) {
+    var _a;
+    const list = element("div", "list");
+    list.setAttribute("aria-busy", String(this.loading));
+    const filtered = filterNotes(comments, this.filters, this.filterContext());
+    const pageScope = this.scope === "page";
+    if (this.initialLoad()) list.append(this.empty("Loading your notes", "Your comments will appear here in a moment."));
+    else if (this.loadFailed) list.append(this.empty("Could not load comments", "Your stored notes have not been changed. Try loading them again."));
+    else if (!comments.length) {
+      list.append(this.empty(
+        "Good ideas start here",
+        pageScope ? "Pin a thought to any part of this page. Keep the conversation in context." : "Comments from every page of this site appear here.",
+        pageScope ? button("Leave the First Note", "quiet", () => this.startComment()) : void 0
+      ));
+    } else if (!filtered.length) {
+      const query = this.filters.query.trim();
+      const why = query ? `Nothing ${pageScope ? "on this page" : "on any page"} matches “${query.length > 60 ? `${query.slice(0, 60)}…` : query}”.` : filtersActive(this.filters) ? "No notes fit these filters." : this.filters.status === "open" ? "Every note here is resolved." : "No note here is resolved yet.";
+      list.append(this.empty("No notes match", why, button("Clear Filters", "quiet", () => this.clearAllFilters())));
+    } else {
+      const numbers = this.noteNumbers();
+      const groups = /* @__PURE__ */ new Map();
+      for (const comment of [...filtered].sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())) {
+        const key2 = this.onCurrentPage(comment.pageUrl) ? "" : comment.pageUrl;
+        groups.set(key2, [...groups.get(key2) ?? [], comment]);
+      }
+      const ordered = [...groups].sort(([a], [b]) => Number(a !== "") - Number(b !== ""));
+      for (const [page, notes] of ordered) {
+        const title = element("div", "list-title");
+        if (pageScope) title.textContent = "On this page";
+        else {
+          const path = pageLabel(page || this.currentPage());
+          const name = (page ? (_a = notes.find((c) => c.pageTitle)) == null ? void 0 : _a.pageTitle : pageTitle()) ?? path;
+          const label = element("span", name === path ? "page-path" : "page-name", name);
+          label.title = path;
+          title.append(label);
+          if (name !== path) {
+            const where = element("span", "page-path sub", path);
+            where.title = path;
+            title.append(where);
+          }
+          if (!page) title.append(element("span", "here", "This page"));
+        }
+        list.append(title);
+        for (const comment of notes) list.append(this.noteRow(comment, numbers.get(comment.id) ?? 0, !!page));
+      }
+    }
+    return list;
+  }
+  noteRow(comment, number, elsewhere) {
+    const page = comment.pageTitle || pageLabel(comment.pageUrl);
+    const label = elsewhere ? `Open comment by ${comment.author} on ${page}` : `Open comment by ${comment.author}`;
+    const note = button(label, `note${this.activeId === comment.id ? " current" : ""}`, () => this.navigateToComment(comment.id));
+    note.replaceChildren();
+    const words2 = parseQuery(this.filters.query);
+    const main = element("div", "note-main");
+    main.append(this.messageHeader(comment.author, comment.timestamp, comment.avatarUrl, comment.via, words2), marked(element("p", "note-text"), comment.text, words2));
+    const match = words2.length ? matchNote(comment, words2, this.filterContext()) : null;
+    const where = (match == null ? void 0 : match.reply) ? [`${match.reply.author}: `, match.reply.text] : (match == null ? void 0 : match.element) ? ["Element: ", match.element] : null;
+    if (where) {
+      const line = element("p", "note-match");
+      line.append(icon((match == null ? void 0 : match.reply) ? "comment" : "pin"), element("span", "note-match-label", where[0]));
+      line.append(marked(element("span", "note-match-text"), excerpt(where[1], words2), words2));
+      main.append(line);
+    }
+    const state = elsewhere ? "shown" : this.elementState(comment);
+    if (comment.replies.length || elsewhere || state !== "shown") {
+      const footer = element("div", "note-footer");
+      if (comment.replies.length) footer.append(icon("comment"), element("span", "", `${comment.replies.length} ${comment.replies.length === 1 ? "reply" : "replies"}`));
+      if (state !== "shown") {
+        const info = this.elementInfo(comment);
+        const flag = element("span", `hidden-flag ${state}`, state === "removed" ? "Element removed" : (info == null ? void 0 : info.place) ? `Hidden in ${info.place}` : "Element hidden");
+        flag.prepend(icon(state === "removed" ? "unlink" : "eyeOff"));
+        flag.title = info ? `${info.label}${info.place ? ` in ${info.place}` : ""}. Open the comment to see where it was.` : "Open the comment to see where it was.";
+        footer.append(flag);
+      }
+      if (elsewhere) {
+        const go = element("span", "go", "Go to Page");
+        go.append(icon("open"));
+        footer.append(go);
+      }
+      main.append(footer);
+    }
+    const meta = element("span", "note-meta");
+    const status = element("span", `status${comment.resolved ? " resolved" : ""}`, comment.resolved ? "Resolved" : "Open");
+    if (comment.resolved) status.prepend(icon("check"));
+    else status.prepend(element("span", "status-dot"));
+    meta.append(element("span", "note-number", `#${number}`), status);
+    note.append(main, meta);
+    if (!elsewhere) {
+      note.addEventListener("pointerenter", () => this.hoverNote(comment.id));
+      note.addEventListener("pointerleave", () => this.hoverNote(null));
+      note.addEventListener("focus", () => this.hoverNote(comment.id));
+      note.addEventListener("blur", () => this.hoverNote(null));
+    }
+    return note;
+  }
+  empty(title, text, action) {
+    const empty = element("div", "empty");
+    const wrap = element("div");
+    const mark = element("div", "empty-icon");
+    mark.append(icon(title === "No notes match" ? "search" : "comment"));
+    wrap.append(mark, element("h3", "", title), element("p", "", text));
+    if (action) wrap.append(action);
+    empty.append(wrap);
+    return empty;
+  }
+  /** A new npm version is the one thing left at the bottom. The account and settings live in the header. */
+  footer() {
+    if (!this.update) return null;
+    const footer = element("div", "footer update-bar");
+    footer.setAttribute("role", "status");
+    const mark = element("span", "update-icon");
+    mark.append(icon("refresh"));
+    const text = element("div", "update-text");
+    text.append(element("strong", "", `Version ${this.update} is available`), element("span", "", `You have ${VERSION}. Update the package, then reload.`));
+    const command = element("div", "update-command");
+    const code = element("code", "", UPDATE_COMMAND);
+    code.title = UPDATE_COMMAND;
+    const copy = button(`Copy the command to update to version ${this.update}`, "quiet update", () => {
+      void this.copyUpdate();
+    });
+    copy.querySelector("span").textContent = "Copy";
+    command.append(code, copy);
+    footer.append(mark, text, button("Hide until the next version", "icon-button", () => this.dismissUpdate(), "close"), command);
+    return footer;
+  }
+  messageHeader(name, timestamp, url, via, words2 = []) {
+    const head = element("div", "note-header");
+    const time = element("time", "time", relativeTime(timestamp));
+    time.dateTime = timestamp.toISOString();
+    time.title = timestamp.toLocaleString();
+    head.append(avatar(name, url), marked(element("span", "name"), name, words2));
+    if (via) {
+      const source = element("span", "via", `via ${via}`);
+      source.title = `Posted through MCP by ${via}`;
+      head.append(source);
+    }
+    head.append(time);
+    return head;
+  }
+  view(title, className = "") {
+    const view = element("div", `detail ${className}`);
+    view.setAttribute("role", "group");
+    view.setAttribute("aria-label", title);
+    view.tabIndex = -1;
+    return view;
+  }
+  composer(isReply) {
+    const form = element("form", "compose");
+    const textarea = element("textarea");
+    textarea.setAttribute("aria-label", isReply ? "Reply" : "Comment");
+    textarea.placeholder = isReply ? "Keep the conversation going…" : "What’s on your mind?";
+    textarea.maxLength = 1e4;
+    textarea.required = true;
+    textarea.value = isReply ? this.replyText : this.text;
+    textarea.dataset.focus = isReply ? "reply" : "comment";
+    textarea.disabled = this.saving;
+    const bar = element("div", "compose-bar");
+    const hint = element("span", "compose-hint", "⌘ / Ctrl + Enter to send");
+    const submit = button(this.saving ? "Saving…" : isReply ? "Send Reply" : "Post Comment", "primary", () => {
+    }, "arrow");
+    submit.type = "submit";
+    submit.disabled = this.saving || !textarea.value.trim();
+    textarea.addEventListener("input", () => {
+      if (isReply) this.replyText = textarea.value;
+      else this.text = textarea.value;
+      submit.disabled = this.saving || !textarea.value.trim();
+    });
+    textarea.addEventListener("keydown", (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "Enter" && !event.isComposing) {
+        event.preventDefault();
+        if (!submit.disabled) form.requestSubmit();
+      }
+    });
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      if (!this.saving) {
+        if (isReply) this.submitReply();
+        else this.submitComment();
+      }
+    });
+    bar.append(hint, submit);
+    form.append(textarea, bar);
+    return form;
+  }
+  newCommentForm() {
+    const view = this.view("New comment", "new-comment");
+    view.append(this.cardHeading("New comment", `Commenting as ${this.user.name}`, "plus"));
+    if (this.error) view.append(this.errorBox());
+    view.append(this.composer(false));
+    return view;
+  }
+  thread(comment) {
+    var _a, _b;
+    const view = this.view("Comment thread", `thread${comment.resolved ? " is-resolved" : ""}`);
+    const canDelete = ((_b = (_a = this.config).canDelete) == null ? void 0 : _b.call(_a, comment, this.getUser())) ?? this.manages(comment);
+    view.append(this.cardHeading(
+      `Note #${this.pageComments().indexOf(comment) + 1}`,
+      comment.resolved ? "Resolved conversation" : "Open conversation",
+      "comment",
+      this.canMove(comment) ? "Drag its pin to move it." : "",
+      canDelete ? () => this.deleteNote(comment) : void 0
+    ));
+    if (this.error) view.append(this.errorBox());
+    if (comment.selector) view.append(this.anchorStatus(comment, this.elementState(comment)));
+    const body = element("div", "thread-body");
+    for (const message of [comment, ...comment.replies]) {
+      const row = element("div", "message");
+      row.append(this.messageHeader(message.author, message.timestamp, message.avatarUrl, message.via), element("p", "message-text", message.text));
+      body.append(row);
+    }
+    view.append(body);
+    const actions = element("div", "thread-actions");
+    if (comment.resolved) {
+      const status = element("span", "status resolved", "Resolved");
+      status.prepend(icon("check"));
+      const reopen = button("Reopen Conversation", "quiet reopen", () => this.toggleResolved(comment));
+      reopen.disabled = this.saving;
+      actions.append(status, reopen);
+    } else actions.append(...this.replyBar(comment));
+    view.append(actions);
+    return view;
+  }
+  /** One line to reply. The button resolves the conversation, or sends the reply once there is text. */
+  replyBar(comment) {
+    const form = element("form", "reply-bar");
+    const field = element("textarea");
+    field.rows = 1;
+    field.placeholder = "Reply…";
+    field.setAttribute("aria-label", "Reply");
+    field.maxLength = 1e4;
+    field.value = this.replyText;
+    field.dataset.focus = "reply";
+    field.disabled = this.saving;
+    const send = button(this.saving ? "Saving…" : "Send Reply", "primary send", () => {
+    }, "arrow");
+    send.type = "submit";
+    const resolve = button("Mark as Resolved", "primary resolve", () => this.toggleResolved(comment), "check");
+    resolve.querySelector("span").textContent = "Resolve";
+    resolve.disabled = this.saving;
+    send.disabled = this.saving;
+    const sync = () => {
+      const typed = !!field.value.trim();
+      send.hidden = !typed;
+      resolve.hidden = typed;
+      field.style.height = "auto";
+      field.style.height = `${Math.min(field.scrollHeight, 120)}px`;
+    };
+    field.addEventListener("input", () => {
+      this.replyText = field.value;
+      sync();
+    });
+    field.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+        event.preventDefault();
+        if (field.value.trim()) form.requestSubmit();
+      }
+    });
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      if (!this.saving) this.submitReply();
+    });
+    form.append(field, send);
+    queueMicrotask(sync);
+    return [form, resolve];
+  }
+  /** Authors manage their own comments. The project owner and admins manage every comment. */
+  manages(comment) {
+    return comment.authorId === this.user.id || this.user.role === "owner" || this.user.role === "admin";
+  }
+  canMove(comment) {
+    var _a, _b;
+    return ((_b = (_a = this.config).canMove) == null ? void 0 : _b.call(_a, comment, this.getUser())) ?? this.manages(comment);
+  }
+  /** Display choices for this project. Each person has their own, saved in this browser. */
+  settingsView() {
+    var _a;
+    const view = this.view("Settings", "settings");
+    view.append(this.detailHeading("Settings", "Your choices for this project. Other people keep their own."));
+    const current = this.settings, body = element("div", "settings-body");
+    const section = (title) => {
+      const group = element("section", "setting-group");
+      group.append(element("h3", "", title));
+      body.append(group);
+      return group;
+    };
+    const row = (group, label2, hint, control) => {
+      const line = element("div", "setting");
+      const text = element("div", "setting-text");
+      text.append(element("strong", "", label2));
+      if (hint) text.append(element("small", "", hint));
+      line.append(text, control);
+      group.append(line);
+      return line;
+    };
+    const choice = (name, label2, options) => {
+      const group = element("div", "segmented");
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-label", label2);
+      for (const [value, text] of options) {
+        const option = button(text, "segment", () => this.setSetting(name, value));
+        option.setAttribute("aria-pressed", String(current[name] === value));
+        option.dataset.focus = `set-${name}-${value}`;
+        group.append(option);
+      }
+      return group;
+    };
+    const toggle = (name, label2, disabled = false) => {
+      const on = current[name] === true;
+      const control = element("button", "switch");
+      control.type = "button";
+      control.setAttribute("role", "switch");
+      control.setAttribute("aria-checked", String(on));
+      control.setAttribute("aria-label", label2);
+      control.dataset.focus = `set-${name}`;
+      control.disabled = disabled;
+      control.addEventListener("click", () => this.setSetting(name, !on));
+      return control;
+    };
+    const look = section("Appearance");
+    row(look, "Theme", current.theme === "system" ? "Follows your device" : "", choice("theme", "Theme", [["light", "Light"], ["dark", "Dark"], ["system", "System"]]));
+    const pins = section("Pins");
+    const sample = element("div", `pin-sample${current.pinSize === "small" ? " small" : ""}${current.resolvedPins === "gray" ? " resolved-gray" : ""}`);
+    sample.setAttribute("aria-hidden", "true");
+    sample.style.setProperty("--cw-accent", this.pinColor());
+    const label = (n) => current.pinLabel === "initials" ? initials(this.user.name) : String(n);
+    sample.append(element("span", "pin", label(1)), element("span", "pin resolved", label(2)), element("span", "pin-sample-text", "Open and resolved"));
+    pins.append(sample);
+    const swatches = element("div", "swatches");
+    swatches.setAttribute("role", "group");
+    swatches.setAttribute("aria-label", "Pin color");
+    const site = this.config.primaryColor.toLowerCase();
+    const palette = Object.entries(PIN_COLORS).filter(([key2, c]) => c.color !== site || current.pinColor === key2);
+    for (const [value, name, color] of [["site", "Site color", site], ...palette.map(([key2, c]) => [key2, c.label, c.color])]) {
+      const swatch = button(name, "swatch", () => this.setSetting("pinColor", value));
+      swatch.replaceChildren();
+      swatch.style.setProperty("--swatch", color);
+      swatch.setAttribute("aria-pressed", String(current.pinColor === value));
+      swatch.dataset.focus = `set-pinColor-${value}`;
+      swatches.append(swatch);
+    }
+    row(pins, "Color", current.pinColor === "site" ? "The color of this site" : PIN_COLORS[current.pinColor].label, swatches).classList.add("wide");
+    row(pins, "Resolved pins", "", choice("resolvedPins", "Resolved pins", [["green", "Green"], ["gray", "Gray"]]));
+    row(pins, "Size", "", choice("pinSize", "Pin size", [["regular", "Regular"], ["small", "Small"]]));
+    row(pins, "Label", "", choice("pinLabel", "Pin label", [["number", "Number"], ["initials", "Initials"]]));
+    const floating = section("Comments button");
+    const buttonSample = element("div", "launcher-sample");
+    buttonSample.setAttribute("aria-hidden", "true");
+    const mini = element("span", "launcher-mini");
+    mini.append(icon("comment"), element("span", "badge", "3"));
+    this.paintLauncher(mini);
+    buttonSample.append(mini, element("span", "pin-sample-text", "On the page"));
+    floating.append(buttonSample);
+    const buttonSwatches = element("div", "swatches");
+    buttonSwatches.setAttribute("role", "group");
+    buttonSwatches.setAttribute("aria-label", "Button color");
+    const buttonPalette = Object.entries(PIN_COLORS).filter(([key2, c]) => key2 !== "graphite" && (c.color !== site || current.buttonColor === key2));
+    for (const [value, name, color] of [["default", "Default", "var(--cw-inverse)"], ["site", "Site color", site], ...buttonPalette.map(([key2, c]) => [key2, c.label, c.color])]) {
+      const swatch = button(name, "swatch", () => this.setSetting("buttonColor", value));
+      swatch.replaceChildren();
+      swatch.style.setProperty("--swatch", color);
+      swatch.setAttribute("aria-pressed", String(current.buttonColor === value));
+      swatch.dataset.focus = `set-buttonColor-${value}`;
+      buttonSwatches.append(swatch);
+    }
+    const buttonHint = current.buttonColor === "default" ? "Dark. Takes the site color while open." : current.buttonColor === "site" ? "The color of this site" : PIN_COLORS[current.buttonColor].label;
+    row(floating, "Color", buttonHint, buttonSwatches).classList.add("wide");
+    const panel = section("Panel");
+    const open = element("div", "segmented");
+    open.setAttribute("role", "group");
+    open.setAttribute("aria-label", "Open comments");
+    for (const [docked, text] of [[false, "Next to Pin"], [true, "In Sidebar"]]) {
+      const option = button(text, "segment", () => {
+        if (this.docked !== docked) this.setDocked(docked);
+      });
+      option.setAttribute("aria-pressed", String(this.docked === docked));
+      option.dataset.focus = `set-docked-${docked}`;
+      open.append(option);
+    }
+    row(panel, "Open comments", "", open);
+    row(panel, "Push the page aside", "The open panel does not cover the page.", toggle("pushContent", "Push the page aside"));
+    const alerts = section("Notifications and keys");
+    row(alerts, "New activity", "Show a short notice when others comment or reply.", toggle("notifications", "Show new activity"));
+    const keys = ((_a = this.config.keyboardShortcut) == null ? void 0 : _a.split("+").map((key2) => key2.length === 1 ? key2.toUpperCase() : key2[0].toUpperCase() + key2.slice(1)).join(" + ")) ?? "";
+    row(alerts, "Keyboard shortcut", this.shortcut ? `${keys} opens and closes comments.` : "This site has no shortcut.", toggle("shortcut", "Keyboard shortcut", !this.shortcut));
+    const foot = element("div", "settings-foot");
+    foot.append(element("span", "", "Saved in this browser"), button("Reset to Defaults", "quiet", () => this.resetSettings()));
+    view.append(body, foot);
+    return view;
+  }
+  /** Colors the floating button with the person's choice. The default button keeps its own dark and open styles. */
+  paintLauncher(launcher) {
+    const choice = this.settings.buttonColor;
+    if (choice === "default") return;
+    launcher.classList.add("colored");
+    launcher.style.setProperty("--cw-launcher", choice === "site" ? this.config.primaryColor : PIN_COLORS[choice].color);
+  }
+  /** The pin color the person chose, or the site's own color. */
+  pinColor() {
+    const choice = this.settings.pinColor;
+    return choice === "site" ? this.config.primaryColor : PIN_COLORS[choice].color;
+  }
+  identityForm() {
+    const view = this.view("Your guest profile");
+    view.append(this.detailHeading("Your name", "A name to put to your notes."));
+    const form = element("form", "identity-form");
+    const label = element("label", "", "Display name");
+    label.htmlFor = "guest-name";
+    const input = element("input");
+    input.id = "guest-name";
+    input.value = this.user.name === "Guest" ? "" : this.user.name;
+    input.placeholder = "Your name";
+    input.maxLength = 80;
+    input.required = true;
+    input.setAttribute("autocomplete", "nickname");
+    input.dataset.focus = "guest-name";
+    const explanation = element("p", "", this.persistentGuest ? "Your name and guest ID stay in this browser. No account or email is needed. You can change your name without changing your ID." : "Browser storage is unavailable. This guest profile lasts for this session.");
+    const submit = button("Save Name", "primary", () => {
+    });
+    submit.type = "submit";
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      if (!input.value.trim()) return;
+      this.user = { ...this.user, name: input.value.trim() };
+      this.persistentGuest = saveGuest(this.identityKey, this.user);
+      this.editing = null;
+      this.render();
+      this.announce("Guest name saved.");
+    });
+    form.append(label, input, explanation, submit);
+    view.append(form);
+    return view;
+  }
+  renderPins() {
+    this.pins.classList.toggle("focused", !!this.activeId && !this.draft);
+    const settings = this.settings;
+    this.pins.classList.toggle("small", settings.pinSize === "small");
+    this.pins.classList.toggle("resolved-gray", settings.resolvedPins === "gray");
+    this.pins.style.setProperty("--cw-accent", this.pinColor());
+    if (this.activeId) {
+      const ring = element("div", "focus-ring");
+      ring.hidden = true;
+      this.pins.append(ring);
+    }
+    const hoverRing = element("div", "focus-ring hover-ring");
+    hoverRing.hidden = true;
+    this.pins.append(hoverRing);
+    const comments = this.pageComments();
+    const filters = this.config.hideSidebar ? { ...DEFAULT_FILTERS, status: this.filters.status } : this.filters;
+    const shown = new Set(filterNotes(comments, filters, this.filterContext("page")).map((c) => c.id));
+    for (const [index, comment] of comments.entries()) {
+      if (comment.id !== this.activeId && !shown.has(comment.id)) continue;
+      const movable = !this.saving && this.canMove(comment);
+      const pin = button(`Comment ${index + 1} by ${comment.author}: ${comment.text.slice(0, 100)}`, `pin${comment.resolved ? " resolved" : ""}${this.highlightId === comment.id ? " highlight" : ""}${this.hoverId === comment.id ? " hovered" : ""}${movable ? " movable" : ""}`, () => {
+        if (this.suppressPinClick) {
+          this.suppressPinClick = false;
+          return;
+        }
+        this.navigateToComment(comment.id);
+      });
+      if (movable) {
+        pin.title += ". Drag to move.";
+        pin.addEventListener("pointerdown", (event) => this.startPinDrag(event, comment));
+      }
+      pin.replaceChildren(document.createTextNode(settings.pinLabel === "initials" ? initials(comment.author) : String(index + 1)));
+      pin.dataset.id = comment.id;
+      pin.setAttribute("aria-pressed", String(this.activeId === comment.id));
+      this.pins.append(pin);
+    }
+    const pickRing = element("div", "focus-ring pick-ring");
+    pickRing.hidden = true;
+    this.pins.append(pickRing);
+    if (this.placing) {
+      const preview = element("span", "pin preview", "+");
+      preview.hidden = true;
+      this.pins.append(preview);
+    }
+    if (this.draft) {
+      const preview = element("span", "pin", "+");
+      const pos = this.position({ ...this.draft, ...this.draft.position });
+      if (pos) {
+        preview.style.left = `${pos.x}px`;
+        preview.style.top = `${pos.y}px`;
+      } else preview.hidden = true;
+      this.pins.append(preview);
+    }
+  }
+}
+class APIAdapter {
+  constructor(config) {
+    this.config = config;
+  }
+  async request(path, method = "GET", body) {
+    const headers = typeof this.config.headers === "function" ? await this.config.headers() : this.config.headers;
+    const url = new URL(`${this.config.baseUrl.replace(/\/$/, "")}${path}`, window.location.href);
+    if (this.config.projectId) url.searchParams.set("projectId", this.config.projectId);
+    const response = await fetch(url, {
+      method,
+      credentials: this.config.credentials ?? "same-origin",
+      headers: { ...body !== void 0 ? { "Content-Type": "application/json" } : {}, ...headers },
+      body: body !== void 0 ? JSON.stringify(body) : void 0
+    });
+    if (!response.ok) throw new Error(`Could not ${method === "GET" ? "load" : "save"} comments (${response.status}).`);
+    if (method !== "GET" || response.status === 204) return void 0;
+    return response.json();
+  }
+  async loadComments() {
+    var _a;
+    return normalizeComments(await this.request(((_a = this.config.endpoints) == null ? void 0 : _a.load) ?? "/comments"));
+  }
+  async saveComments(comments) {
+    var _a;
+    await this.request(((_a = this.config.endpoints) == null ? void 0 : _a.save) ?? "/comments", "POST", comments);
+  }
+  async upsertComment(comment) {
+    var _a;
+    await this.request(`${((_a = this.config.endpoints) == null ? void 0 : _a.save) ?? "/comments"}/${encodeURIComponent(comment.id)}`, "PUT", comment);
+  }
+  async deleteComment(id) {
+    var _a;
+    await this.request(`${((_a = this.config.endpoints) == null ? void 0 : _a.save) ?? "/comments"}/${encodeURIComponent(id)}`, "DELETE");
+  }
+  async addReply(id, reply2) {
+    var _a;
+    await this.request(`${((_a = this.config.endpoints) == null ? void 0 : _a.save) ?? "/comments"}/${encodeURIComponent(id)}/replies`, "POST", reply2);
+  }
+  async setResolved(id, resolved) {
+    var _a;
+    await this.request(`${((_a = this.config.endpoints) == null ? void 0 : _a.save) ?? "/comments"}/${encodeURIComponent(id)}`, "PATCH", { resolved });
+  }
+}
+function initOverplay(config = {}) {
+  if (typeof document === "undefined" || !document.body) throw new Error("Initialize Overplay in the browser after the page has mounted.");
+  return new Overlay(config);
+}
+const init = initOverplay;
+export {
+  APIAdapter,
+  HostedAdapter,
+  LocalStorageAdapter,
+  init,
+  initOverplay
+};
+//# sourceMappingURL=overplay.esm.js.map