astro-annotate 0.2.1 → 0.4.0

package/dist/client.js

@@ -21,70 +21,6 @@ var OVERLAY_STYLES = `
     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;
@@ -119,6 +55,7 @@ var OVERLAY_STYLES = `
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0, 0, 0, 0.08);
     width: 340px;
     overflow: hidden;
   }
@@ -269,6 +206,7 @@ var OVERLAY_STYLES = `
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0, 0, 0, 0.08);
     width: 320px;
     overflow: hidden;
   }
@@ -358,11 +296,288 @@ var OVERLAY_STYLES = `
     color: #fff;
   }
 
+  /* Annotation Panel */
+  .aa-panel {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    width: 360px;
+    height: calc(100vh - 32px);
+    background: #fff;
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 12px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    z-index: 2147483647;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    color: #1a1a2e;
+  }
+
+  .aa-panel.aa-panel-left {
+    right: auto;
+    left: 16px;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+  }
+
+  .aa-panel-header {
+    background: #1a1a2e;
+    color: #fff;
+    padding: 14px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .aa-panel-title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .aa-panel-header-actions {
+    display: flex;
+    gap: 4px;
+  }
+
+  .aa-panel-header-actions button {
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    font-size: 16px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    opacity: 0.7;
+  }
+
+  .aa-panel-header-actions button:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .aa-panel-filters {
+    display: flex;
+    background: #f8f8fa;
+    border-bottom: 1px solid #e0e0e0;
+    flex-shrink: 0;
+  }
+
+  .aa-panel-filters button {
+    flex: 1;
+    padding: 10px 8px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    color: #666;
+    transition: color 0.15s, border-color 0.15s;
+  }
+
+  .aa-panel-filters button:hover {
+    color: #1a1a2e;
+    background: #f0f0f2;
+  }
+
+  .aa-panel-filters button.aa-active {
+    color: #e94560;
+    border-bottom-color: #e94560;
+  }
+
+  .aa-panel-bulk {
+    padding: 10px 16px;
+    border-bottom: 1px solid #e0e0e0;
+    flex-shrink: 0;
+  }
+
+  .aa-panel-bulk-btn {
+    width: 100%;
+    padding: 7px 12px;
+    border: 1px solid #2ecc71;
+    border-radius: 6px;
+    background: transparent;
+    color: #2ecc71;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .aa-panel-bulk-btn:hover {
+    background: #2ecc71;
+    color: #fff;
+  }
+
+  .aa-panel-bulk-btn[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .aa-panel-list {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .aa-panel-item {
+    padding: 12px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background 0.1s;
+  }
+
+  .aa-panel-item:hover {
+    background: #fafafa;
+  }
+
+  .aa-panel-item.aa-panel-item-resolved {
+    opacity: 0.6;
+  }
+
+  .aa-panel-item-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+    font-size: 12px;
+  }
+
+  .aa-panel-item-number {
+    font-weight: 700;
+    color: #e94560;
+  }
+
+  .aa-panel-item-number.aa-panel-item-number-resolved {
+    color: #2ecc71;
+  }
+
+  .aa-panel-item-author {
+    font-weight: 500;
+  }
+
+  .aa-panel-item-time {
+    color: #999;
+    margin-left: auto;
+    font-size: 11px;
+  }
+
+  .aa-panel-item-selector {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 11px;
+    color: #666;
+    background: #f5f5f5;
+    padding: 3px 6px;
+    border-radius: 3px;
+    margin-bottom: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .aa-panel-item-text {
+    font-size: 13px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin-bottom: 8px;
+    color: #333;
+  }
+
+  .aa-panel-item-actions {
+    display: flex;
+    gap: 6px;
+  }
+
+  .aa-panel-item-actions button {
+    padding: 3px 10px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 11px;
+    cursor: pointer;
+    transition: all 0.15s;
+    color: #555;
+  }
+
+  .aa-panel-item-actions button:hover {
+    background: #f5f5f5;
+    border-color: #ccc;
+  }
+
+  .aa-panel-edit-textarea {
+    width: 100%;
+    min-height: 60px;
+    max-height: 40vh;
+    padding: 8px;
+    border: 1px solid #e94560;
+    border-radius: 4px;
+    font-size: 13px;
+    font-family: inherit;
+    resize: vertical;
+    outline: none;
+    overflow-y: auto;
+    margin-bottom: 6px;
+  }
+
+  .aa-panel-empty {
+    padding: 40px 16px;
+    text-align: center;
+    color: #999;
+    font-size: 13px;
+  }
+
+  /* Floating Action Button */
+  .aa-panel-fab {
+    position: fixed;
+    bottom: 72px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #1a1a2e;
+    color: #fff;
+    cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    z-index: 2147483647;
+    transition: background 0.15s;
+  }
+
+  .aa-panel-fab:hover {
+    background: #2a2a40;
+  }
+
+  .aa-panel-fab-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    background: #e94560;
+    color: #fff;
+    font-size: 9px;
+    font-weight: 700;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
   /* Dark mode */
   @media (prefers-color-scheme: dark) {
     .aa-form-container, .aa-pin-detail {
       background: #2d2d3f;
       color: #e0e0e0;
+      border-color: rgba(255, 255, 255, 0.1);
     }
 
     .aa-input, .aa-textarea {
@@ -393,57 +608,98 @@ var OVERLAY_STYLES = `
     .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";
+    .aa-panel {
+      background: #2d2d3f;
+      color: #e0e0e0;
+      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .aa-panel.aa-panel-left {
+      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
+    }
+
+    .aa-panel-filters {
+      background: #252538;
+      border-bottom-color: #404060;
+    }
+
+    .aa-panel-filters button {
+      color: #aaa;
+    }
+
+    .aa-panel-filters button:hover {
+      color: #e0e0e0;
+      background: #353550;
+    }
+
+    .aa-panel-bulk {
+      border-bottom-color: #404060;
+    }
+
+    .aa-panel-bulk-btn {
+      color: #2ecc71;
+      border-color: #2ecc71;
+      background: transparent;
+    }
+
+    .aa-panel-bulk-btn:hover {
+      background: #2ecc71;
+      color: #fff;
+    }
+
+    .aa-panel-item {
+      border-bottom-color: #404060;
+    }
+
+    .aa-panel-item:hover {
+      background: #353550;
+    }
+
+    .aa-panel-item-time {
+      color: #888;
+    }
+
+    .aa-panel-item-selector {
+      background: #1a1a2e;
+      color: #aaa;
+    }
+
+    .aa-panel-item-text {
+      color: #ddd;
+    }
+
+    .aa-panel-item-actions button {
+      border-color: #404060;
+      color: #ccc;
+      background: #2d2d3f;
+    }
+
+    .aa-panel-item-actions button:hover {
+      background: #404060;
+    }
+
+    .aa-panel-edit-textarea {
+      background: #1a1a2e;
+      color: #e0e0e0;
+      border-color: #e94560;
+    }
+
+    .aa-panel-empty {
+      color: #888;
+    }
+
+    .aa-panel-fab {
+      background: #2d2d3f;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    }
+
+    .aa-panel-fab:hover {
+      background: #404060;
     }
   }
-  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]+$/;
@@ -575,6 +831,11 @@ var Highlighter = class {
   }
 };
 
+// src/client/utils.ts
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
 // src/client/form.ts
 var AnnotationForm = class {
   constructor(shadowRoot, onSubmitted, onClosed, devMode) {
@@ -612,7 +873,7 @@ var AnnotationForm = class {
       <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 class="aa-form-header-selector">${escapeHtml(selector)}</div>
         </div>
         <button class="aa-form-close" data-action="close">&times;</button>
       </div>
@@ -681,9 +942,6 @@ var AnnotationForm = class {
   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();
   }
@@ -702,7 +960,9 @@ var PinManager = class {
   pins = [];
   detailPopup;
   onChanged;
-  render(annotations) {
+  panelSide = null;
+  render(annotations, panelSide = null) {
+    this.panelSide = panelSide;
     this.clearPins();
     annotations.forEach((annotation, index) => {
       const el = document.querySelector(annotation.selector);
@@ -713,8 +973,22 @@ var PinManager = class {
       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`;
+        const pinTop = Math.max(0, rect.top - 10);
+        let pinLeft;
+        if (this.panelSide === "right") {
+          pinLeft = Math.max(10, rect.left - 32);
+        } else {
+          pinLeft = Math.max(10, rect.right - 24);
+        }
+        const fabLeft = window.innerWidth - 48;
+        const fabTop = window.innerHeight - 104;
+        const fabRight = window.innerWidth - 16;
+        const fabBottom = window.innerHeight - 72;
+        if (pinTop + 28 > fabTop && pinTop < fabBottom && pinLeft + 28 > fabLeft && pinLeft < fabRight) {
+          pinLeft = fabLeft - 32;
+        }
+        pin.style.top = `${pinTop}px`;
+        pin.style.left = `${pinLeft}px`;
       };
       updatePosition();
       pin.addEventListener("click", (e) => {
@@ -746,15 +1020,15 @@ var PinManager = class {
     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-form-header-title">#${index + 1} \u2014 ${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-text">${escapeHtml(annotation.text)}</div>
         <div class="aa-pin-detail-info">
-          <div class="aa-pin-detail-selector">${this.escapeHtml(annotation.selector)}</div>
+          <div class="aa-pin-detail-selector">${escapeHtml(annotation.selector)}</div>
         </div>
       </div>
       <div class="aa-pin-detail-actions">
@@ -801,26 +1075,346 @@ var PinManager = class {
     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/panel.ts
+var AnnotationPanel = class {
+  constructor(shadowRoot, onChanged, onVisibilityChanged = () => {
+  }) {
+    this.shadowRoot = shadowRoot;
+    this.onChanged = onChanged;
+    this.onVisibilityChanged = onVisibilityChanged;
+    this.container = document.createElement("div");
+    this.container.className = "aa-panel";
+    this.container.style.display = "none";
+    this.container.addEventListener("click", this.onClick);
+    this.container.addEventListener("keydown", this.onKeyDown);
+    this.shadowRoot.appendChild(this.container);
+    this.fab = document.createElement("button");
+    this.fab.className = "aa-panel-fab";
+    this.fab.addEventListener("click", () => this.toggle());
+    this.shadowRoot.appendChild(this.fab);
+    this.renderFab();
+  }
+  container;
+  fab;
+  visible = false;
+  filter = "open";
+  side = "right";
+  editingId = null;
+  annotations = [];
+  indexMap = /* @__PURE__ */ new Map();
+  onChanged;
+  onVisibilityChanged;
+  show() {
+    this.visible = true;
+    this.container.style.display = "flex";
+    this.render();
+    this.onVisibilityChanged();
+  }
+  hide() {
+    this.visible = false;
+    this.editingId = null;
+    this.container.style.display = "none";
+    this.onVisibilityChanged();
+  }
+  toggle() {
+    if (this.visible) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  isVisible() {
+    return this.visible;
+  }
+  isEditing() {
+    return this.editingId !== null;
+  }
+  getSide() {
+    return this.side;
+  }
+  getState() {
+    return { visible: this.visible, filter: this.filter, side: this.side };
+  }
+  restoreState(state) {
+    this.filter = state.filter || "open";
+    this.side = state.side || "right";
+    if (state.visible) {
+      this.show();
+    }
+  }
+  update(annotations) {
+    this.annotations = annotations;
+    this.rebuildIndexMap();
+    this.renderFab();
+    if (this.visible) {
+      this.render();
+    }
+  }
+  destroy() {
+    this.container.removeEventListener("click", this.onClick);
+    this.container.removeEventListener("keydown", this.onKeyDown);
+    this.container.remove();
+    this.fab.remove();
+  }
+  // --- Private ---
+  rebuildIndexMap() {
+    this.indexMap.clear();
+    this.annotations.forEach((a, i) => {
+      this.indexMap.set(a.id, i + 1);
+    });
+  }
+  getFiltered() {
+    if (this.filter === "all") return this.annotations;
+    return this.annotations.filter((a) => a.status === this.filter);
+  }
+  countByStatus(status) {
+    return this.annotations.filter((a) => a.status === status).length;
+  }
+  render() {
+    const filtered = this.getFiltered();
+    const openCount = this.countByStatus("open");
+    const resolvedCount = this.countByStatus("resolved");
+    const totalCount = this.annotations.length;
+    this.container.className = `aa-panel${this.side === "left" ? " aa-panel-left" : ""}`;
+    const sideIcon = this.side === "right" ? '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="3" y1="3" x2="3" y2="13"/><polyline points="12,5 8,8 12,11"/></svg>' : '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="13" y1="3" x2="13" y2="13"/><polyline points="4,5 8,8 4,11"/></svg>';
+    this.container.innerHTML = `
+      <div class="aa-panel-header">
+        <span class="aa-panel-title">Annotations (${totalCount})</span>
+        <div class="aa-panel-header-actions">
+          <button data-action="toggle-side" title="Move panel">${sideIcon}</button>
+          <button data-action="close-panel" title="Close panel">&times;</button>
+        </div>
+      </div>
+      <div class="aa-panel-filters">
+        <button data-action="filter" data-filter="open" class="${this.filter === "open" ? "aa-active" : ""}">Open (${openCount})</button>
+        <button data-action="filter" data-filter="resolved" class="${this.filter === "resolved" ? "aa-active" : ""}">Resolved (${resolvedCount})</button>
+        <button data-action="filter" data-filter="all" class="${this.filter === "all" ? "aa-active" : ""}">All (${totalCount})</button>
+      </div>
+      ${this.filter === "open" && openCount > 0 ? `
+        <div class="aa-panel-bulk">
+          <button class="aa-panel-bulk-btn" data-action="bulk-resolve">Mark all as done</button>
+        </div>
+      ` : ""}
+      <div class="aa-panel-list">
+        ${filtered.length > 0 ? filtered.map((a) => this.renderItem(a)).join("") : '<div class="aa-panel-empty">No annotations match this filter.</div>'}
+      </div>
+    `;
+    if (this.editingId) {
+      const textarea = this.container.querySelector(".aa-panel-edit-textarea");
+      if (textarea) {
+        setTimeout(() => {
+          textarea.focus();
+          textarea.style.height = "auto";
+          textarea.style.height = Math.min(textarea.scrollHeight, window.innerHeight * 0.4) + "px";
+        }, 30);
+      }
+    }
+  }
+  renderItem(annotation) {
+    const num = this.indexMap.get(annotation.id) ?? 0;
+    const isResolved = annotation.status === "resolved";
+    const isEditing = this.editingId === annotation.id;
+    const numberClass = isResolved ? "aa-panel-item-number aa-panel-item-number-resolved" : "aa-panel-item-number";
+    const textBlock = isEditing ? `<textarea class="aa-panel-edit-textarea" data-id="${annotation.id}">${escapeHtml(annotation.text)}</textarea>
+         <div class="aa-panel-item-actions">
+           <button data-action="save-edit" data-id="${annotation.id}">Save</button>
+           <button data-action="cancel-edit" data-id="${annotation.id}">Cancel</button>
+         </div>` : `<div class="aa-panel-item-text">${escapeHtml(annotation.text)}</div>
+         <div class="aa-panel-item-actions">
+           <button data-action="locate" data-id="${annotation.id}" data-selector="${escapeHtml(annotation.selector)}">Locate</button>
+           <button data-action="edit-inline" data-id="${annotation.id}">Edit</button>
+           ${isResolved ? `<button data-action="reopen" data-id="${annotation.id}">Reopen</button>` : `<button data-action="resolve" data-id="${annotation.id}">Done</button>`}
+         </div>`;
+    return `
+      <div class="aa-panel-item${isResolved ? " aa-panel-item-resolved" : ""}" data-id="${annotation.id}">
+        <div class="aa-panel-item-header">
+          <span class="${numberClass}">#${num}</span>
+          <span class="aa-panel-item-author">${escapeHtml(annotation.author)}</span>
+          <span class="aa-panel-item-time">${this.formatTimeAgo(annotation.timestamp)}</span>
+        </div>
+        <div class="aa-panel-item-selector">${escapeHtml(annotation.selector)}</div>
+        ${textBlock}
+      </div>
+    `;
+  }
+  renderFab() {
+    const openCount = this.countByStatus("open");
+    const badge = openCount > 0 ? `<span class="aa-panel-fab-badge">${openCount}</span>` : "";
+    this.fab.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+        <line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="10" y2="12"/>
+      </svg>
+      ${badge}
+    `;
+  }
+  // --- Event delegation ---
+  onClick = (e) => {
+    const target = e.target;
+    const actionEl = target.closest("[data-action]");
+    if (!actionEl) return;
+    const action = actionEl.dataset.action;
+    const id = actionEl.dataset.id;
+    switch (action) {
+      case "close-panel":
+        this.hide();
+        break;
+      case "toggle-side":
+        this.side = this.side === "right" ? "left" : "right";
+        this.render();
+        this.onVisibilityChanged();
+        break;
+      case "filter":
+        this.filter = actionEl.dataset.filter || "all";
+        this.editingId = null;
+        this.render();
+        break;
+      case "bulk-resolve":
+        this.bulkResolve(actionEl);
+        break;
+      case "locate":
+        if (actionEl.dataset.selector) this.locateElement(actionEl.dataset.selector);
+        break;
+      case "edit-inline":
+        if (id) {
+          this.editingId = id;
+          this.render();
+        }
+        break;
+      case "cancel-edit":
+        this.editingId = null;
+        this.render();
+        break;
+      case "save-edit":
+        if (id) this.saveEdit(id);
+        break;
+      case "resolve":
+        if (id) this.updateStatus(id, "resolved");
+        break;
+      case "reopen":
+        if (id) this.updateStatus(id, "open");
+        break;
+    }
+  };
+  onKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && this.editingId) {
+      e.preventDefault();
+      this.saveEdit(this.editingId);
+    }
+  };
+  // --- Actions ---
+  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.onChanged();
+    } catch (err) {
+      console.error("[astro-annotate] Failed to update annotation:", err);
+    }
+  }
+  async saveEdit(id) {
+    const textarea = this.container.querySelector(`.aa-panel-edit-textarea[data-id="${id}"]`);
+    if (!textarea) return;
+    const text = textarea.value.trim();
+    if (!text) return;
+    try {
+      const res = await fetch(`${API_ANNOTATIONS}/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text })
+      });
+      if (!res.ok) throw new Error("Failed to update");
+      this.editingId = null;
+      this.onChanged();
+    } catch (err) {
+      console.error("[astro-annotate] Failed to update annotation text:", err);
+    }
+  }
+  async bulkResolve(btn) {
+    const openAnnotations = this.annotations.filter((a) => a.status === "open");
+    const total = openAnnotations.length;
+    if (total === 0) return;
+    btn.setAttribute("disabled", "");
+    for (let i = 0; i < openAnnotations.length; i++) {
+      btn.textContent = `Resolving ${i + 1}/${total}...`;
+      try {
+        const res = await fetch(`${API_ANNOTATIONS}/${openAnnotations[i].id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ status: "resolved" })
+        });
+        if (!res.ok) throw new Error("Failed to update");
+      } catch (err) {
+        console.error("[astro-annotate] Failed to resolve annotation:", err);
+      }
+    }
+    this.onChanged();
+  }
+  locateElement(selector) {
+    const el = document.querySelector(selector);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "instant", block: "center" });
+    const flash = document.createElement("div");
+    const rect = el.getBoundingClientRect();
+    Object.assign(flash.style, {
+      position: "fixed",
+      top: `${rect.top}px`,
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      border: "2px solid #e94560",
+      background: "rgba(233, 69, 96, 0.12)",
+      borderRadius: "3px",
+      pointerEvents: "none",
+      zIndex: "2147483646",
+      transition: "opacity 0.6s ease"
+    });
+    this.shadowRoot.appendChild(flash);
+    setTimeout(() => {
+      flash.style.opacity = "0";
+    }, 700);
+    setTimeout(() => {
+      flash.remove();
+    }, 1300);
+  }
+  // --- Helpers ---
+  formatTimeAgo(timestamp) {
+    const now = Date.now();
+    const then = new Date(timestamp).getTime();
+    if (isNaN(then)) return "unknown";
+    const diffSec = Math.floor((now - then) / 1e3);
+    if (diffSec < 60) return "just now";
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay < 30) return `${diffDay}d ago`;
+    return new Date(timestamp).toLocaleDateString();
+  }
+};
+
 // src/client/overlay.ts
 var Overlay = class {
   host;
   shadowRoot;
-  toolbar;
   highlighter;
   form;
   pinManager;
+  panel;
   active = false;
   devMode = !!window.__ASTRO_ANNOTATE_DEV__;
   annotations = [];
+  lastOpenedUI = null;
   constructor() {
     this.host = document.createElement("div");
     this.host.id = SHADOW_ROOT_ID;
@@ -829,7 +1423,6 @@ var Overlay = class {
     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,
@@ -838,6 +1431,12 @@ var Overlay = class {
       this.devMode
     );
     this.pinManager = new PinManager(this.shadowRoot, () => this.loadAnnotations());
+    this.panel = new AnnotationPanel(
+      this.shadowRoot,
+      () => this.loadAnnotations(),
+      () => this.renderPins()
+    );
+    window.addEventListener("aa:toggle", this.onToolbarToggle);
     this.loadAnnotations();
     document.addEventListener("click", (e) => {
       const target = e.target;
@@ -869,6 +1468,9 @@ var Overlay = class {
       this.form.hide();
     }
   }
+  onToolbarToggle = ((e) => {
+    this.setActive(e.detail.active);
+  });
   onElementClick = (e) => {
     const target = e.target;
     if (this.host.contains(target) || this.host === target) return;
@@ -878,23 +1480,47 @@ var Overlay = class {
     this.highlighter.hide();
     document.removeEventListener("mousemove", this.highlighter.onMouseMove);
     this.form.show(target);
+    this.lastOpenedUI = "form";
   };
   onKeyDown = (e) => {
     const active = document.activeElement;
     const isExternalInput = active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable) && active !== this.host && !this.host.contains(active);
     if (e.altKey && e.code === "KeyC" && !isExternalInput) {
       e.preventDefault();
-      this.toolbar.toggle();
+      const newActive = !this.active;
+      this.setActive(newActive);
+      window.dispatchEvent(new CustomEvent("aa:state-changed", { detail: { active: newActive } }));
+      return;
+    }
+    if (e.altKey && e.code === "KeyL" && !isExternalInput) {
+      if (this.panel.isEditing()) return;
+      e.preventDefault();
+      this.panel.toggle();
+      this.lastOpenedUI = this.panel.isVisible() ? "panel" : null;
       return;
     }
     if (e.key === "Escape") {
+      if (this.lastOpenedUI === "form" && this.form.isVisible()) {
+        this.form.hide();
+        this.lastOpenedUI = this.panel.isVisible() ? "panel" : null;
+        return;
+      }
+      if (this.lastOpenedUI === "panel" && this.panel.isVisible()) {
+        this.panel.hide();
+        this.lastOpenedUI = this.form.isVisible() ? "form" : null;
+        return;
+      }
+      if (this.panel.isVisible()) {
+        this.panel.hide();
+        return;
+      }
       if (this.form.isVisible()) {
         this.form.hide();
         return;
       }
       if (this.active) {
-        this.toolbar.deactivate();
         this.setActive(false);
+        window.dispatchEvent(new CustomEvent("aa:state-changed", { detail: { active: false } }));
         return;
       }
     }
@@ -906,13 +1532,16 @@ var Overlay = class {
       if (!res.ok) return;
       const data = await res.json();
       this.annotations = data.annotations || [];
-      this.toolbar.updateCount(this.annotations.filter((a) => a.status === "open").length);
+      const openCount = this.annotations.filter((a) => a.status === "open").length;
+      window.dispatchEvent(new CustomEvent("aa:count", { detail: { count: openCount } }));
       this.renderPins();
+      this.panel.update(this.annotations);
     } catch {
     }
   }
   renderPins() {
-    this.pinManager.render(this.annotations);
+    const panelSide = this.panel.isVisible() ? this.panel.getSide() : null;
+    this.pinManager.render(this.annotations, panelSide);
   }
   onAnnotationCreated() {
     this.loadAnnotations();
@@ -922,26 +1551,53 @@ var Overlay = class {
       document.addEventListener("mousemove", this.highlighter.onMouseMove);
     }
   }
+  getPanelState() {
+    return this.panel.getState();
+  }
+  restorePanelState(state) {
+    this.panel.restoreState(state);
+  }
   destroy() {
     document.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("aa:toggle", this.onToolbarToggle);
+    if (this.active) {
+      window.dispatchEvent(new CustomEvent("aa:state-changed", { detail: { active: false } }));
+    }
     this.setActive(false);
-    this.toolbar.destroy();
     this.highlighter.destroy();
     this.form.destroy();
     this.pinManager.destroy();
+    this.panel.destroy();
     this.host.remove();
   }
 };
 
 // src/client/index.ts
 var overlay = null;
+var PANEL_STATE_KEY = "aa-panel-state";
+function savePanelState(state) {
+  sessionStorage.setItem(PANEL_STATE_KEY, JSON.stringify(state));
+}
 function init() {
   if (overlay) {
+    savePanelState(overlay.getPanelState());
     overlay.destroy();
     overlay = null;
   }
   overlay = new Overlay();
+  const saved = sessionStorage.getItem(PANEL_STATE_KEY);
+  if (saved) {
+    try {
+      overlay.restorePanelState(JSON.parse(saved));
+    } catch {
+    }
+  }
 }
+window.addEventListener("beforeunload", () => {
+  if (overlay) {
+    savePanelState(overlay.getPanelState());
+  }
+});
 document.addEventListener("astro:page-load", init);
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", () => {