web-remarq 0.6.0 → 0.7.2

package/dist/{web-remarq.global.global.js → web-remarq.global.js}

@@ -1,10 +1,8 @@
 "use strict";
-var WebRemarq = (() => {
+(() => {
   var __defProp = Object.defineProperty;
   var __defProps = Object.defineProperties;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -33,26 +31,6 @@ var WebRemarq = (() => {
       }
     return target;
   };
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
-  };
-  var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames(from))
-        if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-    }
-    return to;
-  };
-  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-  // src/index.ts
-  var src_exports = {};
-  __export(src_exports, {
-    LocalStorageAdapter: () => LocalStorageAdapter,
-    WebRemarq: () => WebRemarq
-  });
 
   // src/core/viewport.ts
   var currentBucket = 0;
@@ -89,6 +67,21 @@ var WebRemarq = (() => {
   }
 
   // src/core/storage.ts
+  function migrateAnnotation(legacy) {
+    const rawStatus = legacy.status;
+    const status = rawStatus === "resolved" ? "verified" : rawStatus;
+    if (Array.isArray(legacy.lifecycle) && legacy.lifecycle.length > 0) {
+      return __spreadProps(__spreadValues({}, legacy), { status, lifecycle: legacy.lifecycle });
+    }
+    const createdTs = typeof legacy.timestamp === "number" ? legacy.timestamp : Date.now();
+    const lifecycle = [
+      { type: "created", actor: "designer", timestamp: createdTs }
+    ];
+    if (rawStatus === "resolved") {
+      lifecycle.push({ type: "migrated", actor: null, timestamp: Date.now() });
+    }
+    return __spreadProps(__spreadValues({}, legacy), { status, lifecycle });
+  }
   var AnnotationStorage = class {
     constructor(adapter) {
       this.adapter = adapter;
@@ -105,6 +98,9 @@ var WebRemarq = (() => {
     getByRoute(route) {
       return this.cache.filter((a) => a.route === route);
     }
+    getById(id) {
+      return this.cache.find((a) => a.id === id);
+    }
     async add(annotation) {
       this.cache.push(annotation);
       await this.adapter.save(annotation);
@@ -131,7 +127,7 @@ var WebRemarq = (() => {
       };
     }
     async importJSON(data) {
-      this.cache = [...data.annotations];
+      this.cache = data.annotations.map(migrateAnnotation);
       this.migrateViewportBuckets();
       await this.adapter.clear();
       for (const ann of this.cache) {
@@ -141,7 +137,7 @@ var WebRemarq = (() => {
     async init() {
       const data = await this.adapter.load();
       if (data) {
-        this.cache = data.annotations;
+        this.cache = data.annotations.map(migrateAnnotation);
         this.migrateViewportBuckets();
       }
     }
@@ -611,7 +607,16 @@ var WebRemarq = (() => {
       status: ann.status,
       timestamp: ann.timestamp,
       source: resolveSource(ann.fingerprint),
-      searchHints: buildSearchHints(ann.fingerprint)
+      searchHints: buildSearchHints(ann.fingerprint),
+      lifecycle: ann.lifecycle.map((ev) => {
+        const out = {
+          type: ev.type,
+          actor: ev.actor,
+          timestamp: ev.timestamp
+        };
+        if (ev.reason !== void 0) out.reason = ev.reason;
+        return out;
+      })
     }));
     return {
       version: 1,
@@ -621,6 +626,67 @@ var WebRemarq = (() => {
     };
   }
 
+  // src/core/lifecycle.ts
+  var InvalidTransitionError = class extends Error {
+    constructor(from, action) {
+      super(`Cannot ${action} from status "${from}"`);
+      this.name = "InvalidTransitionError";
+    }
+  };
+  var ACTION_TO_EVENT = {
+    acknowledge: "acknowledged",
+    claimFix: "fix_claimed",
+    verify: "verified",
+    reject: "rejected",
+    dismiss: "dismissed",
+    reopen: "reopened"
+  };
+  var DEFAULT_ACTOR_BY_EVENT = {
+    created: "designer",
+    acknowledged: "developer",
+    fix_claimed: "agent",
+    verified: "developer",
+    rejected: "developer",
+    dismissed: "developer",
+    reopened: "developer",
+    migrated: null
+  };
+  function createEvent(type, opts = {}) {
+    var _a3, _b;
+    const event = {
+      type,
+      actor: (_a3 = opts.actor) != null ? _a3 : DEFAULT_ACTOR_BY_EVENT[type],
+      timestamp: (_b = opts.timestamp) != null ? _b : Date.now()
+    };
+    if (opts.actorName !== void 0) event.actorName = opts.actorName;
+    if (opts.reason !== void 0) event.reason = opts.reason;
+    return event;
+  }
+  function nextStatus(from, action) {
+    switch (action) {
+      case "acknowledge":
+        return from === "pending" ? "in_progress" : null;
+      case "claimFix":
+        return from === "pending" || from === "in_progress" ? "fixed_unverified" : null;
+      case "verify":
+        return from === "fixed_unverified" || from === "in_progress" ? "verified" : null;
+      case "reject":
+        return from === "fixed_unverified" ? "pending" : null;
+      case "dismiss":
+        return from === "pending" || from === "in_progress" || from === "fixed_unverified" ? "dismissed" : null;
+      case "reopen":
+        return from === "dismissed" || from === "verified" ? "pending" : null;
+    }
+  }
+  function transition(annotation, action, opts = {}) {
+    const next = nextStatus(annotation.status, action);
+    if (next === null) {
+      throw new InvalidTransitionError(annotation.status, action);
+    }
+    const event = createEvent(ACTION_TO_EVENT[action], opts);
+    return { status: next, event };
+  }
+
   // src/ui/styles.ts
   var STYLES_ID = "data-remarq-styles";
   var CSS = `
@@ -635,6 +701,11 @@ var WebRemarq = (() => {
   --remarq-resolved: #22c55e;
   --remarq-overlay: rgba(59, 130, 246, 0.15);
   --remarq-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  --remarq-status-pending: #f97316;
+  --remarq-status-in-progress: #eab308;
+  --remarq-status-fixed-unverified: #3b82f6;
+  --remarq-status-verified: #22c55e;
+  --remarq-status-dismissed: #6b7280;
 }
 
 [data-remarq-theme="dark"] {
@@ -648,6 +719,11 @@ var WebRemarq = (() => {
   --remarq-resolved: #4ade80;
   --remarq-overlay: rgba(96, 165, 250, 0.15);
   --remarq-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  --remarq-status-pending: #fb923c;
+  --remarq-status-in-progress: #facc15;
+  --remarq-status-fixed-unverified: #60a5fa;
+  --remarq-status-verified: #4ade80;
+  --remarq-status-dismissed: #9ca3af;
 }
 
 .remarq-toolbar {
@@ -691,19 +767,29 @@ var WebRemarq = (() => {
 
 .remarq-badge {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 50%;
   background: var(--remarq-pending);
   color: #ffffff;
   font-size: 10px;
   font-weight: 600;
+  line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+}
+
+.remarq-toolbar-badge--verification {
+  top: auto;
+  bottom: -6px;
+  right: -6px;
+  background: var(--remarq-status-fixed-unverified);
+  cursor: pointer;
 }
 
 .remarq-overlay {
@@ -753,8 +839,11 @@ var WebRemarq = (() => {
 }
 
 .remarq-marker:hover { transform: scale(1.2); }
-.remarq-marker[data-status="pending"] { background: var(--remarq-pending); }
-.remarq-marker[data-status="resolved"] { background: var(--remarq-resolved); opacity: 0.7; }
+.remarq-marker--pending { background: var(--remarq-status-pending); }
+.remarq-marker--in-progress { background: var(--remarq-status-in-progress); }
+.remarq-marker--fixed-unverified { background: var(--remarq-status-fixed-unverified); }
+.remarq-marker--verified { background: var(--remarq-status-verified); opacity: 0.7; }
+.remarq-marker--dismissed { background: var(--remarq-status-dismissed); opacity: 0.5; }
 
 .remarq-popup {
   position: absolute;
@@ -799,14 +888,30 @@ var WebRemarq = (() => {
 
 .remarq-popup-actions {
   display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  flex-direction: column;
+  gap: 6px;
   padding: 8px 12px;
   border-top: 1px solid var(--remarq-border);
 }
 
+.remarq-popup-actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.remarq-popup-actions-row--transitions {
+  justify-content: flex-start;
+}
+
+.remarq-popup-actions-row--utility {
+  justify-content: flex-end;
+  padding-top: 6px;
+  border-top: 1px dashed var(--remarq-border);
+}
+
 .remarq-popup-actions button {
-  padding: 4px 12px;
+  padding: 5px 12px;
   border: 1px solid var(--remarq-border);
   border-radius: 4px;
   background: var(--remarq-bg);
@@ -821,6 +926,19 @@ var WebRemarq = (() => {
   color: #ffffff;
 }
 
+.remarq-popup-utility-btn {
+  font-size: 11px !important;
+  padding: 3px 10px !important;
+  color: var(--remarq-text-secondary) !important;
+  background: transparent !important;
+  border-color: transparent !important;
+}
+
+.remarq-popup-utility-btn:hover {
+  background: var(--remarq-bg-secondary) !important;
+  color: var(--remarq-text) !important;
+}
+
 .remarq-detached-panel {
   position: fixed;
   z-index: 2147483646;
@@ -1079,6 +1197,51 @@ var WebRemarq = (() => {
   color: var(--remarq-text-secondary);
   margin-top: 4px;
 }
+
+.remarq-popup-history {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--remarq-text-secondary);
+}
+
+.remarq-popup-history summary {
+  cursor: pointer;
+  padding: 4px 0;
+  user-select: none;
+}
+
+.remarq-popup-history-list {
+  list-style: none;
+  margin: 4px 0 0 0;
+  padding: 0;
+}
+
+.remarq-popup-history-list li {
+  padding: 2px 0;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.remarq-popup-reason {
+  width: 100%;
+  min-height: 50px;
+  margin-bottom: 8px;
+  padding: 6px;
+  border: 1px solid var(--remarq-border);
+  border-radius: 4px;
+  background: var(--remarq-bg-secondary);
+  color: var(--remarq-text);
+  font-family: inherit;
+  font-size: 12px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.remarq-popup-reason-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
 `;
   function injectStyles() {
     if (document.querySelector(`style[${STYLES_ID}]`)) return;
@@ -1186,8 +1349,19 @@ var WebRemarq = (() => {
       this.inspectBtn = this.createButton("inspect", ICONS.inspect, () => callbacks.onInspect());
       this.badgeEl = document.createElement("span");
       this.badgeEl.className = "remarq-badge";
+      this.badgeEl.title = "Needs attention";
       this.badgeEl.style.display = "none";
       this.inspectBtn.appendChild(this.badgeEl);
+      this.verificationBadgeEl = document.createElement("span");
+      this.verificationBadgeEl.className = "remarq-badge remarq-toolbar-badge--verification";
+      this.verificationBadgeEl.title = "Pending your verification";
+      this.verificationBadgeEl.style.display = "none";
+      this.verificationBadgeEl.addEventListener("click", (e) => {
+        var _a3;
+        e.stopPropagation();
+        (_a3 = callbacks.onVerificationBadgeClick) == null ? void 0 : _a3.call(callbacks);
+      });
+      this.inspectBtn.appendChild(this.verificationBadgeEl);
       this.spacingBtn = this.createButton("spacing", ICONS.spacing, () => callbacks.onSpacingToggle());
       this.spacingBtn.disabled = true;
       const copyBtn = this.createButton("copy", ICONS.copy, () => callbacks.onCopy());
@@ -1234,6 +1408,10 @@ var WebRemarq = (() => {
       this.badgeEl.textContent = String(count);
       this.badgeEl.style.display = count > 0 ? "flex" : "none";
     }
+    setVerificationBadgeCount(count) {
+      this.verificationBadgeEl.textContent = String(count);
+      this.verificationBadgeEl.style.display = count > 0 ? "flex" : "none";
+    }
     getFileInput() {
       return this.fileInput;
     }
@@ -1717,6 +1895,47 @@ var WebRemarq = (() => {
   };
 
   // src/ui/popup.ts
+  var STATUS_LABEL = {
+    pending: "Pending",
+    in_progress: "In progress",
+    fixed_unverified: "Fix claimed",
+    verified: "Verified",
+    dismissed: "Dismissed"
+  };
+  var EVENT_LABEL = {
+    created: "Created",
+    acknowledged: "In progress",
+    fix_claimed: "Fix claimed",
+    verified: "Verified",
+    rejected: "Rejected",
+    dismissed: "Dismissed",
+    reopened: "Reopened",
+    migrated: "Migrated"
+  };
+  function actionsForStatus(status) {
+    switch (status) {
+      case "pending":
+        return [
+          { label: "Acknowledge", action: "acknowledge", primary: true },
+          { label: "Dismiss", action: "dismiss", needsReason: true }
+        ];
+      case "in_progress":
+        return [
+          { label: "Mark verified", action: "verify", primary: true },
+          { label: "Dismiss", action: "dismiss", needsReason: true }
+        ];
+      case "fixed_unverified":
+        return [
+          { label: "Verify", action: "verify", primary: true },
+          { label: "Reject", action: "reject", needsReason: true },
+          { label: "Dismiss", action: "dismiss", needsReason: true }
+        ];
+      case "verified":
+        return [{ label: "Reopen", action: "reopen" }];
+      case "dismissed":
+        return [{ label: "Reopen", action: "reopen" }];
+    }
+  }
   var POPUP_WIDTH = 300;
   var POPUP_MARGIN = 8;
   var Popup = class {
@@ -1725,6 +1944,7 @@ var WebRemarq = (() => {
       this.popupEl = null;
       this.keyHandler = null;
       this.outsideClickHandler = null;
+      this.pendingEditFlush = null;
     }
     show(info, position, onSubmit, onCancel) {
       this.hide();
@@ -1809,7 +2029,7 @@ var WebRemarq = (() => {
       popup2.className = "remarq-popup";
       const header = document.createElement("div");
       header.className = "remarq-popup-header";
-      header.textContent = `<${info.tag}>${info.text ? ` "${info.text}"` : ""} [${info.status}]`;
+      header.textContent = `<${info.tag}>${info.text ? ` "${info.text}"` : ""} [${STATUS_LABEL[info.status]}]`;
       const body = document.createElement("div");
       body.className = "remarq-popup-body";
       const makeCommentEl = () => {
@@ -1821,38 +2041,10 @@ var WebRemarq = (() => {
         return el;
       };
       body.appendChild(makeCommentEl());
+      body.appendChild(this.buildLifecycleViewer(info.lifecycle));
       const actions = document.createElement("div");
       actions.className = "remarq-popup-actions";
-      if (info.status === "pending") {
-        const resolveBtn = document.createElement("button");
-        resolveBtn.className = "remarq-primary";
-        resolveBtn.textContent = "Resolve";
-        resolveBtn.addEventListener("click", () => {
-          this.hide();
-          callbacks.onResolve();
-        });
-        actions.appendChild(resolveBtn);
-      }
-      const copyBtn = document.createElement("button");
-      copyBtn.textContent = "Copy";
-      copyBtn.addEventListener("click", () => {
-        callbacks.onCopy();
-      });
-      actions.appendChild(copyBtn);
-      const deleteBtn = document.createElement("button");
-      deleteBtn.textContent = "Delete";
-      deleteBtn.addEventListener("click", () => {
-        this.hide();
-        callbacks.onDelete();
-      });
-      actions.appendChild(deleteBtn);
-      const closeBtn = document.createElement("button");
-      closeBtn.textContent = "Close";
-      closeBtn.addEventListener("click", () => {
-        this.hide();
-        callbacks.onClose();
-      });
-      actions.appendChild(closeBtn);
+      this.renderActionButtons(actions, info, callbacks);
       popup2.appendChild(header);
       popup2.appendChild(body);
       popup2.appendChild(actions);
@@ -1879,7 +2071,103 @@ var WebRemarq = (() => {
         document.addEventListener("mousedown", this.outsideClickHandler);
       }, 0);
     }
+    buildLifecycleViewer(lifecycle) {
+      var _a3, _b;
+      const details = document.createElement("details");
+      details.className = "remarq-popup-history";
+      const summary = document.createElement("summary");
+      summary.textContent = `History (${lifecycle.length})`;
+      details.appendChild(summary);
+      const list = document.createElement("ul");
+      list.className = "remarq-popup-history-list";
+      for (const ev of lifecycle) {
+        const li = document.createElement("li");
+        const when = new Date(ev.timestamp).toLocaleString();
+        const who = (_a3 = ev.actor) != null ? _a3 : "system";
+        const what = (_b = EVENT_LABEL[ev.type]) != null ? _b : ev.type;
+        let text = `${when} \xB7 ${who} \xB7 ${what}`;
+        if (ev.reason) text += ` \u2014 ${ev.reason}`;
+        li.textContent = text;
+        list.appendChild(li);
+      }
+      details.appendChild(list);
+      return details;
+    }
+    renderActionButtons(container, info, callbacks) {
+      container.replaceChildren();
+      const transitions = document.createElement("div");
+      transitions.className = "remarq-popup-actions-row remarq-popup-actions-row--transitions";
+      for (const def of actionsForStatus(info.status)) {
+        const btn = document.createElement("button");
+        btn.textContent = def.label;
+        if (def.primary) btn.className = "remarq-primary";
+        btn.addEventListener("click", () => {
+          if (def.needsReason) {
+            this.showReasonInput(container, info, callbacks, def);
+          } else {
+            this.hide();
+            callbacks.onTransition(def.action);
+          }
+        });
+        transitions.appendChild(btn);
+      }
+      container.appendChild(transitions);
+      const utility = document.createElement("div");
+      utility.className = "remarq-popup-actions-row remarq-popup-actions-row--utility";
+      const copyBtn = document.createElement("button");
+      copyBtn.className = "remarq-popup-utility-btn";
+      copyBtn.textContent = "Copy";
+      copyBtn.addEventListener("click", () => callbacks.onCopy());
+      utility.appendChild(copyBtn);
+      const deleteBtn = document.createElement("button");
+      deleteBtn.className = "remarq-popup-utility-btn";
+      deleteBtn.textContent = "Delete";
+      deleteBtn.addEventListener("click", () => {
+        this.hide();
+        callbacks.onDelete();
+      });
+      utility.appendChild(deleteBtn);
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "remarq-popup-utility-btn";
+      closeBtn.textContent = "Close";
+      closeBtn.addEventListener("click", () => {
+        this.hide();
+        callbacks.onClose();
+      });
+      utility.appendChild(closeBtn);
+      container.appendChild(utility);
+    }
+    showReasonInput(container, info, callbacks, def) {
+      container.replaceChildren();
+      const textarea = document.createElement("textarea");
+      textarea.placeholder = `Reason for ${def.label.toLowerCase()} (optional)\u2026`;
+      textarea.className = "remarq-popup-reason";
+      container.appendChild(textarea);
+      const row = document.createElement("div");
+      row.className = "remarq-popup-reason-row";
+      const cancel = document.createElement("button");
+      cancel.textContent = "Cancel";
+      cancel.addEventListener("click", () => {
+        this.renderActionButtons(container, info, callbacks);
+      });
+      const submit = document.createElement("button");
+      submit.className = "remarq-primary";
+      submit.textContent = "Submit";
+      submit.addEventListener("click", () => {
+        const reason = textarea.value.trim() || void 0;
+        this.hide();
+        callbacks.onTransition(def.action, reason);
+      });
+      row.appendChild(cancel);
+      row.appendChild(submit);
+      container.appendChild(row);
+      textarea.focus();
+    }
     hide() {
+      if (this.pendingEditFlush) {
+        this.pendingEditFlush();
+        this.pendingEditFlush = null;
+      }
       if (this.popupEl) {
         this.popupEl.remove();
         this.popupEl = null;
@@ -1914,12 +2202,8 @@ var WebRemarq = (() => {
       commentEl.replaceWith(textarea);
       textarea.focus();
       textarea.selectionStart = textarea.value.length;
-      const saveEdit = () => {
-        const newComment = textarea.value.trim();
-        if (newComment && newComment !== info.comment) {
-          info.comment = newComment;
-          callbacks.onEdit(newComment);
-        }
+      const restoreView = () => {
+        if (!textarea.isConnected) return;
         const restored = document.createElement("div");
         restored.textContent = info.comment;
         restored.style.cursor = "pointer";
@@ -1927,26 +2211,33 @@ var WebRemarq = (() => {
         restored.addEventListener("click", () => this.enterEditMode(restored, info, callbacks));
         textarea.replaceWith(restored);
       };
+      const commitEdit = () => {
+        this.pendingEditFlush = null;
+        const newComment = textarea.value.trim();
+        if (newComment && newComment !== info.comment) {
+          info.comment = newComment;
+          callbacks.onEdit(newComment);
+        }
+        restoreView();
+      };
+      const cancelEdit = () => {
+        this.pendingEditFlush = null;
+        restoreView();
+      };
+      this.pendingEditFlush = commitEdit;
       textarea.addEventListener("keydown", (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
-          saveEdit();
+          commitEdit();
         }
         if (e.key === "Escape") {
           e.stopPropagation();
-          const restored = document.createElement("div");
-          restored.textContent = info.comment;
-          restored.style.cursor = "pointer";
-          restored.title = "Click to edit";
-          restored.addEventListener("click", () => this.enterEditMode(restored, info, callbacks));
-          textarea.replaceWith(restored);
+          cancelEdit();
         }
       });
       textarea.addEventListener("blur", () => {
         setTimeout(() => {
-          if (textarea.isConnected) {
-            saveEdit();
-          }
+          if (textarea.isConnected) commitEdit();
         }, 50);
       });
     }
@@ -1974,6 +2265,16 @@ var WebRemarq = (() => {
   };
 
   // src/ui/markers.ts
+  var STATUS_COLOR = {
+    pending: "var(--remarq-status-pending)",
+    in_progress: "var(--remarq-status-in-progress)",
+    fixed_unverified: "var(--remarq-status-fixed-unverified)",
+    verified: "var(--remarq-status-verified)",
+    dismissed: "var(--remarq-status-dismissed)"
+  };
+  function statusClass(status) {
+    return `remarq-marker--${status.replace("_", "-")}`;
+  }
   var MarkerManager = class {
     constructor(container, onClick) {
       this.container = container;
@@ -1986,7 +2287,7 @@ var WebRemarq = (() => {
     addMarker(annotation, target) {
       this.counter++;
       const markerEl = document.createElement("div");
-      markerEl.className = "remarq-marker";
+      markerEl.className = `remarq-marker ${statusClass(annotation.status)}`;
       markerEl.setAttribute("data-status", annotation.status);
       markerEl.setAttribute("data-annotation-id", annotation.id);
       markerEl.textContent = String(this.counter);
@@ -2012,7 +2313,17 @@ var WebRemarq = (() => {
       const entry = this.markers.get(id);
       if (entry) {
         entry.annotation.status = status;
+        entry.markerEl.className = `remarq-marker ${statusClass(status)}`;
         entry.markerEl.setAttribute("data-status", status);
+        this.applyOutline(entry.target, status);
+      }
+    }
+    scrollToMarker(id) {
+      const entry = this.markers.get(id);
+      if (!entry) return;
+      try {
+        entry.target.scrollIntoView({ behavior: "smooth", block: "center" });
+      } catch (e) {
       }
     }
     clear() {
@@ -2031,7 +2342,7 @@ var WebRemarq = (() => {
       this.clear();
     }
     applyOutline(target, status) {
-      const color = status === "pending" ? "#f97316" : "rgba(34, 197, 94, 0.5)";
+      const color = STATUS_COLOR[status];
       target.style.outline = `2px solid ${color}`;
       target.style.outlineOffset = "2px";
     }
@@ -2378,8 +2689,18 @@ var WebRemarq = (() => {
       markers.addMarker(ann, el);
     }
     detachedPanel.update(otherBreakpoint, detached);
-    const pendingCount = anns.filter((a) => a.status === "pending").length;
-    toolbar.setBadgeCount(pendingCount);
+    const needsAttention = anns.filter(
+      (a) => a.status === "pending" || a.status === "in_progress"
+    ).length;
+    const needsVerification = anns.filter((a) => a.status === "fixed_unverified").length;
+    toolbar.setBadgeCount(needsAttention);
+    toolbar.setVerificationBadgeCount(needsVerification);
+  }
+  function jumpToFirstUnverified() {
+    if (!storage || !markers) return;
+    const ann = storage.getByRoute(currentRoute()).find((a) => a.status === "fixed_unverified");
+    if (!ann) return;
+    markers.scrollToMarker(ann.id);
   }
   function scheduleRefresh() {
     if (refreshScheduled) return;
@@ -2412,6 +2733,7 @@ var WebRemarq = (() => {
           classFilter: options.classFilter,
           dataAttribute: options.dataAttribute
         });
+        const now = Date.now();
         const ann = {
           id: generateId(),
           comment,
@@ -2419,8 +2741,9 @@ var WebRemarq = (() => {
           route: currentRoute(),
           viewport: `${window.innerWidth}x${window.innerHeight}`,
           viewportBucket: toBucket(window.innerWidth),
-          timestamp: Date.now(),
-          status: "pending"
+          timestamp: now,
+          status: "pending",
+          lifecycle: [{ type: "created", actor: "designer", timestamp: now }]
         };
         cacheElement(ann.id, target);
         storage.add(ann);
@@ -2512,7 +2835,8 @@ var WebRemarq = (() => {
         tag: ann.fingerprint.tagName,
         text: (_a3 = ann.fingerprint.textContent) != null ? _a3 : "",
         comment: ann.comment,
-        status: ann.status
+        status: ann.status,
+        lifecycle: ann.lifecycle
       },
       {
         top: window.scrollY + rect.bottom + 8,
@@ -2520,9 +2844,8 @@ var WebRemarq = (() => {
         anchorBottom: window.scrollY + rect.top - 8
       },
       {
-        onResolve: () => {
-          storage.update(ann.id, { status: "resolved" });
-          refreshMarkers();
+        onTransition: (action, reason) => {
+          applyTransition(ann.id, action, reason ? { reason } : void 0);
         },
         onDelete: () => {
           elementCache.delete(ann.id);
@@ -2536,12 +2859,14 @@ var WebRemarq = (() => {
           refreshMarkers();
         },
         onCopy: () => {
-          const fp = ann.fingerprint;
+          var _a4;
+          const fresh = (_a4 = storage.getById(ann.id)) != null ? _a4 : ann;
+          const fp = fresh.fingerprint;
           const lines = [
-            `[${ann.status}] "${ann.comment}"`,
+            `[${fresh.status}] "${fresh.comment}"`,
             `Element: <${fp.tagName}>${fp.textContent ? ` "${fp.textContent}"` : ""}`,
-            `Route: ${ann.route}`,
-            `Viewport: ${ann.viewportBucket}px`
+            `Route: ${fresh.route}`,
+            `Viewport: ${fresh.viewportBucket}px`
           ];
           if (fp.sourceLocation) lines.push(`Source: ${fp.sourceLocation}`);
           navigator.clipboard.writeText(lines.join("\n")).then(() => {
@@ -2676,6 +3001,16 @@ var WebRemarq = (() => {
       console.warn("[web-remarq] Clipboard write failed");
     });
   }
+  function applyTransition(id, action, opts = {}) {
+    if (!storage) return;
+    const ann = storage.getById(id);
+    if (!ann) return;
+    const { status, event } = transition(ann, action, opts);
+    const lifecycle = [...ann.lifecycle, event];
+    storage.update(id, { status, lifecycle });
+    markers == null ? void 0 : markers.updateStatus(id, status);
+    refreshMarkers();
+  }
   function setupMutationObserver() {
     mutationObserver = new MutationObserver((mutations) => {
       let hasExternalMutation = false;
@@ -2697,6 +3032,10 @@ var WebRemarq = (() => {
     init(opts) {
       var _a3, _b;
       if (initialized) return;
+      if (!document.body) {
+        document.addEventListener("DOMContentLoaded", () => WebRemarq.init(opts), { once: true });
+        return;
+      }
       options = opts != null ? opts : {};
       try {
         injectStyles();
@@ -2737,7 +3076,8 @@ var WebRemarq = (() => {
             showToast(themeManager.container, "All annotations cleared");
           },
           onThemeToggle: () => themeManager.toggle(),
-          onHelp: () => showShortcutsModal(themeManager.container)
+          onHelp: () => showShortcutsModal(themeManager.container),
+          onVerificationBadgeClick: jumpToFirstUnverified
         }, position);
         routeObserver = new RouteObserver();
         unsubRoute = routeObserver.onChange(() => refreshMarkers());
@@ -2831,8 +3171,32 @@ var WebRemarq = (() => {
       elementCache.clear();
       storage == null ? void 0 : storage.clearAll();
       if (initialized) refreshMarkers();
+    },
+    acknowledge(id, opts) {
+      applyTransition(id, "acknowledge", opts);
+    },
+    claimFix(id, opts) {
+      applyTransition(id, "claimFix", opts);
+    },
+    verify(id, opts) {
+      applyTransition(id, "verify", opts);
+    },
+    reject(id, opts) {
+      applyTransition(id, "reject", opts);
+    },
+    dismiss(id, opts) {
+      applyTransition(id, "dismiss", opts);
+    },
+    reopen(id, opts) {
+      applyTransition(id, "reopen", opts);
+    },
+    /** @deprecated Use verify() instead. */
+    markResolved(id) {
+      applyTransition(id, "verify");
     }
   };
-  return __toCommonJS(src_exports);
+
+  // src/global.ts
+  globalThis.WebRemarq = WebRemarq;
 })();
-//# sourceMappingURL=web-remarq.global.global.js.map
+//# sourceMappingURL=web-remarq.global.js.map