astro-annotate 0.1.0

package/dist/client.js

@@ -0,0 +1,920 @@
+import {
+  API_ANNOTATIONS,
+  SHADOW_ROOT_ID
+} from "./chunk-QG2SIJB2.js";
+
+// src/client/styles.ts
+var OVERLAY_STYLES = `
+  :host {
+    all: initial;
+    position: fixed;
+    z-index: 2147483647;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #1a1a2e;
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Toolbar */
+  .aa-toolbar {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #1a1a2e;
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 50px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    border: 1.5px solid rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s ease;
+  }
+
+  .aa-toolbar:hover {
+    background: #16213e;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    border-color: rgba(255, 255, 255, 0.35);
+  }
+
+  .aa-toolbar.aa-active {
+    background: #e94560;
+  }
+
+  .aa-toolbar.aa-active:hover {
+    background: #c73e54;
+  }
+
+  .aa-toolbar-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+
+  .aa-toolbar-label {
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .aa-badge {
+    background: #e94560;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+    min-width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+  }
+
+  .aa-toolbar.aa-active .aa-badge {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  /* Element Highlight */
+  .aa-highlight {
+    position: fixed;
+    pointer-events: none;
+    border: 2px solid #e94560;
+    background: rgba(233, 69, 96, 0.08);
+    border-radius: 3px;
+    z-index: 2147483646;
+    transition: all 0.1s ease;
+  }
+
+  .aa-highlight-label {
+    position: absolute;
+    top: -26px;
+    left: -2px;
+    background: #e94560;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 3px 3px 0 0;
+    white-space: nowrap;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Annotation Form */
+  .aa-form-container {
+    position: fixed;
+    z-index: 2147483647;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    width: 340px;
+    overflow: hidden;
+  }
+
+  .aa-form-header {
+    background: #1a1a2e;
+    color: #fff;
+    padding: 12px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .aa-form-header-title {
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .aa-form-header-selector {
+    font-size: 11px;
+    opacity: 0.7;
+    font-family: 'SF Mono', Monaco, monospace;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .aa-form-close {
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    opacity: 0.7;
+    padding: 0 0 0 8px;
+  }
+
+  .aa-form-close:hover {
+    opacity: 1;
+  }
+
+  .aa-form-body {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .aa-input, .aa-textarea {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 13px;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  .aa-input:focus, .aa-textarea:focus {
+    border-color: #e94560;
+  }
+
+  .aa-textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+
+  .aa-form-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .aa-btn {
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    transition: all 0.15s;
+  }
+
+  .aa-btn-primary {
+    background: #e94560;
+    color: #fff;
+  }
+
+  .aa-btn-primary:hover {
+    background: #c73e54;
+  }
+
+  .aa-btn-primary:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+  }
+
+  .aa-btn-secondary {
+    background: #f0f0f0;
+    color: #333;
+  }
+
+  .aa-btn-secondary:hover {
+    background: #e0e0e0;
+  }
+
+  /* Pins */
+  .aa-pin {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    border-radius: 50% 50% 50% 0;
+    background: #e94560;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transform: rotate(-45deg);
+    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
+    transition: transform 0.15s, box-shadow 0.15s;
+    z-index: 2147483645;
+  }
+
+  .aa-pin:hover {
+    transform: rotate(-45deg) scale(1.15);
+    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.5);
+  }
+
+  .aa-pin.aa-resolved {
+    background: #2ecc71;
+    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.4);
+  }
+
+  .aa-pin-number {
+    transform: rotate(45deg);
+  }
+
+  /* Pin Detail Popup */
+  .aa-pin-detail {
+    position: fixed;
+    z-index: 2147483647;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    width: 320px;
+    overflow: hidden;
+  }
+
+  .aa-pin-detail-header {
+    background: #1a1a2e;
+    color: #fff;
+    padding: 12px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .aa-pin-detail-meta {
+    font-size: 11px;
+    opacity: 0.7;
+  }
+
+  .aa-pin-detail-body {
+    padding: 16px;
+  }
+
+  .aa-pin-detail-text {
+    font-size: 14px;
+    margin-bottom: 12px;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .aa-pin-detail-info {
+    font-size: 12px;
+    color: #888;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .aa-pin-detail-selector {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 11px;
+    color: #666;
+    background: #f5f5f5;
+    padding: 4px 8px;
+    border-radius: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .aa-pin-detail-actions {
+    padding: 0 16px 16px;
+    display: flex;
+    gap: 8px;
+  }
+
+  .aa-status-btn {
+    padding: 4px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    border: 1px solid #e0e0e0;
+    background: #fff;
+    transition: all 0.15s;
+  }
+
+  .aa-status-btn:hover {
+    background: #f5f5f5;
+  }
+
+  .aa-status-btn.aa-resolve {
+    color: #2ecc71;
+    border-color: #2ecc71;
+  }
+
+  .aa-status-btn.aa-resolve:hover {
+    background: #2ecc71;
+    color: #fff;
+  }
+
+  .aa-status-btn.aa-reopen {
+    color: #e94560;
+    border-color: #e94560;
+  }
+
+  .aa-status-btn.aa-reopen:hover {
+    background: #e94560;
+    color: #fff;
+  }
+
+  /* Dark mode */
+  @media (prefers-color-scheme: dark) {
+    .aa-form-container, .aa-pin-detail {
+      background: #2d2d3f;
+      color: #e0e0e0;
+    }
+
+    .aa-input, .aa-textarea {
+      background: #1a1a2e;
+      border-color: #404060;
+      color: #e0e0e0;
+    }
+
+    .aa-btn-secondary {
+      background: #404060;
+      color: #e0e0e0;
+    }
+
+    .aa-btn-secondary:hover {
+      background: #505070;
+    }
+
+    .aa-pin-detail-selector {
+      background: #1a1a2e;
+      color: #aaa;
+    }
+
+    .aa-status-btn {
+      background: #2d2d3f;
+      border-color: #404060;
+    }
+
+    .aa-status-btn:hover {
+      background: #404060;
+    }
+  }
+`;
+
+// src/client/toolbar.ts
+var ANNOTATE_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="aa-toolbar-icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="12" y1="6" x2="12" y2="12"/></svg>`;
+var Toolbar = class {
+  el;
+  label;
+  badge;
+  active = false;
+  onToggle;
+  constructor(shadowRoot, onToggle) {
+    this.onToggle = onToggle;
+    this.el = document.createElement("div");
+    this.el.className = "aa-toolbar";
+    this.el.innerHTML = ANNOTATE_ICON;
+    this.label = document.createElement("span");
+    this.label.className = "aa-toolbar-label";
+    this.label.textContent = "Annotate";
+    this.el.appendChild(this.label);
+    this.badge = document.createElement("span");
+    this.badge.className = "aa-badge";
+    this.badge.textContent = "0";
+    this.badge.style.display = "none";
+    this.el.appendChild(this.badge);
+    this.el.addEventListener("click", () => {
+      this.toggle();
+    });
+    shadowRoot.appendChild(this.el);
+  }
+  toggle() {
+    this.active = !this.active;
+    this.el.classList.toggle("aa-active", this.active);
+    this.label.textContent = this.active ? "Stop" : "Annotate";
+    this.onToggle(this.active);
+  }
+  deactivate() {
+    if (this.active) {
+      this.active = false;
+      this.el.classList.remove("aa-active");
+      this.label.textContent = "Annotate";
+    }
+  }
+  updateCount(count) {
+    this.badge.textContent = String(count);
+    this.badge.style.display = count > 0 ? "flex" : "none";
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/client/selector.ts
+var ASTRO_CLASS_RE = /^astro-[a-zA-Z0-9]+$/;
+var IGNORED_TAGS = /* @__PURE__ */ new Set(["html", "body", "head"]);
+function isAstroClass(cls) {
+  return ASTRO_CLASS_RE.test(cls);
+}
+function getStableClasses(el) {
+  return Array.from(el.classList).filter((cls) => !isAstroClass(cls));
+}
+function isUnique(selector) {
+  try {
+    return document.querySelectorAll(selector).length === 1;
+  } catch {
+    return false;
+  }
+}
+function escapeSelector(value) {
+  return CSS.escape(value);
+}
+function generateSelector(target) {
+  if (IGNORED_TAGS.has(target.tagName.toLowerCase())) {
+    return target.tagName.toLowerCase();
+  }
+  if (target.id && !/^[0-9]/.test(target.id) && !target.id.includes(":")) {
+    const sel = `#${escapeSelector(target.id)}`;
+    if (isUnique(sel)) return sel;
+  }
+  const testId = target.getAttribute("data-testid");
+  if (testId) {
+    const sel = `[data-testid="${escapeSelector(testId)}"]`;
+    if (isUnique(sel)) return sel;
+  }
+  const tag = target.tagName.toLowerCase();
+  const classes = getStableClasses(target);
+  if (classes.length > 0) {
+    const classSel = classes.map((c) => `.${escapeSelector(c)}`).join("");
+    const sel = `${tag}${classSel}`;
+    if (isUnique(sel)) return sel;
+  }
+  const path = [];
+  let current = target;
+  while (current && !IGNORED_TAGS.has(current.tagName.toLowerCase())) {
+    let segment = current.tagName.toLowerCase();
+    if (current.id && !/^[0-9]/.test(current.id) && !current.id.includes(":")) {
+      segment = `#${escapeSelector(current.id)}`;
+      path.unshift(segment);
+      const sel2 = path.join(" > ");
+      if (isUnique(sel2)) return sel2;
+      break;
+    }
+    const cls = getStableClasses(current);
+    if (cls.length > 0) {
+      segment += cls.map((c) => `.${escapeSelector(c)}`).join("");
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (s) => s.tagName === current.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        segment += `:nth-child(${index})`;
+      }
+    }
+    path.unshift(segment);
+    const sel = path.join(" > ");
+    if (isUnique(sel)) return sel;
+    current = parent;
+  }
+  return path.join(" > ") || tag;
+}
+function getElementLabel(el) {
+  const tag = el.tagName.toLowerCase();
+  const classes = getStableClasses(el);
+  const classStr = classes.length > 0 ? `.${classes.slice(0, 3).join(".")}` : "";
+  return `<${tag}${classStr}>`;
+}
+function getElementText(el) {
+  const text = el.textContent?.trim() || "";
+  return text.slice(0, 200);
+}
+
+// src/client/highlighter.ts
+var Highlighter = class {
+  constructor(shadowRoot) {
+    this.shadowRoot = shadowRoot;
+    this.highlight = document.createElement("div");
+    this.highlight.className = "aa-highlight";
+    this.highlight.style.display = "none";
+    this.label = document.createElement("div");
+    this.label.className = "aa-highlight-label";
+    this.highlight.appendChild(this.label);
+    this.shadowRoot.appendChild(this.highlight);
+  }
+  highlight;
+  label;
+  currentTarget = null;
+  isOwnElement(el) {
+    const root = document.getElementById(SHADOW_ROOT_ID);
+    return root !== null && (root === el || root.contains(el));
+  }
+  onMouseMove = (e) => {
+    const target = e.target;
+    if (!target || this.isOwnElement(target)) {
+      this.hide();
+      return;
+    }
+    if (target === this.currentTarget) return;
+    this.currentTarget = target;
+    const rect = target.getBoundingClientRect();
+    this.highlight.style.display = "block";
+    this.highlight.style.top = `${rect.top}px`;
+    this.highlight.style.left = `${rect.left}px`;
+    this.highlight.style.width = `${rect.width}px`;
+    this.highlight.style.height = `${rect.height}px`;
+    this.label.textContent = getElementLabel(target);
+  };
+  hide() {
+    this.highlight.style.display = "none";
+    this.currentTarget = null;
+  }
+  getTarget() {
+    return this.currentTarget;
+  }
+  destroy() {
+    this.highlight.remove();
+  }
+};
+
+// src/client/form.ts
+var AnnotationForm = class {
+  constructor(shadowRoot, onSubmitted) {
+    this.shadowRoot = shadowRoot;
+    this.container = document.createElement("div");
+    this.container.className = "aa-form-container";
+    this.container.style.display = "none";
+    this.shadowRoot.appendChild(this.container);
+    this.onSubmitted = onSubmitted;
+  }
+  container;
+  onSubmitted;
+  show(target) {
+    const selector = generateSelector(target);
+    const elementTag = target.tagName.toLowerCase();
+    const elementText = getElementText(target);
+    const rect = target.getBoundingClientRect();
+    let top = rect.bottom + 8;
+    let left = rect.left;
+    if (top + 300 > window.innerHeight) {
+      top = rect.top - 308;
+    }
+    if (left + 340 > window.innerWidth) {
+      left = window.innerWidth - 350;
+    }
+    if (top < 10) top = 10;
+    if (left < 10) left = 10;
+    this.container.style.top = `${top}px`;
+    this.container.style.left = `${left}px`;
+    this.container.style.display = "block";
+    this.container.innerHTML = `
+      <div class="aa-form-header">
+        <div>
+          <div class="aa-form-header-title">New Annotation</div>
+          <div class="aa-form-header-selector">${this.escapeHtml(selector)}</div>
+        </div>
+        <button class="aa-form-close" data-action="close">&times;</button>
+      </div>
+      <div class="aa-form-body">
+        <input class="aa-input" type="text" placeholder="Your name" data-field="author" value="" />
+        <textarea class="aa-textarea" placeholder="What should be changed?" data-field="text"></textarea>
+        <div class="aa-form-actions">
+          <button class="aa-btn aa-btn-secondary" data-action="close">Cancel</button>
+          <button class="aa-btn aa-btn-primary" data-action="submit">Submit</button>
+        </div>
+      </div>
+    `;
+    const textarea = this.container.querySelector('[data-field="text"]');
+    setTimeout(() => textarea?.focus(), 50);
+    this.container.querySelectorAll('[data-action="close"]').forEach((btn) => {
+      btn.addEventListener("click", () => this.hide());
+    });
+    const submitBtn = this.container.querySelector('[data-action="submit"]');
+    submitBtn.addEventListener("click", () => {
+      this.submit(selector, elementTag, elementText);
+    });
+    textarea.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        this.submit(selector, elementTag, elementText);
+      }
+    });
+  }
+  async submit(selector, elementTag, elementText) {
+    const text = this.container.querySelector('[data-field="text"]')?.value?.trim();
+    const author = this.container.querySelector('[data-field="author"]')?.value?.trim();
+    if (!text) return;
+    const submitBtn = this.container.querySelector('[data-action="submit"]');
+    submitBtn.disabled = true;
+    submitBtn.textContent = "Saving...";
+    const payload = {
+      page: window.location.pathname,
+      selector,
+      elementTag,
+      elementText,
+      viewport: { width: window.innerWidth, height: window.innerHeight },
+      device: window.innerWidth < 768 ? "mobile" : window.innerWidth < 1024 ? "tablet" : "desktop",
+      text,
+      author: author || "Anonymous"
+    };
+    try {
+      const res = await fetch(API_ANNOTATIONS, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!res.ok) throw new Error("Failed to save");
+      this.hide();
+      this.onSubmitted();
+    } catch (err) {
+      submitBtn.disabled = false;
+      submitBtn.textContent = "Submit";
+      console.error("[astro-annotate] Failed to save annotation:", err);
+    }
+  }
+  hide() {
+    this.container.style.display = "none";
+    this.container.innerHTML = "";
+  }
+  isVisible() {
+    return this.container.style.display !== "none";
+  }
+  escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  destroy() {
+    this.container.remove();
+  }
+};
+
+// src/client/pin.ts
+var PinManager = class {
+  constructor(shadowRoot, onChanged) {
+    this.shadowRoot = shadowRoot;
+    this.detailPopup = document.createElement("div");
+    this.detailPopup.className = "aa-pin-detail";
+    this.detailPopup.style.display = "none";
+    this.shadowRoot.appendChild(this.detailPopup);
+    this.onChanged = onChanged;
+  }
+  pins = [];
+  detailPopup;
+  onChanged;
+  render(annotations) {
+    this.clearPins();
+    annotations.forEach((annotation, index) => {
+      const el = document.querySelector(annotation.selector);
+      if (!el) return;
+      const pin = document.createElement("div");
+      pin.className = `aa-pin${annotation.status === "resolved" ? " aa-resolved" : ""}`;
+      pin.innerHTML = `<span class="aa-pin-number">${index + 1}</span>`;
+      const updatePosition = () => {
+        const rect = el.getBoundingClientRect();
+        pin.style.position = "fixed";
+        pin.style.top = `${Math.max(0, rect.top - 10)}px`;
+        pin.style.left = `${Math.max(0, rect.right - 24)}px`;
+      };
+      updatePosition();
+      pin.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.showDetail(annotation, index, el);
+      });
+      this.shadowRoot.appendChild(pin);
+      this.pins.push(pin);
+      const observer = new IntersectionObserver(() => updatePosition(), { threshold: 0 });
+      observer.observe(el);
+    });
+  }
+  showDetail(annotation, index, el) {
+    const rect = el.getBoundingClientRect();
+    let top = rect.bottom + 8;
+    let left = rect.left;
+    if (top + 250 > window.innerHeight) {
+      top = rect.top - 258;
+    }
+    if (left + 320 > window.innerWidth) {
+      left = window.innerWidth - 330;
+    }
+    if (top < 10) top = 10;
+    if (left < 10) left = 10;
+    this.detailPopup.style.top = `${top}px`;
+    this.detailPopup.style.left = `${left}px`;
+    this.detailPopup.style.display = "block";
+    const date = new Date(annotation.timestamp).toLocaleString();
+    this.detailPopup.innerHTML = `
+      <div class="aa-pin-detail-header">
+        <div>
+          <div class="aa-form-header-title">#${index + 1} \u2014 ${this.escapeHtml(annotation.author)}</div>
+          <div class="aa-pin-detail-meta">${date} \xB7 ${annotation.device} \xB7 ${annotation.status}</div>
+        </div>
+        <button class="aa-form-close" data-action="close-detail">&times;</button>
+      </div>
+      <div class="aa-pin-detail-body">
+        <div class="aa-pin-detail-text">${this.escapeHtml(annotation.text)}</div>
+        <div class="aa-pin-detail-info">
+          <div class="aa-pin-detail-selector">${this.escapeHtml(annotation.selector)}</div>
+        </div>
+      </div>
+      <div class="aa-pin-detail-actions">
+        ${this.getStatusButtons(annotation)}
+      </div>
+    `;
+    this.detailPopup.querySelector('[data-action="close-detail"]')?.addEventListener("click", () => {
+      this.hideDetail();
+    });
+    this.detailPopup.querySelectorAll("[data-status]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const status = btn.dataset.status;
+        this.updateStatus(annotation.id, status);
+      });
+    });
+  }
+  getStatusButtons(annotation) {
+    if (annotation.status === "open") {
+      return `
+        <button class="aa-status-btn aa-resolve" data-status="resolved">Done</button>
+      `;
+    }
+    return `<button class="aa-status-btn aa-reopen" data-status="open">Reopen</button>`;
+  }
+  async updateStatus(id, status) {
+    try {
+      const res = await fetch(`${API_ANNOTATIONS}/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status })
+      });
+      if (!res.ok) throw new Error("Failed to update");
+      this.hideDetail();
+      this.onChanged();
+    } catch (err) {
+      console.error("[astro-annotate] Failed to update annotation:", err);
+    }
+  }
+  hideDetail() {
+    this.detailPopup.style.display = "none";
+  }
+  clearPins() {
+    this.pins.forEach((pin) => pin.remove());
+    this.pins = [];
+    this.hideDetail();
+  }
+  escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  destroy() {
+    this.clearPins();
+    this.detailPopup.remove();
+  }
+};
+
+// src/client/overlay.ts
+var Overlay = class {
+  host;
+  shadowRoot;
+  toolbar;
+  highlighter;
+  form;
+  pinManager;
+  active = false;
+  annotations = [];
+  constructor() {
+    this.host = document.createElement("div");
+    this.host.id = SHADOW_ROOT_ID;
+    document.body.appendChild(this.host);
+    this.shadowRoot = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = OVERLAY_STYLES;
+    this.shadowRoot.appendChild(style);
+    this.toolbar = new Toolbar(this.shadowRoot, (active) => this.setActive(active));
+    this.highlighter = new Highlighter(this.shadowRoot);
+    this.form = new AnnotationForm(this.shadowRoot, () => this.onAnnotationCreated());
+    this.pinManager = new PinManager(this.shadowRoot, () => this.loadAnnotations());
+    this.loadAnnotations();
+    document.addEventListener("click", (e) => {
+      const target = e.target;
+      if (!this.host.contains(target)) {
+        this.pinManager.hideDetail();
+      }
+    });
+    let scrollTimeout;
+    window.addEventListener("scroll", () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => this.renderPins(), 50);
+    }, { passive: true });
+    window.addEventListener("resize", () => {
+      this.renderPins();
+    }, { passive: true });
+  }
+  setActive(active) {
+    this.active = active;
+    if (active) {
+      this.form.hide();
+      this.pinManager.hideDetail();
+      document.addEventListener("mousemove", this.highlighter.onMouseMove);
+      document.addEventListener("click", this.onElementClick);
+    } else {
+      document.removeEventListener("mousemove", this.highlighter.onMouseMove);
+      document.removeEventListener("click", this.onElementClick);
+      this.highlighter.hide();
+      this.form.hide();
+    }
+  }
+  onElementClick = (e) => {
+    const target = e.target;
+    if (this.host.contains(target) || this.host === target) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.highlighter.hide();
+    document.removeEventListener("mousemove", this.highlighter.onMouseMove);
+    this.form.show(target);
+  };
+  async loadAnnotations() {
+    try {
+      const page = window.location.pathname;
+      const res = await fetch(`${API_ANNOTATIONS}?page=${encodeURIComponent(page)}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      this.annotations = data.annotations || [];
+      this.toolbar.updateCount(this.annotations.filter((a) => a.status === "open").length);
+      this.renderPins();
+    } catch {
+    }
+  }
+  renderPins() {
+    this.pinManager.render(this.annotations);
+  }
+  onAnnotationCreated() {
+    this.toolbar.deactivate();
+    this.setActive(false);
+    this.loadAnnotations();
+  }
+  destroy() {
+    this.setActive(false);
+    this.toolbar.destroy();
+    this.highlighter.destroy();
+    this.form.destroy();
+    this.pinManager.destroy();
+    this.host.remove();
+  }
+};
+
+// src/client/index.ts
+var overlay = null;
+function init() {
+  const existing = document.getElementById(SHADOW_ROOT_ID);
+  if (existing) {
+    existing.remove();
+    overlay = null;
+  }
+  overlay = new Overlay();
+}
+document.addEventListener("astro:page-load", init);
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!document.getElementById(SHADOW_ROOT_ID)) {
+      init();
+    }
+  });
+} else {
+  if (!document.getElementById(SHADOW_ROOT_ID)) {
+    init();
+  }
+}
+//# sourceMappingURL=client.js.map