@tacktext/widget 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1909 @@
+var k=class{constructor(e,t){this.authToken=null;this.onUnauthorized=null;this.baseUrl=e,this.projectId=t}setAuthToken(e){this.authToken=e}setOnUnauthorized(e){this.onUnauthorized=e}getHeaders(){let e={"Content-Type":"application/json"};return this.authToken&&(e.Authorization=`Bearer ${this.authToken}`),e}async handleResponse(e){return e.status===401&&this.onUnauthorized?.(),e}async getComments(){let e=await fetch(`${this.baseUrl}/projects/${this.projectId}/comments?path=${encodeURIComponent(window.location.pathname)}`,{headers:this.getHeaders()});if(await this.handleResponse(e),!e.ok)throw new Error("Failed to fetch comments");return e.json()}async createComment(e){let t=await fetch(`${this.baseUrl}/comments`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify({project_id:this.projectId,...e})});if(await this.handleResponse(t),!t.ok)throw new Error("Failed to create comment");return t.json()}async updateComment(e,t){let i=await fetch(`${this.baseUrl}/comments/${e}`,{method:"PATCH",headers:this.getHeaders(),body:JSON.stringify(t)});if(await this.handleResponse(i),!i.ok)throw new Error("Failed to update comment");return i.json()}async deleteComment(e){let t=await fetch(`${this.baseUrl}/comments/${e}`,{method:"DELETE",headers:this.getHeaders()});if(await this.handleResponse(t),!t.ok)throw new Error("Failed to delete comment")}async uploadScreenshot(e){let t=await fetch(`${this.baseUrl}/upload`,{method:"POST",headers:this.getHeaders(),body:JSON.stringify({image:e,project_id:this.projectId})});if(await this.handleResponse(t),!t.ok)throw new Error("Failed to upload screenshot");let{url:i}=await t.json();return i}};var b=class{constructor(e){this.sessionToken=null;this.user=null;this.onAuthChange=null;this.apiUrl=e}async init(){let e=localStorage.getItem("tack_session");if(e)try{let t=await fetch(`${this.apiUrl}/auth/widget-session`,{headers:{Authorization:`Bearer ${e}`}});if(!t.ok){localStorage.removeItem("tack_session");return}let{user:i}=await t.json();this.sessionToken=e,this.user={id:i.user_id,name:i.user_name,email:i.user_email,avatar_url:i.user_avatar_url},this.onAuthChange?.(this.user)}catch{localStorage.removeItem("tack_session")}}signIn(){return new Promise((e,t)=>{let i=this.apiUrl.replace(/\/api$/,""),n=window.open(`${i}/auth/widget`,"tack-auth","width=500,height=600,popup=yes");if(!n){t(new Error("Popup blocked"));return}let r=new URL(this.apiUrl).origin,a=o=>{if(o.data?.type!=="tack:auth"||o.origin!==r)return;window.removeEventListener("message",a),clearInterval(s);let{token:c,user:d}=o.data;this.sessionToken=c,this.user={id:d.user_id,name:d.user_name,email:d.user_email,avatar_url:d.user_avatar_url},localStorage.setItem("tack_session",c),this.onAuthChange?.(this.user),e(this.user)};window.addEventListener("message",a);let s=setInterval(()=>{n.closed&&(clearInterval(s),window.removeEventListener("message",a),this.user||t(new Error("Auth popup closed")))},500)})}signOut(){this.sessionToken&&fetch(`${this.apiUrl}/auth/widget-session`,{method:"DELETE",headers:{Authorization:`Bearer ${this.sessionToken}`}}).catch(()=>{}),this.sessionToken=null,this.user=null,localStorage.removeItem("tack_session"),this.onAuthChange?.(null)}getUser(){return this.user}getSessionToken(){return this.sessionToken}isAuthenticated(){return this.user!==null}setOnAuthChange(e){this.onAuthChange=e}};function H(){return`
+    * {
+      box-sizing: border-box;
+    }
+
+    .tack-wrapper {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+      color: #18181b;
+    }
+
+    /* Toggle Button - Teal gradient */
+    .tack-toggle {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 52px;
+      height: 52px;
+      border-radius: 16px;
+      background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
+      color: white;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow:
+        0 4px 14px rgba(20, 184, 166, 0.4),
+        0 2px 4px rgba(0, 0, 0, 0.1);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 10000;
+    }
+
+    .tack-toggle:hover {
+      transform: translateY(-2px) scale(1.02);
+      box-shadow:
+        0 8px 20px rgba(20, 184, 166, 0.5),
+        0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .tack-toggle:active {
+      transform: scale(0.98);
+    }
+
+    .tack-active .tack-toggle {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* Pins container - hidden by default */
+    .tack-pins-container {
+      display: none;
+    }
+
+    .tack-pins-container.visible {
+      display: block;
+    }
+
+    /* Comment Pin \u2014 unified white shell */
+    .tack-pin {
+      position: absolute;
+      cursor: pointer;
+      z-index: 9999;
+      transition: transform 150ms ease, filter 150ms ease;
+      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)) drop-shadow(0 1px 2px rgba(0,0,0,0.10));
+    }
+
+    .tack-pin:hover {
+      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18)) drop-shadow(0 2px 4px rgba(0,0,0,0.12));
+      z-index: 10000;
+    }
+
+    /* White shell \u2014 the unified container (circle + ::after tail)
+       Uses CSS Grid so avatar and preview stack in the same cell.
+       The shell's width/max-height control which content is visible
+       via overflow:hidden, enabling smooth morph animations. */
+    .tack-pin-shell {
+      position: relative;
+      background: #FFFFFF;
+      border-radius: 19px;
+      padding: 3px;
+      display: grid;
+      align-items: start;
+      width: 38px;
+      max-height: 38px;
+      will-change: width, max-height, border-radius;
+    }
+
+    /* All direct children stack in the same grid cell */
+    .tack-pin-shell > * {
+      grid-area: 1 / 1;
+    }
+
+    /* Multi-author shell becomes pill-shaped */
+    .tack-pin.multi-author .tack-pin-shell {
+      border-radius: 17px;
+      padding: 3px;
+      width: auto;
+      max-height: 34px;
+    }
+
+    /* White tail as ::after pseudo-element \u2014 seamless with shell.
+       Height is 13px (not 6px) so the top of the triangle extends behind
+       the circle where it curves away from the bounding box.  The opaque
+       circle paints over the hidden overlap, eliminating the gap. */
+    .tack-pin-shell::after {
+      content: '';
+      position: absolute;
+      bottom: -7px;
+      left: 2px;
+      width: 18px;
+      height: 16px;
+      background: #FFFFFF;
+      clip-path: polygon(25% 100%, 100% 0%, 0% 0%);
+      z-index: -1;
+    }
+
+    /* Multi-author: tail under first avatar */
+    .tack-pin.multi-author .tack-pin-shell::after {
+      left: 10px;
+    }
+
+    /* Avatar inset \u2014 sits inside the shell with white padding visible */
+    .tack-pin-avatar-img {
+      border-radius: 50%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .tack-pin-avatar-fallback {
+      border-radius: 50%;
+      color: white;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+    }
+
+    /* Multi-author avatar stack inside the shell */
+    .tack-pin-avatars {
+      display: flex;
+      align-items: center;
+      z-index: 1;
+      transition: opacity 120ms ease;
+    }
+
+    .tack-pin-avatar-stacked {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      margin-left: -8px;
+      position: relative;
+      flex-shrink: 0;
+      overflow: hidden;
+      line-height: 1;
+      border: 2px solid #FFFFFF;
+    }
+
+    .tack-pin-avatar-stacked:first-child {
+      margin-left: 0;
+    }
+
+    .tack-pin-avatar-stacked img,
+    .tack-pin-avatar-stacked div {
+      display: block;
+    }
+
+    /* Overflow "+N" chip */
+    .tack-pin-avatar-overflow {
+      background: #E4E4E7;
+      color: #52525B;
+      font-size: 9px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* \u2500\u2500 Hover Preview Card \u2500\u2500 */
+
+    /* Shell transitions \u2014 collapse timing by default (faster close) */
+    .tack-pin-shell {
+      overflow: hidden;
+      transition:
+        width 160ms cubic-bezier(0.4, 0, 0.2, 1),
+        max-height 160ms cubic-bezier(0.4, 0, 0.2, 1),
+        border-radius 160ms cubic-bezier(0.4, 0, 0.2, 1),
+        padding 160ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Avatar: fade out on expand instead of display:none */
+    .tack-pin-shell > .tack-pin-avatar-img,
+    .tack-pin-shell > .tack-pin-avatar-fallback {
+      z-index: 1;
+      transition: opacity 120ms ease;
+    }
+
+    /* Expanded shell \u2014 smooth open */
+    .tack-pin.expanded .tack-pin-shell {
+      width: 256px;
+      max-height: 130px;
+      border-radius: 14px;
+      padding: 3px;
+      transition:
+        width 240ms cubic-bezier(0.16, 1, 0.3, 1),
+        max-height 240ms cubic-bezier(0.16, 1, 0.3, 1),
+        border-radius 240ms cubic-bezier(0.16, 1, 0.3, 1),
+        padding 240ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .tack-pin.expanded.multi-author .tack-pin-shell {
+      border-radius: 14px;
+      width: 256px;
+      max-height: 130px;
+    }
+
+    /* Fade avatar/stacked avatars when expanded (not display:none) */
+    .tack-pin.expanded .tack-pin-shell > .tack-pin-avatar-img,
+    .tack-pin.expanded .tack-pin-shell > .tack-pin-avatar-fallback {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .tack-pin.expanded .tack-pin-avatars {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* Preview card: always rendered, clipped by shell overflow when collapsed */
+    .tack-pin-preview {
+      display: flex;
+      width: 240px;
+      flex-direction: column;
+      padding: 6px 8px 8px 8px;
+      opacity: 0;
+      pointer-events: none;
+      align-self: start;
+      justify-self: start;
+    }
+
+    .tack-pin.expanded .tack-pin-preview {
+      opacity: 1;
+      pointer-events: auto;
+      transition:
+        opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
+    }
+
+    /* Top row: avatar + meta (name + time) */
+    .tack-pin-preview-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .tack-pin-preview-avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
+    .tack-pin-preview-avatar img,
+    .tack-pin-preview-avatar div {
+      display: block;
+    }
+
+    .tack-pin-preview-meta {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+    }
+
+    .tack-pin-preview-name {
+      font-size: 12.5px;
+      font-weight: 600;
+      color: #18181b;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 120px;
+    }
+
+    .tack-pin-preview-time {
+      font-size: 11px;
+      color: #a1a1aa;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    /* Comment text preview \u2014 staggered fade */
+    .tack-pin-preview-text {
+      font-size: 12.5px;
+      line-height: 1.4;
+      color: #3f3f46;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-word;
+      margin: 4px 0 0 0;
+      opacity: 0;
+      transform: translateY(4px);
+    }
+
+    .tack-pin.expanded .tack-pin-preview-text {
+      opacity: 1;
+      transform: translateY(0);
+      transition:
+        opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 140ms,
+        transform 120ms cubic-bezier(0.4, 0, 0.2, 1) 140ms;
+    }
+
+    /* Reply count badge */
+    .tack-pin-preview-replies {
+      font-size: 11px;
+      color: #a1a1aa;
+      margin-top: 4px;
+      opacity: 0;
+    }
+
+    .tack-pin.expanded .tack-pin-preview-replies {
+      opacity: 1;
+      transition: opacity 100ms ease 180ms;
+    }
+
+    /* Expanded pin gets higher z-index */
+    .tack-pin.expanded {
+      z-index: 10000;
+    }
+
+    /* Expand-left variant (near right viewport edge) \u2014
+       shift shell leftward so the card doesn't overflow viewport */
+    .tack-pin.expand-left.expanded .tack-pin-shell {
+      transform: translateX(-218px);
+    }
+
+    /* Active pins should not show the preview (card is already open) */
+    .tack-pin.active .tack-pin-preview {
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    .tack-pin.active.expanded .tack-pin-shell > .tack-pin-avatar-img,
+    .tack-pin.active.expanded .tack-pin-shell > .tack-pin-avatar-fallback {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .tack-pin.active.expanded .tack-pin-avatars {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .tack-pin.active.expanded .tack-pin-shell {
+      border-radius: 19px;
+      width: 38px;
+      max-height: 38px;
+    }
+
+    .tack-pin.active.expanded.multi-author .tack-pin-shell {
+      border-radius: 17px;
+      width: auto;
+      max-height: 34px;
+    }
+
+    /* On touch devices, suppress hover preview entirely */
+    @media (hover: none) {
+      .tack-pin.expanded .tack-pin-preview {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .tack-pin.expanded .tack-pin-shell > .tack-pin-avatar-img,
+      .tack-pin.expanded .tack-pin-shell > .tack-pin-avatar-fallback {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .tack-pin.expanded .tack-pin-avatars {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .tack-pin.expanded .tack-pin-shell {
+        border-radius: 19px;
+        width: 38px;
+        max-height: 38px;
+      }
+
+      .tack-pin.expanded.multi-author .tack-pin-shell {
+        border-radius: 17px;
+        width: auto;
+        max-height: 34px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tack-pin-shell,
+      .tack-pin.expanded .tack-pin-shell,
+      .tack-pin-preview,
+      .tack-pin.expanded .tack-pin-preview,
+      .tack-pin-preview-text,
+      .tack-pin.expanded .tack-pin-preview-text {
+        transition-duration: 0ms !important;
+        transition-delay: 0ms !important;
+      }
+    }
+
+    /* Resolved pin: green check dot */
+    .tack-pin-check {
+      position: absolute;
+      bottom: 8px;
+      right: -2px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: #10B981;
+      border: 2px solid white;
+      z-index: 10;
+    }
+
+    /* Resolved: fade entire pin */
+    .tack-pin.resolved {
+      opacity: 0.5;
+    }
+
+    .tack-pin.resolved:hover {
+      opacity: 0.85;
+    }
+
+    /* Active / selected pin \u2014 solid blue ring on shell */
+    .tack-pin.active {
+      transform: scale(1.05);
+    }
+
+    .tack-pin.active .tack-pin-shell {
+      box-shadow: 0 0 0 2.5px #2563EB;
+    }
+
+    /* Highlighted \u2014 finite pulse, 2 cycles */
+    .tack-pin.highlighted {
+      animation: tack-pulse 1.5s ease-in-out 2;
+    }
+
+    @keyframes tack-pulse {
+      0%, 100% {
+        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)) drop-shadow(0 1px 2px rgba(0,0,0,0.10));
+      }
+      50% {
+        filter: drop-shadow(0 0 6px rgba(37,99,235,0.3)) drop-shadow(0 2px 8px rgba(0,0,0,0.10));
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tack-pin.highlighted {
+        animation: none;
+        filter: drop-shadow(0 0 4px rgba(37,99,235,0.25)) drop-shadow(0 2px 8px rgba(0,0,0,0.10));
+      }
+    }
+
+    /* Panel Strip */
+    .tack-panel-strip {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 360px;
+      height: 100vh;
+      background: transparent;
+      padding: 0;
+      transform: translateX(100%);
+      transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
+      z-index: 10001;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .tack-panel-strip.open {
+      transform: translateX(0);
+    }
+
+    /* Panel Card */
+    .tack-panel {
+      flex: 1;
+      background: #FFFFFF;
+      border-radius: 0;
+      border: none;
+      box-shadow:
+        0 0 0 1px rgba(0, 0, 0, 0.04),
+        0 2px 4px rgba(0, 0, 0, 0.04),
+        0 8px 24px rgba(0, 0, 0, 0.08);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .tack-panel-header {
+      padding: 12px 16px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .tack-panel-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      color: #71717a;
+      flex-shrink: 0;
+      transition: all 0.15s ease;
+    }
+
+    .tack-panel-close:hover {
+      background: #f4f4f5;
+      color: #18181b;
+    }
+
+    /* Search bar */
+    .tack-panel-search-wrap {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: #f4f4f5;
+      border-radius: 6px;
+      padding: 0 8px;
+      min-height: 32px;
+      min-width: 0;
+    }
+
+    .tack-panel-search-icon {
+      flex-shrink: 0;
+      color: #a1a1aa;
+    }
+
+    .tack-panel-search {
+      flex: 1;
+      border: none;
+      background: transparent;
+      font-size: 13px;
+      font-family: inherit;
+      color: #18181b;
+      outline: none;
+      min-width: 0;
+      padding: 0;
+      line-height: 32px;
+    }
+
+    .tack-panel-search::placeholder {
+      color: #a1a1aa;
+    }
+
+    .tack-panel-search-clear {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 4px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: #a1a1aa;
+      flex-shrink: 0;
+      padding: 0;
+      transition: all 0.1s ease;
+    }
+
+    .tack-panel-search-clear:hover {
+      background: rgba(0, 0, 0, 0.08);
+      color: #71717a;
+    }
+
+    /* Icon buttons (filter + more) */
+    .tack-panel-filter-wrap,
+    .tack-panel-more-wrap {
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .tack-panel-filter-btn,
+    .tack-panel-more-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      color: #71717a;
+      position: relative;
+      transition: all 0.15s ease;
+      padding: 0;
+    }
+
+    .tack-panel-filter-btn:hover,
+    .tack-panel-more-btn:hover {
+      background: #f4f4f5;
+      color: #18181b;
+    }
+
+    .tack-panel-filter-btn.filter-active {
+      color: #2563EB;
+    }
+
+    .tack-panel-filter-btn.filter-active:hover {
+      color: #1d4ed8;
+    }
+
+    /* Filter badge (count) */
+    .tack-panel-filter-badge {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      min-width: 16px;
+      height: 16px;
+      border-radius: 8px;
+      background: #2563EB;
+      color: white;
+      font-size: 10px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 4px;
+      line-height: 1;
+    }
+
+    /* Dark dropdown menu */
+    .tack-panel-filter-dropdown,
+    .tack-panel-more-dropdown {
+      position: absolute;
+      top: calc(100% + 6px);
+      right: 0;
+      background: #1e1e1e;
+      border-radius: 10px;
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06);
+      z-index: 100;
+      min-width: 220px;
+      padding: 4px;
+      overflow: hidden;
+    }
+
+    .tack-panel-filter-dropdown[data-state="closed"],
+    .tack-panel-more-dropdown[data-state="closed"] {
+      display: none;
+    }
+
+    .tack-panel-filter-dropdown[data-state="open"],
+    .tack-panel-more-dropdown[data-state="open"] {
+      display: block;
+      animation: tack-dropdown-in 0.12s ease;
+    }
+
+    @keyframes tack-dropdown-in {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .tack-dropdown-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 8px 10px;
+      font-size: 13px;
+      font-family: inherit;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      color: #e4e4e7;
+      border-radius: 6px;
+      transition: background 0.1s ease;
+    }
+
+    .tack-dropdown-item:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .tack-dropdown-check {
+      flex-shrink: 0;
+      color: #a1a1aa;
+    }
+
+    .tack-dropdown-check-space {
+      display: inline-block;
+      width: 14px;
+      flex-shrink: 0;
+    }
+
+    .tack-dropdown-sep {
+      height: 1px;
+      background: rgba(255, 255, 255, 0.08);
+      margin: 4px 10px;
+    }
+
+    /* Toggle items */
+    .tack-dropdown-toggle {
+      justify-content: space-between;
+    }
+
+    .tack-dropdown-toggle-switch {
+      width: 32px;
+      height: 18px;
+      border-radius: 9px;
+      background: rgba(255, 255, 255, 0.15);
+      position: relative;
+      flex-shrink: 0;
+      transition: background 0.15s ease;
+    }
+
+    .tack-dropdown-toggle-switch.on {
+      background: #2563EB;
+    }
+
+    .tack-dropdown-toggle-knob {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: white;
+      transition: transform 0.15s ease;
+    }
+
+    .tack-dropdown-toggle-switch.on .tack-dropdown-toggle-knob {
+      transform: translateX(14px);
+    }
+
+    /* Unread dot */
+    .tack-unread-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #2563EB;
+      flex-shrink: 0;
+    }
+
+    .tack-comment-row-top {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+
+    /* Empty state reset button */
+    .tack-empty-reset {
+      display: inline-block;
+      margin-top: 12px;
+      padding: 6px 14px;
+      font-size: 12px;
+      font-weight: 500;
+      font-family: inherit;
+      border: 1px solid #e4e4e7;
+      border-radius: 6px;
+      background: white;
+      color: #71717a;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .tack-empty-reset:hover {
+      background: #f4f4f5;
+      color: #18181b;
+      border-color: #d4d4d8;
+    }
+
+    .tack-panel-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 6px 0;
+      mask-image: linear-gradient(
+        to bottom,
+        transparent 0%,
+        black 8px,
+        black calc(100% - 8px),
+        transparent 100%
+      );
+    }
+
+    /* Comment Row \u2014 ghost card on hover */
+    .tack-comment-row {
+      padding: 14px 16px;
+      margin: 0 6px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background-color 150ms ease-out;
+      position: relative;
+    }
+
+    .tack-comment-row:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    /* Row action buttons (overflow + resolve) */
+    .tack-comment-row-actions {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      opacity: 0;
+      transition: opacity 120ms ease;
+    }
+
+    .tack-comment-row:hover .tack-comment-row-actions {
+      opacity: 1;
+    }
+
+    .tack-comment-row-more,
+    .tack-comment-row-resolve {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: #a1a1aa;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      transition: all 120ms ease;
+    }
+
+    .tack-comment-row-more:hover,
+    .tack-comment-row-resolve:hover {
+      background: rgba(0, 0, 0, 0.06);
+      color: #18181b;
+    }
+
+    .tack-comment-row-resolve.resolved {
+      color: #10B981;
+    }
+
+    .tack-comment-row-resolve.resolved:hover {
+      background: rgba(16, 185, 129, 0.1);
+      color: #059669;
+    }
+
+    .tack-comment-row:active {
+      background-color: rgba(0, 0, 0, 0.06);
+      transition-duration: 50ms;
+    }
+
+    .tack-comment-row.highlighted {
+      background-color: rgba(20, 184, 166, 0.06);
+    }
+
+    .tack-comment-row.highlighted::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 6px;
+      bottom: 6px;
+      width: 3px;
+      border-radius: 0 3px 3px 0;
+      background: #14B8A6;
+    }
+
+    .tack-comment-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 12px;
+      font-weight: 600;
+      flex-shrink: 0;
+      line-height: 1;
+      margin-bottom: 8px;
+    }
+
+    .tack-comment-meta {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+      flex-wrap: wrap;
+      margin-bottom: 4px;
+    }
+
+    .tack-comment-author {
+      font-weight: 600;
+      font-size: 13px;
+      color: #18181b;
+    }
+
+    .tack-comment-time {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.35);
+      font-weight: 400;
+    }
+
+    .tack-comment-resolved-badge {
+      font-size: 11px;
+      font-weight: 500;
+      padding: 1px 6px;
+      border-radius: 9999px;
+      background: #ECFDF5;
+      color: #059669;
+      line-height: 1.4;
+    }
+
+    .tack-comment-page-badge {
+      font-size: 11px;
+      font-weight: 500;
+      padding: 1px 6px;
+      border-radius: 9999px;
+      background: #EEF2FF;
+      color: #4F46E5;
+      line-height: 1.4;
+    }
+
+    .tack-comment-body {
+      padding-left: 0;
+      margin-top: 2px;
+    }
+
+    .tack-comment-body.dimmed {
+      opacity: 0.6;
+    }
+
+    .tack-comment-screenshot {
+      width: 120px;
+      height: 64px;
+      object-fit: cover;
+      border-radius: 6px;
+      margin-bottom: 6px;
+      border: 1px solid #e4e4e7;
+      display: block;
+    }
+
+    .tack-comment-content {
+      font-size: 13.5px;
+      color: #3f3f46;
+      line-height: 1.5;
+    }
+
+    /* New Comment Input */
+    .tack-new-comment {
+      padding: 10px 12px;
+      border-top: 1px solid rgba(0, 0, 0, 0.06);
+    }
+
+    .tack-new-comment-input {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      background: #f4f4f5;
+      border: 1px dashed #d4d4d8;
+      border-radius: 8px;
+      font-size: 13px;
+      color: #71717a;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      font-weight: 500;
+    }
+
+    .tack-new-comment-input:hover {
+      background: #e4e4e7;
+      border-color: #a1a1aa;
+      color: #18181b;
+    }
+
+    /* Comment Form - Floating pill input */
+    .tack-form {
+      position: fixed;
+      z-index: 10003;
+      display: none;
+    }
+
+    .tack-form.visible {
+      display: block;
+      animation: tack-form-in 0.15s ease;
+    }
+
+    @keyframes tack-form-in {
+      from {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Pill container */
+    .tack-form-pill {
+      display: flex;
+      align-items: flex-end;
+      gap: 6px;
+      background: #FFFFFF;
+      border: 1px solid #D1D5DB;
+      border-radius: 20px;
+      padding: 4px 4px 4px 16px;
+      width: 300px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    .tack-form-pill:focus-within {
+      border-color: #9CA3AF;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
+    }
+
+    /* Textarea styled as single-line input */
+    .tack-form-pill-input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      font-size: 13px;
+      font-family: inherit;
+      color: #111827;
+      outline: none;
+      resize: none;
+      min-width: 0;
+      padding: 4px 0;
+      line-height: 20px;
+      height: 28px;
+      overflow-y: hidden;
+      min-height: 28px;
+    }
+
+    .tack-form-pill-input::placeholder {
+      color: #9CA3AF;
+    }
+
+    /* Send button */
+    .tack-form-pill-send {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: none;
+      background: #E5E7EB;
+      color: #9CA3AF;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: background-color 150ms ease, color 150ms ease;
+    }
+
+    .tack-form-pill-send.active {
+      background: #18181B;
+      color: #FFFFFF;
+    }
+
+    .tack-form-pill-send.active:hover {
+      background: #27272A;
+    }
+
+    .tack-form-pill-send.sending {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    /* Empty State */
+    .tack-empty {
+      text-align: center;
+      padding: 40px 20px;
+    }
+
+    .tack-empty-icon {
+      margin-bottom: 12px;
+      margin-left: auto;
+      margin-right: auto;
+      color: #a1a1aa;
+    }
+
+    .tack-empty-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #18181b;
+      margin: 0 0 4px 0;
+    }
+
+    .tack-empty-subtitle {
+      font-size: 12px;
+      color: #a1a1aa;
+      margin: 0;
+    }
+
+    /* Comment Card Popover */
+    .tack-card {
+      position: fixed;
+      width: 320px;
+      background: white;
+      border-radius: 12px;
+      border: 1px solid #e4e4e7;
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
+      z-index: 10003;
+      max-height: 480px;
+      overflow-y: auto;
+      display: none;
+      flex-direction: column;
+    }
+
+    .tack-card.visible {
+      display: flex;
+      animation: tack-form-in 0.15s ease;
+    }
+
+    /* Card title bar */
+    .tack-card-title-bar {
+      display: flex;
+      align-items: center;
+      padding: 10px 12px;
+      border-bottom: 1px solid #F4F4F5;
+      flex-shrink: 0;
+    }
+
+    .tack-card-title {
+      flex: 1;
+      font-weight: 600;
+      font-size: 13px;
+      color: #18181b;
+    }
+
+    .tack-card-title-actions {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .tack-card-resolve-icon,
+    .tack-card-close-btn {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: #A1A1AA;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+    }
+
+    .tack-card-resolve-icon:hover,
+    .tack-card-close-btn:hover {
+      background: #F4F4F5;
+      color: #18181b;
+    }
+
+    .tack-card-resolve-icon.resolved {
+      color: #10B981;
+    }
+
+    /* Resolved banner */
+    .tack-card-resolved-banner {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 12px;
+      background: #ECFDF5;
+      color: #059669;
+      font-size: 12px;
+      font-weight: 500;
+      flex-shrink: 0;
+    }
+
+    /* Card content area (scrollable) */
+    .tack-card-row {
+      padding: 12px;
+      position: relative;
+    }
+
+    .tack-card-row:hover .tack-card-more-btn {
+      opacity: 1;
+    }
+
+    .tack-card-row-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .tack-card-row-avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 10px;
+      font-weight: 600;
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .tack-card-row-meta {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .tack-card-row-author {
+      font-weight: 600;
+      font-size: 13px;
+      color: #18181b;
+    }
+
+    .tack-card-row-time {
+      font-size: 12px;
+      color: #A1A1AA;
+    }
+
+    .tack-card-editing-badge {
+      font-size: 11px;
+      font-weight: 600;
+      color: #6366F1;
+    }
+
+    /* More (three-dot) button */
+    .tack-card-more-btn {
+      width: 24px;
+      height: 24px;
+      border-radius: 6px;
+      border: none;
+      background: #F4F4F5;
+      cursor: pointer;
+      color: #71717a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      opacity: 0;
+      transition: opacity 0.15s ease, background 0.15s ease;
+    }
+
+    .tack-card-more-btn:hover {
+      background: #E4E4E7;
+      color: #18181b;
+    }
+
+    /* Dropdown menu */
+    .tack-card-dropdown {
+      position: absolute;
+      top: 42px;
+      right: 12px;
+      background: white;
+      border: 1px solid #E4E4E7;
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      z-index: 10;
+      overflow: hidden;
+      min-width: 140px;
+    }
+
+    .tack-card-dropdown-item {
+      display: block;
+      width: 100%;
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: inherit;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      color: #18181b;
+      transition: background 0.1s ease;
+    }
+
+    .tack-card-dropdown-item:hover {
+      background: #F4F4F5;
+    }
+
+    .tack-card-dropdown-item.delete {
+      color: #EF4444;
+    }
+
+    .tack-card-dropdown-item.delete:hover {
+      background: #FEF2F2;
+    }
+
+    /* Comment body text */
+    .tack-card-row-body {
+      padding: 6px 0 0 36px;
+      font-size: 13px;
+      color: #3F3F46;
+      line-height: 1.5;
+    }
+
+    .tack-card-row-screenshot {
+      width: 200px;
+      border-radius: 6px;
+      object-fit: cover;
+      border: 1px solid #e4e4e7;
+      display: block;
+      margin: 8px 0 0 36px;
+    }
+
+    /* Divider */
+    .tack-card-divider {
+      height: 1px;
+      background: #F4F4F5;
+      margin: 0;
+    }
+
+    /* Edit mode */
+    .tack-card-edit-wrap {
+      padding: 8px 0 0 36px;
+    }
+
+    .tack-card-edit-textarea {
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid #18181B;
+      border-radius: 6px;
+      font-size: 13px;
+      font-family: inherit;
+      resize: vertical;
+      min-height: 60px;
+      line-height: 1.5;
+      color: #18181b;
+      background: white;
+    }
+
+    .tack-card-edit-textarea:focus {
+      outline: none;
+    }
+
+    .tack-card-edit-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 6px;
+      margin-top: 8px;
+    }
+
+    .tack-card-edit-cancel {
+      padding: 5px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border: 1px solid #E4E4E7;
+      border-radius: 6px;
+      background: white;
+      cursor: pointer;
+      color: #71717a;
+      font-family: inherit;
+      transition: all 0.15s ease;
+    }
+
+    .tack-card-edit-cancel:hover {
+      background: #F4F4F5;
+      color: #18181b;
+    }
+
+    .tack-card-edit-save {
+      padding: 5px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border: none;
+      border-radius: 6px;
+      background: #18181B;
+      color: white;
+      cursor: pointer;
+      font-family: inherit;
+      transition: all 0.15s ease;
+    }
+
+    .tack-card-edit-save:hover {
+      background: #27272a;
+    }
+
+    /* Reply bar \u2014 always visible */
+    .tack-card-reply-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      flex-shrink: 0;
+    }
+
+    .tack-card-reply-bar-avatar {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 9px;
+      font-weight: 600;
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .tack-card-reply-bar-input-wrap {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      background: #F4F4F5;
+      border-radius: 9999px;
+      padding: 0 4px 0 12px;
+      min-height: 32px;
+    }
+
+    .tack-card-reply-bar-input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      font-size: 13px;
+      font-family: inherit;
+      color: #18181b;
+      outline: none;
+      min-width: 0;
+    }
+
+    .tack-card-reply-bar-input::placeholder {
+      color: #A1A1AA;
+    }
+
+    .tack-card-reply-bar-send {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      border: none;
+      background: #18181B;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: background 0.15s ease;
+    }
+
+    .tack-card-reply-bar-send:hover {
+      background: #27272a;
+    }
+
+    /* Sign-in pill variant */
+    .tack-form-pill-signin {
+      align-items: center;
+      padding: 6px 6px 6px 16px;
+      cursor: default;
+    }
+
+    .tack-sign-in-prompt-text {
+      flex: 1;
+      font-size: 13px;
+      color: #9CA3AF;
+      margin: 0;
+      line-height: 20px;
+    }
+
+    .tack-sign-in-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border: none;
+      border-radius: 14px;
+      background: #F4F4F5;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 500;
+      color: #3c4043;
+      font-family: inherit;
+      transition: all 0.15s ease;
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
+
+    .tack-sign-in-btn:hover {
+      background: #E5E7EB;
+      color: #18181b;
+    }
+
+    .tack-sign-in-btn:active {
+      background: #D1D5DB;
+    }
+
+    /* Avatar image support */
+    .tack-avatar-img {
+      flex-shrink: 0;
+    }
+
+    .tack-avatar-fallback {
+      flex-shrink: 0;
+    }
+
+    .tack-card-row-avatar-wrap,
+    .tack-card-reply-bar-avatar-wrap {
+      display: flex;
+      flex-shrink: 0;
+    }
+
+    /* Presence bar */
+    .tack-presence-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 16px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    }
+
+    .tack-presence-avatars {
+      display: flex;
+      align-items: center;
+    }
+
+    .tack-presence-avatar {
+      margin-left: -6px;
+      border-radius: 50%;
+      border: 2px solid white;
+      display: flex;
+      line-height: 1;
+    }
+
+    .tack-presence-avatar:first-child {
+      margin-left: 0;
+    }
+
+    .tack-presence-overflow {
+      margin-left: -6px;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: #e4e4e7;
+      color: #52525b;
+      font-size: 10px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid white;
+    }
+
+    .tack-presence-label {
+      font-size: 12px;
+      color: #a1a1aa;
+      font-weight: 500;
+    }
+
+    /* Toast */
+    .tack-toast {
+      animation: tack-toast-in 0.2s ease;
+    }
+
+    @keyframes tack-toast-in {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `}var x=class{constructor(e){this.enabled=!1;this.highlightedElement=null;this.highlight=null;this.scrim=null;this.cursor=null;this.styleElement=null;this.cursorRAF=null;this.cursorX=0;this.cursorY=0;this.targetX=0;this.targetY=0;this.settleTimer=null;this.pendingTarget=null;this.callback=e,this.onMouseMove=this.onMouseMove.bind(this),this.onMouseDown=this.onMouseDown.bind(this),this.onClick=this.onClick.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.animateCursor=this.animateCursor.bind(this)}enable(){this.enabled||(this.enabled=!0,document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mousedown",this.onMouseDown,!0),document.addEventListener("click",this.onClick,!0),document.addEventListener("keydown",this.onKeyDown),this.scrim=document.createElement("div"),this.scrim.style.cssText=`
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.03);
+      z-index: 9997;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+    `,document.body.appendChild(this.scrim),this.highlight=document.createElement("div"),this.highlight.style.cssText=`
+      position: fixed;
+      pointer-events: none;
+      z-index: 9998;
+      opacity: 0;
+      transition: opacity 0.2s ease, left 0.15s ease-out, top 0.15s ease-out, width 0.15s ease-out, height 0.15s ease-out, border-radius 0.15s ease-out;
+      border-radius: 6px;
+      box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.06);
+      background: rgba(255, 255, 255, 0.4);
+    `,document.body.appendChild(this.highlight),this.cursor=document.createElement("div"),this.cursor.style.cssText=`
+      position: fixed;
+      pointer-events: none;
+      z-index: 10004;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: #18181B;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 300;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      line-height: 1;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    `,this.cursor.textContent="+",document.body.appendChild(this.cursor),requestAnimationFrame(()=>{this.cursor&&(this.cursor.style.opacity="1")}),this.styleElement=document.createElement("style"),this.styleElement.textContent=`
+      body, body *:not(#tack-widget) { cursor: none !important; }
+      #tack-widget, #tack-widget * { cursor: default !important; }
+    `,document.head.appendChild(this.styleElement),this.cursorRAF=requestAnimationFrame(this.animateCursor))}disable(){this.enabled&&(this.enabled=!1,document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mousedown",this.onMouseDown,!0),document.removeEventListener("click",this.onClick,!0),document.removeEventListener("keydown",this.onKeyDown),this.settleTimer&&(clearTimeout(this.settleTimer),this.settleTimer=null),this.highlight&&(this.highlight.remove(),this.highlight=null),this.scrim&&(this.scrim.remove(),this.scrim=null),this.cursor&&(this.cursor.remove(),this.cursor=null),this.styleElement&&(this.styleElement.remove(),this.styleElement=null),this.cursorRAF&&(cancelAnimationFrame(this.cursorRAF),this.cursorRAF=null),this.highlightedElement=null,this.pendingTarget=null)}animateCursor(){this.cursorX+=(this.targetX-this.cursorX)*.2,this.cursorY+=(this.targetY-this.cursorY)*.2,this.cursor&&(this.cursor.style.left=`${this.cursorX}px`,this.cursor.style.top=`${this.cursorY}px`),this.cursorRAF=requestAnimationFrame(this.animateCursor)}onMouseDown(e){e.target.closest("#tack-widget")||(e.preventDefault(),e.stopPropagation())}onMouseMove(e){this.targetX=e.clientX,this.targetY=e.clientY;let t=e.target;if(t.closest("#tack-widget")){this.clearHighlight(),this.cursor&&(this.cursor.style.opacity="0");return}this.cursor&&this.cursor.style.opacity==="0"&&(this.cursor.style.opacity="1"),t!==this.pendingTarget&&t!==this.highlightedElement&&(this.pendingTarget=t,this.settleTimer&&clearTimeout(this.settleTimer),this.settleTimer=setTimeout(()=>{this.pendingTarget&&this.pendingTarget!==this.highlightedElement&&this.showHighlight(this.pendingTarget),this.pendingTarget=null},150))}showHighlight(e){if(this.highlightedElement=e,this.highlight){let t=e.getBoundingClientRect(),i=3;this.highlight.style.left=`${t.left-i}px`,this.highlight.style.top=`${t.top-i}px`,this.highlight.style.width=`${t.width+i*2}px`,this.highlight.style.height=`${t.height+i*2}px`,this.highlight.style.opacity="1";let r=window.getComputedStyle(e).borderRadius;this.highlight.style.borderRadius=r&&r!=="0px"?r:"6px"}}onClick(e){if(e.target.closest("#tack-widget"))return;e.preventDefault(),e.stopPropagation();let t=e.target,i=t.getBoundingClientRect(),n=(e.clientX-i.left)/i.width,r=(e.clientY-i.top)/i.height,a=this.generateAnchor(t,n,r);this.callback({element:t,anchor:a}),this.clearHighlight()}onKeyDown(e){e.key==="Escape"&&this.disable()}clearHighlight(){this.highlightedElement=null,this.pendingTarget=null,this.settleTimer&&(clearTimeout(this.settleTimer),this.settleTimer=null),this.highlight&&(this.highlight.style.opacity="0")}generateAnchor(e,t,i){return{cssSelector:this.generateCssSelector(e),xpath:this.generateXPath(e),textQuote:this.generateTextQuote(e),contentHash:this.generateContentHash(e),relativeX:t,relativeY:i,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}}generateCssSelector(e){if(e.id&&!this.isDynamicId(e.id))return`#${CSS.escape(e.id)}`;let t=[],i=e;for(;i&&i!==document.body;){let n=i.tagName.toLowerCase();if(i.className&&typeof i.className=="string"){let o=i.className.trim().split(/\s+/).filter(c=>!this.isDynamicClass(c));o.length>0&&(n+="."+o.slice(0,2).map(c=>CSS.escape(c)).join("."))}let r=i.getAttribute("data-testid")||i.getAttribute("data-test-id");r&&(n+=`[data-testid="${CSS.escape(r)}"]`);let a=i.parentElement;if(a){let o=Array.from(a.children).filter(c=>c.tagName===i.tagName);if(o.length>1){let c=o.indexOf(i)+1;n+=`:nth-child(${c})`}}t.unshift(n);let s=t.join(" > ");try{if(document.querySelectorAll(s).length===1)return s}catch{}i=a}return t.join(" > ")}generateXPath(e){let t=[],i=e;for(;i&&i!==document.body;){let n=i.tagName.toLowerCase(),r=i.parentElement;if(r){let a=Array.from(r.children).filter(s=>s.tagName===i.tagName);if(a.length>1){let s=a.indexOf(i)+1;n+=`[${s}]`}}t.unshift(n),i=r}return"//"+t.join("/")}generateTextQuote(e){let t=e.textContent?.trim();if(!t||t.length===0||t.length>500)return null;let i=e.parentElement,n="",r="";if(i){let a=i.textContent||"",s=a.indexOf(t);s>0&&(n=a.slice(Math.max(0,s-32),s).trim());let o=s+t.length;o<a.length&&(r=a.slice(o,o+32).trim())}return{prefix:n,exact:t.slice(0,200),suffix:r}}generateContentHash(e){let t=e.textContent?.trim().slice(0,500)||"",i=e.tagName.toLowerCase(),n=e.className?.toString()||"",r=`${i}:${n}:${t}`,a=5381;for(let s=0;s<r.length;s++)a=(a<<5)+a+r.charCodeAt(s);return(a>>>0).toString(16)}isDynamicId(e){return/^[:_]/.test(e)||/[0-9]{5,}/.test(e)||/^(ember|react|vue|ng-|_)[0-9]+/.test(e)||/^[a-f0-9]{8,}$/i.test(e)}isDynamicClass(e){return e.startsWith("tack-")||/^css-[a-z0-9]+$/i.test(e)||/^sc-[a-z]+$/i.test(e)||/^emotion-[0-9]+$/i.test(e)||/^_[a-zA-Z0-9]{5,}$/.test(e)||/^[a-z]{1,3}[A-Z][a-zA-Z0-9]{10,}$/.test(e)}};async function _(l,e,t){let i=(await import("html2canvas")).default;try{if(l){let c=document.querySelector(l);if(c){let d=c.getBoundingClientRect(),h=20;return(await i(document.body,{logging:!1,useCORS:!0,allowTaint:!0,scale:1,x:Math.max(0,d.left+window.scrollX-h),y:Math.max(0,d.top+window.scrollY-h),width:Math.min(d.width+h*2,600),height:Math.min(d.height+h*2,400)})).toDataURL("image/png",.8)}}let n=e/100*document.documentElement.scrollWidth,r=t/100*document.documentElement.scrollHeight,a=400,s=300;return(await i(document.body,{logging:!1,useCORS:!0,allowTaint:!0,scale:1,x:Math.max(0,n-a/2),y:Math.max(0,r-s/2),width:a,height:s})).toDataURL("image/png",.8)}catch(n){console.warn("Tack: Screenshot capture failed",n);return}}var w=class{constructor(e,t){this.onHide=null;this.onSignIn=null;this.currentTarget=null;this.isSubmitting=!1;this.capturedScreenshot=void 0;this.highlightElement=null;this.isVisible=!1;this.currentUser=null;this.container=e,this.onSubmit=t,this.form=this.createForm(),this.container.appendChild(this.form),this.highlightElement=document.createElement("div"),this.highlightElement.className="tack-form-highlight",this.highlightElement.style.cssText=`
+      position: fixed;
+      pointer-events: none;
+      border: 2px solid #14B8A6;
+      border-radius: 4px;
+      background: rgba(20, 184, 166, 0.1);
+      z-index: 10002;
+      display: none;
+      transition: all 0.15s ease;
+    `,document.body.appendChild(this.highlightElement)}setOnHide(e){this.onHide=e}setOnSignIn(e){this.onSignIn=e}setUser(e){this.currentUser=e,this.rebuildFormContent()}createForm(){let e=document.createElement("div");return e.className="tack-form",this.buildFormInner(e),e}rebuildFormContent(){this.buildFormInner(this.form)}buildFormInner(e){this.currentUser?e.innerHTML=`
+        <div class="tack-form-pill">
+          <textarea class="tack-form-pill-input" id="tack-comment-content" placeholder="Add a comment..." rows="1"></textarea>
+          <button type="button" class="tack-form-pill-send" aria-label="Send">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <path d="M7 11.5V2.5M7 2.5L3 6.5M7 2.5L11 6.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        </div>
+      `:e.innerHTML=`
+        <div class="tack-form-pill tack-form-pill-signin">
+          <span class="tack-sign-in-prompt-text">Sign in to leave feedback</span>
+          <button type="button" class="tack-sign-in-btn">
+            <svg width="14" height="14" viewBox="0 0 24 24">
+              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/>
+              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+            </svg>
+            Sign in
+          </button>
+        </div>
+      `,this.attachFormListeners(e)}attachFormListeners(e){e.addEventListener("mousedown",i=>i.stopPropagation()),e.addEventListener("click",i=>i.stopPropagation()),e.querySelector(".tack-sign-in-btn")?.addEventListener("click",i=>{i.stopPropagation(),this.onSignIn?.()}),e.querySelector(".tack-form-pill-send")?.addEventListener("click",i=>{i.stopPropagation(),this.handleSubmit()});let t=e.querySelector("#tack-comment-content");t&&(t.addEventListener("input",()=>{this.autoExpandTextarea(t);let i=e.querySelector(".tack-form-pill-send");i&&i.classList.toggle("active",t.value.trim().length>0)}),t.addEventListener("keydown",i=>{let n=i;n.key==="Enter"&&!n.shiftKey&&(n.preventDefault(),this.handleSubmit())})),e.addEventListener("keydown",i=>{let n=i;n.key==="Escape"&&(n.preventDefault(),this.hide())})}async show(e){if(this.isVisible)return;if(this.currentTarget=e,this.isVisible=!0,this.capturedScreenshot=await _(e.anchor.cssSelector,e.anchor.relativeX*100,e.anchor.relativeY*100),e.element&&this.highlightElement){let o=e.element.getBoundingClientRect();this.highlightElement.style.display="block",this.highlightElement.style.left=`${o.left-4}px`,this.highlightElement.style.top=`${o.top-4}px`,this.highlightElement.style.width=`${o.width+8}px`,this.highlightElement.style.height=`${o.height+8}px`}let t,i;if(e.element){let o=e.element.getBoundingClientRect();t=o.right+12,i=o.top;let c=300;t+c>window.innerWidth-380&&(t=o.left-c-12)}else t=e.anchor.relativeX*window.innerWidth+20,i=e.anchor.relativeY*window.innerHeight;let n=300,r=52,a=Math.min(t,window.innerWidth-n-380),s=Math.min(i,window.innerHeight-r-20);a=Math.max(20,a),s=Math.max(20,s),this.form.style.left=`${a}px`,this.form.style.top=`${s}px`,this.form.classList.add("visible"),setTimeout(()=>{this.form.querySelector("#tack-comment-content")?.focus()},50)}hide(){if(!this.isVisible)return;this.isVisible=!1,this.form.classList.remove("visible"),this.currentTarget=null,this.capturedScreenshot=void 0;let e=this.form.querySelector("#tack-comment-content");e&&(e.value="",e.style.height="28px",e.style.overflowY="hidden");let t=this.form.querySelector(".tack-form-pill-send");t&&t.classList.remove("active"),this.highlightElement&&(this.highlightElement.style.display="none"),this.onHide?.()}isFormVisible(){return this.isVisible}autoExpandTextarea(e){e.style.height="auto";let t=120;e.style.height=`${Math.min(e.scrollHeight,t)}px`,e.style.overflowY=e.scrollHeight>t?"auto":"hidden"}async handleSubmit(){if(this.isSubmitting||!this.currentTarget)return;let e=this.form.querySelector("#tack-comment-content")?.value.trim();if(!e)return;let t;if(this.currentUser)t=this.currentUser.name;else if(t=this.form.querySelector("#tack-author-name")?.value.trim()||"",!t)return;this.isSubmitting=!0;let i=this.form.querySelector(".tack-form-pill-send");i&&i.classList.add("sending");try{this.currentUser||localStorage.setItem("tack_author_name",t);let n={content:e,authorName:t,anchor:this.currentTarget.anchor,screenshot:this.capturedScreenshot};this.hide(),await this.onSubmit(n)}catch(n){console.error("[Tack] Submit failed:",n)}finally{this.isSubmitting=!1,i&&i.classList.remove("sending")}}escapeHtml(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}};var M=[["#818CF8","#6366F1"],["#A78BFA","#7C3AED"],["#F472B6","#EC4899"],["#FBBF24","#F59E0B"],["#34D399","#10B981"],["#60A5FA","#3B82F6"],["#F87171","#EF4444"],["#2DD4BF","#14B8A6"]],I=M.map(([,l])=>l);function D(l){let e=0;for(let t=0;t<l.length;t++)e=l.charCodeAt(t)+((e<<5)-e);return Math.abs(e)}function U(l){return I[D(l)%I.length]}function P(l){let[e,t]=M[D(l)%M.length];return`linear-gradient(135deg, ${e} 0%, ${t} 100%)`}function p(l){let e=l.trim().split(/\s+/);return e.length>=2?(e[0][0]+e[e.length-1][0]).toUpperCase():l.slice(0,2).toUpperCase()}function u(l,e,t,i=""){let n=Math.round(t*.38),r=i?` ${i}`:"";return e?`<img
+      src="${e}"
+      alt="${p(l)}"
+      class="tack-avatar-img${r}"
+      style="width:${t}px;height:${t}px;border-radius:50%;object-fit:cover;"
+      onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"
+    /><div
+      class="tack-avatar-fallback${r}"
+      style="display:none;width:${t}px;height:${t}px;border-radius:50%;background:${U(l)};color:white;font-size:${n}px;font-weight:600;align-items:center;justify-content:center;line-height:1;flex-shrink:0"
+    >${p(l)}</div>`:`<div
+    class="tack-avatar-fallback${r}"
+    style="display:flex;width:${t}px;height:${t}px;border-radius:50%;background:${U(l)};color:white;font-size:${n}px;font-weight:600;align-items:center;justify-content:center;line-height:1;flex-shrink:0"
+  >${p(l)}</div>`}var z="tack_panel_filters";function q(){try{let l=localStorage.getItem(z);if(l){let e=JSON.parse(l);return{sort:e.sort||"date",showResolved:e.showResolved??!1,onlyYourThreads:e.onlyYourThreads??!1,onlyCurrentPage:e.onlyCurrentPage??!1}}}catch{}return{sort:"date",showResolved:!1,onlyYourThreads:!1,onlyCurrentPage:!1}}function O(l){try{localStorage.setItem(z,JSON.stringify(l))}catch{}}var y=class{constructor(e,t){this.comments=[];this.searchQuery="";this.searchTimer=null;this.highlightedId=null;this.filterDropdownOpen=!1;this.moreDropdownOpen=!1;this.currentUser=null;this.projectId="";this.container=e,this.callbacks=t,this.filters=q(),this.readCommentIds=this.loadReadIds(),this.strip=this.createPanelStrip(),this.panel=this.strip.querySelector(".tack-panel"),this.container.appendChild(this.strip)}setUser(e){this.currentUser=e}setProjectId(e){this.projectId=e,this.readCommentIds=this.loadReadIds()}loadReadIds(){try{let e=`tack_read_${this.projectId}`,t=localStorage.getItem(e);if(t)return new Set(JSON.parse(t))}catch{}return new Set}saveReadIds(){try{let e=`tack_read_${this.projectId}`;localStorage.setItem(e,JSON.stringify([...this.readCommentIds]))}catch{}}markAsRead(e){this.readCommentIds.has(e)||(this.readCommentIds.add(e),this.saveReadIds())}markVisibleAsRead(){if(!this.isOpen())return;let e=this.getFilteredComments(),t=!1;for(let i of e)this.readCommentIds.has(i.id)||(this.readCommentIds.add(i.id),t=!0);t&&this.saveReadIds()}isRead(e){return this.readCommentIds.has(e)}createPanelStrip(){let e=document.createElement("div");e.className="tack-panel-strip",e.innerHTML=`
+      <div class="tack-panel" role="complementary" aria-label="Comments panel">
+        <div class="tack-panel-header">
+          <button class="tack-panel-close" aria-label="Close comments panel">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+          <div class="tack-panel-search-wrap">
+            <svg class="tack-panel-search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+            <input type="text" class="tack-panel-search" placeholder="Search" />
+            <button class="tack-panel-search-clear" style="display:none;">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+          <div class="tack-panel-filter-wrap">
+            <button class="tack-panel-filter-btn">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="4" y1="6" x2="20" y2="6"></line>
+                <line x1="7" y1="12" x2="17" y2="12"></line>
+                <line x1="10" y1="18" x2="14" y2="18"></line>
+              </svg>
+              <span class="tack-panel-filter-badge" style="display:none;"></span>
+            </button>
+            <div class="tack-panel-filter-dropdown" data-state="closed"></div>
+          </div>
+          <div class="tack-panel-more-wrap">
+            <button class="tack-panel-more-btn">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="5" r="1" fill="currentColor"></circle>
+                <circle cx="12" cy="12" r="1" fill="currentColor"></circle>
+                <circle cx="12" cy="19" r="1" fill="currentColor"></circle>
+              </svg>
+            </button>
+            <div class="tack-panel-more-dropdown" data-state="closed"></div>
+          </div>
+        </div>
+        <div class="tack-panel-content"></div>
+        <div class="tack-new-comment">
+          <div class="tack-new-comment-input" role="button" aria-label="Add new comment">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M15 15l-2 5L9 9l11 4-5 2z"></path>
+              <path d="M22 2l-7 7"></path>
+            </svg>
+            Click anywhere to add comment
+          </div>
+        </div>
+      </div>
+    `,e.querySelector(".tack-panel-close").addEventListener("click",()=>{this.hide(),this.callbacks.onClose?.()});let t=e.querySelector(".tack-panel-search"),i=e.querySelector(".tack-panel-search-clear");return t.addEventListener("input",()=>{let n=t.value;i.style.display=n?"flex":"none",this.searchTimer&&clearTimeout(this.searchTimer),this.searchTimer=setTimeout(()=>{this.searchQuery=n.trim().toLowerCase(),this.renderComments()},200)}),i.addEventListener("click",n=>{n.stopPropagation(),t.value="",i.style.display="none",this.searchQuery="",this.renderComments(),t.focus()}),e.querySelector(".tack-panel-filter-btn").addEventListener("click",n=>{n.stopPropagation(),this.moreDropdownOpen=!1,this.renderMoreDropdown(),this.filterDropdownOpen=!this.filterDropdownOpen,this.renderFilterDropdown()}),e.querySelector(".tack-panel-more-btn").addEventListener("click",n=>{n.stopPropagation(),this.filterDropdownOpen=!1,this.renderFilterDropdown(),this.moreDropdownOpen=!this.moreDropdownOpen,this.renderMoreDropdown()}),e.querySelector(".tack-new-comment-input").addEventListener("click",()=>{this.callbacks.onAddComment?.()}),e.addEventListener("click",n=>{let r=n.target;!r.closest(".tack-panel-filter-wrap")&&this.filterDropdownOpen&&(this.filterDropdownOpen=!1,this.renderFilterDropdown()),!r.closest(".tack-panel-more-wrap")&&this.moreDropdownOpen&&(this.moreDropdownOpen=!1,this.renderMoreDropdown())}),e}renderFilterDropdown(){let e=this.strip.querySelector(".tack-panel-filter-dropdown");if(!this.filterDropdownOpen){e.setAttribute("data-state","closed"),e.innerHTML="";return}let t=this.filters,i='<svg class="tack-dropdown-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',n='<span class="tack-dropdown-check-space"></span>';e.innerHTML=`
+      <button class="tack-dropdown-item" data-action="sort-date">
+        ${t.sort==="date"?i:n}
+        <span>Sort by date</span>
+      </button>
+      <button class="tack-dropdown-item" data-action="sort-unread">
+        ${t.sort==="unread"?i:n}
+        <span>Sort by unread</span>
+      </button>
+      <button class="tack-dropdown-item" data-action="sort-replies">
+        ${t.sort==="replies"?i:n}
+        <span>Sort by most replies</span>
+      </button>
+      <div class="tack-dropdown-sep"></div>
+      <button class="tack-dropdown-item tack-dropdown-toggle" data-action="showResolved">
+        <span>Show resolved comments</span>
+        <span class="tack-dropdown-toggle-switch ${t.showResolved?"on":""}"><span class="tack-dropdown-toggle-knob"></span></span>
+      </button>
+      <button class="tack-dropdown-item tack-dropdown-toggle" data-action="onlyYourThreads">
+        <span>Only your threads</span>
+        <span class="tack-dropdown-toggle-switch ${t.onlyYourThreads?"on":""}"><span class="tack-dropdown-toggle-knob"></span></span>
+      </button>
+      <button class="tack-dropdown-item tack-dropdown-toggle" data-action="onlyCurrentPage">
+        <span>Only current page</span>
+        <span class="tack-dropdown-toggle-switch ${t.onlyCurrentPage?"on":""}"><span class="tack-dropdown-toggle-knob"></span></span>
+      </button>
+    `,e.setAttribute("data-state","open"),e.querySelectorAll(".tack-dropdown-item").forEach(r=>{r.addEventListener("click",a=>{a.stopPropagation();let s=r.dataset.action;s.startsWith("sort-")?this.filters.sort=s.replace("sort-",""):s==="showResolved"?this.filters.showResolved=!this.filters.showResolved:s==="onlyYourThreads"?this.filters.onlyYourThreads=!this.filters.onlyYourThreads:s==="onlyCurrentPage"&&(this.filters.onlyCurrentPage=!this.filters.onlyCurrentPage),O(this.filters),this.updateFilterBadge(),this.renderFilterDropdown(),this.renderComments()})})}renderMoreDropdown(){let e=this.strip.querySelector(".tack-panel-more-dropdown");if(!this.moreDropdownOpen){e.setAttribute("data-state","closed"),e.innerHTML="";return}e.innerHTML=`
+      <button class="tack-dropdown-item" data-action="share">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
+          <polyline points="16 6 12 2 8 6"></polyline>
+          <line x1="12" y1="2" x2="12" y2="15"></line>
+        </svg>
+        <span>Copy share link</span>
+      </button>
+    `,e.setAttribute("data-state","open"),e.querySelector('[data-action="share"]').addEventListener("click",t=>{t.stopPropagation(),this.moreDropdownOpen=!1,this.renderMoreDropdown(),this.callbacks.onShare?.()})}updateFilterBadge(){let e=this.strip.querySelector(".tack-panel-filter-badge"),t=this.strip.querySelector(".tack-panel-filter-btn"),i=0;this.filters.showResolved&&i++,this.filters.onlyYourThreads&&i++,this.filters.onlyCurrentPage&&i++,i>0?(e.textContent=String(i),e.style.display="flex",t.classList.add("filter-active")):(e.style.display="none",t.classList.remove("filter-active"))}show(){this.strip.classList.add("open"),this.updateFilterBadge(),setTimeout(()=>this.markVisibleAsRead(),1500)}hide(){this.strip.classList.remove("open"),this.filterDropdownOpen=!1,this.moreDropdownOpen=!1,this.renderFilterDropdown(),this.renderMoreDropdown()}toggle(){this.strip.classList.contains("open")?this.hide():this.show()}isOpen(){return this.strip.classList.contains("open")}render(e){this.comments=e,this.renderComments(),this.isOpen()&&setTimeout(()=>this.markVisibleAsRead(),1500)}renderPresence(e){let t=this.panel.querySelector(".tack-presence-bar");if(!t){t=document.createElement("div"),t.className="tack-presence-bar";let s=this.panel.querySelector(".tack-panel-header");s&&s.parentNode?.insertBefore(t,s.nextSibling)}if(e.length===0){t.style.display="none";return}t.style.display="flex";let i=5,n=e.slice(0,i),r=e.length-i,a='<div class="tack-presence-avatars">';n.forEach(s=>{a+=`<div class="tack-presence-avatar" title="${this.escapeHtml(s.name)}">${u(s.name,s.avatar_url,24)}</div>`}),r>0&&(a+=`<div class="tack-presence-overflow">+${r}</div>`),a+="</div>",a+=`<span class="tack-presence-label">${e.length} viewing</span>`,t.innerHTML=a}renderComments(){let e=this.panel.querySelector(".tack-panel-content"),t=this.getFilteredComments();if(t.length===0){if(this.searchQuery){let i=(this.filters.showResolved?1:0)+(this.filters.onlyYourThreads?1:0)+(this.filters.onlyCurrentPage?1:0);e.innerHTML=`
+          <div class="tack-empty">
+            <div class="tack-empty-icon">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              </svg>
+            </div>
+            <p class="tack-empty-title">No comments matching "${this.escapeHtml(this.searchQuery)}"</p>
+            <p class="tack-empty-subtitle">${i>0?"Try adjusting your search or filters":"Try a different search term"}</p>
+            ${i>0?'<button class="tack-empty-reset">Reset filters</button>':""}
+          </div>
+        `}else this.hasActiveFilters()?e.innerHTML=`
+          <div class="tack-empty">
+            <div class="tack-empty-icon">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <line x1="4" y1="6" x2="20" y2="6"></line>
+                <line x1="7" y1="12" x2="17" y2="12"></line>
+                <line x1="10" y1="18" x2="14" y2="18"></line>
+              </svg>
+            </div>
+            <p class="tack-empty-title">No comments to show</p>
+            <p class="tack-empty-subtitle">${this.describeActiveFilters()}</p>
+            <button class="tack-empty-reset">Reset filters</button>
+          </div>
+        `:e.innerHTML=`
+          <div class="tack-empty">
+            <div class="tack-empty-icon">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+            </div>
+            <p class="tack-empty-title">No comments yet</p>
+            <p class="tack-empty-subtitle">Click anywhere on the page to add feedback</p>
+          </div>
+        `;e.querySelector(".tack-empty-reset")?.addEventListener("click",()=>{this.resetFilters()});return}e.innerHTML=t.map(i=>this.renderCommentRow(i)).join(""),e.querySelectorAll(".tack-comment-row").forEach(i=>{let n=i.dataset.id;i.addEventListener("click",()=>{this.markAsRead(n);let s=i.querySelector(".tack-unread-dot");s&&s.remove();let o=this.comments.find(c=>c.id===n);o&&this.callbacks.onCommentClick(o)});let r=i.querySelector(".tack-comment-row-resolve");r&&r.addEventListener("click",s=>{s.stopPropagation();let o=this.comments.find(c=>c.id===n);o&&this.callbacks.onResolve(n,!o.resolved)});let a=i.querySelector(".tack-comment-row-more");a&&a.addEventListener("click",s=>{s.stopPropagation();let o=this.comments.find(c=>c.id===n);o&&this.callbacks.onCommentClick(o)})})}hasActiveFilters(){return this.filters.showResolved||this.filters.onlyYourThreads||this.filters.onlyCurrentPage}describeActiveFilters(){let e=[];return this.filters.onlyYourThreads&&e.push("only your threads"),this.filters.onlyCurrentPage&&e.push("only current page"),this.filters.showResolved||e.push("resolved comments hidden"),e.length>0?e.join(", ").replace(/^./,t=>t.toUpperCase()):""}resetFilters(){this.filters={sort:"date",showResolved:!1,onlyYourThreads:!1,onlyCurrentPage:!1},this.searchQuery="";let e=this.strip.querySelector(".tack-panel-search");e&&(e.value="");let t=this.strip.querySelector(".tack-panel-search-clear");t&&(t.style.display="none"),O(this.filters),this.updateFilterBadge(),this.renderComments()}getCurrentPagePath(){return window.location.pathname+window.location.search}formatPagePath(e){if(!e||e==="/")return"Home";let t=e.split("?")[0].slice(1);return t.charAt(0).toUpperCase()+t.slice(1)}renderCommentRow(e){let t=e.id===this.highlightedId,i=this.formatTimeAgo(new Date(e.created_at)),n=this.getCurrentPagePath(),r=e.page_path===n,a=this.formatPagePath(e.page_path),s=!!e.screenshot_url,o=!this.isRead(e.id);return`
+      <div class="tack-comment-row ${t?"highlighted":""}" data-id="${e.id}">
+        <div class="tack-comment-row-actions">
+          <button class="tack-comment-row-more" data-action="more" data-id="${e.id}" title="More actions">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="3" cy="8" r="1.25" fill="currentColor"/><circle cx="8" cy="8" r="1.25" fill="currentColor"/><circle cx="13" cy="8" r="1.25" fill="currentColor"/></svg>
+          </button>
+          <button class="tack-comment-row-resolve ${e.resolved?"resolved":""}" data-action="resolve" data-id="${e.id}" title="${e.resolved?"Unresolve":"Resolve"}">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>${e.resolved?'<path d="M5.5 8L7.2 9.7L10.5 6.3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>':""}</svg>
+          </button>
+        </div>
+        <div class="tack-comment-row-top">
+          ${u(e.author_name,e.author_avatar_url,32,"tack-comment-avatar")}
+          ${o?'<span class="tack-unread-dot"></span>':""}
+        </div>
+        <div class="tack-comment-meta">
+          <span class="tack-comment-author">${this.escapeHtml(e.author_name)}</span>
+          <span class="tack-comment-time">${i}</span>
+          ${e.resolved?'<span class="tack-comment-resolved-badge">Resolved</span>':""}
+          ${r?"":`<span class="tack-comment-page-badge">${this.escapeHtml(a)}</span>`}
+        </div>
+        <div class="tack-comment-body ${e.resolved?"dimmed":""}">
+          ${s?`<img src="${e.screenshot_url}" class="tack-comment-screenshot" alt="Screenshot" />`:""}
+          <div class="tack-comment-content">${this.escapeHtml(e.content)}</div>
+        </div>
+      </div>
+    `}getFilteredComments(){let e=this.comments.filter(t=>!t.parent_id);if(this.filters.showResolved||(e=e.filter(t=>!t.resolved)),this.filters.onlyYourThreads&&this.currentUser){let t=this.currentUser.id,i=this.currentUser.name;e=e.filter(n=>!!(n.user_id===t||n.author_name===i||n.replies?.some(r=>r.user_id===t||r.author_name===i)))}if(this.filters.onlyCurrentPage){let t=this.getCurrentPagePath();e=e.filter(i=>i.page_path===t)}if(this.searchQuery){let t=this.searchQuery;e=e.filter(i=>!!(i.author_name.toLowerCase().includes(t)||i.content.toLowerCase().includes(t)||i.replies?.some(n=>n.content.toLowerCase().includes(t)||n.author_name.toLowerCase().includes(t))))}switch(this.filters.sort){case"unread":e.sort((t,i)=>{let n=this.isRead(t.id)?1:0,r=this.isRead(i.id)?1:0;return n!==r?n-r:new Date(i.created_at).getTime()-new Date(t.created_at).getTime()});break;case"replies":e.sort((t,i)=>{let n=t.replies?.length||0,r=i.replies?.length||0;return r!==n?r-n:new Date(i.created_at).getTime()-new Date(t.created_at).getTime()});break;default:e.sort((t,i)=>new Date(i.created_at).getTime()-new Date(t.created_at).getTime());break}return e}scrollToComment(e){this.highlightedId=e,this.renderComments(),this.panel.querySelector(`[data-id="${e}"]`)?.scrollIntoView({behavior:"smooth",block:"nearest"}),setTimeout(()=>{this.highlightedId=null,this.renderComments()},2e3)}formatTimeAgo(e){let t=Math.floor((Date.now()-e.getTime())/1e3);return t<60?"just now":t<3600?`${Math.floor(t/60)}m ago`:t<86400?`${Math.floor(t/3600)}h ago`:t<604800?`${Math.floor(t/86400)}d ago`:e.toLocaleDateString()}escapeHtml(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}};var C=class{resolve(e){if(!e)return{element:null,confidence:"none",method:"none"};if(e.cssSelector){let t=this.tryCssSelector(e);if(t.element)return t}if(e.xpath){let t=this.tryXPath(e);if(t.element)return t}if(e.textQuote){let t=this.tryTextQuote(e.textQuote);if(t.element)return t}if(e.textQuote){let t=this.tryFuzzySearch(e.textQuote);if(t.element)return t}return{element:null,confidence:"none",method:"none"}}calculatePinPosition(e,t){let i=e.getBoundingClientRect(),n=i.left+t.relativeX*i.width+window.scrollX,r=i.top+t.relativeY*i.height+window.scrollY;return{x:n,y:r}}tryCssSelector(e){try{let t=document.querySelector(e.cssSelector);return t?e.contentHash?this.generateContentHash(t)===e.contentHash?{element:t,confidence:"high",method:"css"}:{element:t,confidence:"medium",method:"css"}:{element:t,confidence:"high",method:"css"}:{element:null,confidence:"none",method:"css"}}catch{return{element:null,confidence:"none",method:"css"}}}tryXPath(e){try{let i=document.evaluate(e.xpath,document.body,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;return i?e.contentHash?this.generateContentHash(i)===e.contentHash?{element:i,confidence:"high",method:"xpath"}:{element:i,confidence:"medium",method:"xpath"}:{element:i,confidence:"medium",method:"xpath"}:{element:null,confidence:"none",method:"xpath"}}catch{return{element:null,confidence:"none",method:"xpath"}}}tryTextQuote(e){let t=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,null),i=t.nextNode();for(;i;){let n=i,r=n.textContent?.trim();if(r&&r.includes(e.exact)&&this.verifyContext(n,e))return{element:n,confidence:"high",method:"textQuote"};i=t.nextNode()}return{element:null,confidence:"none",method:"textQuote"}}tryFuzzySearch(e){let t=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,null),i=null,n=e.exact.toLowerCase(),r=t.nextNode();for(;r;){let a=r,s=a.textContent?.trim().toLowerCase();if(s&&s.length<1e3){let o=this.similarityScore(s,n);o>.7&&(!i||o>i.score)&&(i={element:a,score:o})}r=t.nextNode()}return i?{element:i.element,confidence:i.score>.9?"medium":"low",method:"fuzzy"}:{element:null,confidence:"none",method:"fuzzy"}}verifyContext(e,t){if(!t.prefix&&!t.suffix)return!0;let i=e.parentElement;if(!i)return!0;let n=i.textContent||"",r=e.textContent||"",a=n.indexOf(r);if(a===-1)return!0;if(t.prefix&&!n.slice(Math.max(0,a-50),a).trim().includes(t.prefix.slice(-20)))return!1;if(t.suffix){let s=a+r.length;if(!n.slice(s,s+50).trim().includes(t.suffix.slice(0,20)))return!1}return!0}similarityScore(e,t){if(e===t)return 1;if(e.length<2||t.length<2)return 0;let i=new Set,n=new Set;for(let a=0;a<e.length-1;a++)i.add(e.slice(a,a+2));for(let a=0;a<t.length-1;a++)n.add(t.slice(a,a+2));let r=0;return i.forEach(a=>{n.has(a)&&r++}),2*r/(i.size+n.size)}generateContentHash(e){let t=e.textContent?.trim().slice(0,500)||"",i=e.tagName.toLowerCase(),n=e.className?.toString()||"",r=`${i}:${n}:${t}`,a=5381;for(let s=0;s<r.length;s++)a=(a<<5)+a+r.charCodeAt(s);return(a>>>0).toString(16)}};var E=class{constructor(e,t){this.highlightedId=null;this.activeId=null;this.pins=new Map;this.resizeObserver=null;this.repositionRAF=null;this.hoverTimers=new Map;this.leaveTimers=new Map;this.currentlyExpanded=null;this.container=e,this.onClick=t,this.anchoring=new C,this.boundScheduleReposition=this.scheduleReposition.bind(this),this.pinsContainer=document.createElement("div"),this.pinsContainer.className="tack-pins-container",this.container.appendChild(this.pinsContainer),this.setupResizeObserver(),window.addEventListener("scroll",this.boundScheduleReposition,{passive:!0}),window.addEventListener("resize",this.boundScheduleReposition,{passive:!0})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>{this.scheduleReposition()}),this.resizeObserver.observe(document.body)}scheduleReposition(){this.repositionRAF&&cancelAnimationFrame(this.repositionRAF),this.repositionRAF=requestAnimationFrame(()=>{this.repositionAllPins()})}repositionAllPins(){this.pins.forEach((e,t)=>{e.targetElement&&!document.contains(e.targetElement)&&(e.anchorResult=this.anchoring.resolve(e.comment.anchor),e.targetElement=e.anchorResult.element),this.positionPin(e)})}getCurrentPagePath(){return window.location.pathname+window.location.search}render(e){this.hoverTimers.forEach(n=>clearTimeout(n)),this.hoverTimers.clear(),this.leaveTimers.forEach(n=>clearTimeout(n)),this.leaveTimers.clear(),this.currentlyExpanded=null,this.pinsContainer.innerHTML="",this.pins.clear();let t=this.getCurrentPagePath();e.filter(n=>!n.parent_id&&n.page_path===t).forEach(n=>{let r=this.createPin(n);r&&(this.pins.set(n.id,r),this.pinsContainer.appendChild(r.element))})}getUniqueAuthors(e){let t=new Set,i=[],n=e.user_id||e.author_name;if(t.add(n),i.push({name:e.author_name,avatar_url:e.author_avatar_url}),e.replies)for(let r of e.replies){let a=r.user_id||r.author_name;t.has(a)||(t.add(a),i.push({name:r.author_name,avatar_url:r.author_avatar_url}))}return i}renderInsetAvatar(e,t){let i=p(e.name),n=P(e.name),r=Math.round(t*.38);return e.avatar_url?`<img src="${e.avatar_url}" alt="${i}" class="tack-pin-avatar-img" style="width:${t}px;height:${t}px;" onerror="this.outerHTML='<div class=\\'tack-pin-avatar-fallback\\' style=\\'width:${t}px;height:${t}px;background:${n};font-size:${r}px;\\'>${i}</div>'" />`:`<div class="tack-pin-avatar-fallback" style="width:${t}px;height:${t}px;background:${n};font-size:${r}px;">${i}</div>`}renderStackedAvatar(e,t){let i=p(e.name),n=P(e.name),r=Math.round(t*.38);return e.avatar_url?`<img src="${e.avatar_url}" alt="${i}" class="tack-pin-avatar-img" style="width:${t}px;height:${t}px;" onerror="this.outerHTML='<div class=\\'tack-pin-avatar-fallback\\' style=\\'width:${t}px;height:${t}px;background:${n};font-size:${r}px;\\'>${i}</div>'" />`:`<div class="tack-pin-avatar-fallback" style="width:${t}px;height:${t}px;background:${n};font-size:${r}px;">${i}</div>`}createPin(e){let t={element:null,confidence:"none",method:"none"},i=null;e.anchor?(t=this.anchoring.resolve(e.anchor),i=t.element):e.element_selector&&(i=document.querySelector(e.element_selector),i&&(t={element:i,confidence:"medium",method:"css"}));let n=document.createElement("div"),r=e.id===this.activeId,a=e.id===this.highlightedId,s=this.getUniqueAuthors(e),o=s.length>1;n.className=`tack-pin${e.resolved?" resolved":""}${r?" active":""}${a?" highlighted":""}${o?" multi-author":""}`,n.dataset.id=e.id,t.confidence==="low"&&n.classList.add("low-confidence");let c=s[0],d=this.formatTimeAgo(new Date(e.created_at)),h=this.escapeHtml(e.content),m=e.replies?.length||0,R=`<div class="tack-pin-preview">
+      <div class="tack-pin-preview-header">
+        <div class="tack-pin-preview-avatar">${this.renderInsetAvatar(c,28)}</div>
+        <div class="tack-pin-preview-meta">
+          <span class="tack-pin-preview-name">${this.escapeHtml(c.name)}</span>
+          <span class="tack-pin-preview-time">${d}</span>
+        </div>
+      </div>
+      <p class="tack-pin-preview-text">${h}</p>
+      ${m>0?`<span class="tack-pin-preview-replies">${m} ${m===1?"reply":"replies"}</span>`:""}
+    </div>`,g;if(o){let j=s.slice(0,3),F=s.length-3,f='<div class="tack-pin-shell"><div class="tack-pin-avatars">';j.forEach((B,N)=>{f+=`<div class="tack-pin-avatar-stacked" style="z-index:${N+1}">${this.renderStackedAvatar(B,24)}</div>`}),F>0&&(f+=`<div class="tack-pin-avatar-stacked tack-pin-avatar-overflow" style="z-index:4">+${F}</div>`),f+=`</div>${R}</div>`,g=f}else{let v=s[0];g=`<div class="tack-pin-shell">${this.renderInsetAvatar(v,32)}${R}</div>`}e.resolved&&(g+='<div class="tack-pin-check"></div>'),n.innerHTML=g,n.addEventListener("click",v=>{v.stopPropagation(),this.collapsePin(e.id,n),this.onClick(e.id,n)}),this.setupHoverListeners(n,e);let $={comment:e,element:n,targetElement:i,anchorResult:t};return this.positionPin($),n.style.left===""&&n.style.top===""?null:$}positionPin(e){let{comment:t,element:i,targetElement:n}=e,r=7,a=45;if(t.anchor&&n){let s=this.anchoring.calculatePinPosition(n,t.anchor);i.style.left=`${s.x-r}px`,i.style.top=`${s.y-a}px`;return}if(n){let s=n.getBoundingClientRect();i.style.left=`${s.left+window.scrollX-r}px`,i.style.top=`${s.top+window.scrollY-a}px`;return}if(t.x_percent!==null&&t.y_percent!==null){let s=t.x_percent/100*document.documentElement.scrollWidth,o=t.y_percent/100*document.documentElement.scrollHeight;i.style.left=`${s-r}px`,i.style.top=`${o-a}px`;return}i.style.display="none"}formatTimeAgo(e){let t=Math.floor((Date.now()-e.getTime())/1e3);return t<60?"just now":t<3600?`${Math.floor(t/60)}m ago`:t<86400?`${Math.floor(t/3600)}h ago`:t<604800?`${Math.floor(t/86400)}d ago`:e.toLocaleDateString()}escapeHtml(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}setupHoverListeners(e,t){e.addEventListener("mouseenter",()=>{let i=this.leaveTimers.get(t.id);i&&(clearTimeout(i),this.leaveTimers.delete(t.id));let n=window.setTimeout(()=>{this.expandPin(t.id,e),this.hoverTimers.delete(t.id)},150);this.hoverTimers.set(t.id,n)}),e.addEventListener("mouseleave",()=>{let i=this.hoverTimers.get(t.id);i&&(clearTimeout(i),this.hoverTimers.delete(t.id));let n=window.setTimeout(()=>{this.collapsePin(t.id,e),this.leaveTimers.delete(t.id)},120);this.leaveTimers.set(t.id,n)})}expandPin(e,t){if(t.classList.contains("active"))return;if(this.currentlyExpanded&&this.currentlyExpanded!==e){let n=this.pins.get(this.currentlyExpanded);n&&n.element.classList.remove("expanded","expand-left")}this.currentlyExpanded=e;let i=t.getBoundingClientRect();window.innerWidth-i.left<300?t.classList.add("expand-left"):t.classList.remove("expand-left"),t.classList.add("expanded")}collapsePin(e,t){t.classList.remove("expanded","expand-left"),this.currentlyExpanded===e&&(this.currentlyExpanded=null)}setActive(e){this.activeId=e,this.pins.forEach((t,i)=>{t.element.classList.toggle("active",i===e)})}highlight(e){this.highlightedId=e,this.pins.forEach((t,i)=>{t.element.classList.toggle("highlighted",i===e)}),setTimeout(()=>{this.highlightedId=null,this.pins.forEach(t=>{t.element.classList.remove("highlighted")})},2e3)}show(){this.pinsContainer.classList.add("visible")}hide(){this.pinsContainer.classList.remove("visible")}destroy(){this.hoverTimers.forEach(e=>clearTimeout(e)),this.leaveTimers.forEach(e=>clearTimeout(e)),this.resizeObserver&&this.resizeObserver.disconnect(),this.repositionRAF&&cancelAnimationFrame(this.repositionRAF),window.removeEventListener("scroll",this.boundScheduleReposition),window.removeEventListener("resize",this.boundScheduleReposition)}};var T=class{constructor(e,t){this.currentComment=null;this.currentUser=null;this.visible=!1;this.editing=!1;this.dropdownOpen=!1;this.container=e,this.callbacks=t,this.card=document.createElement("div"),this.card.className="tack-card",this.card.setAttribute("role","dialog"),this.card.setAttribute("aria-label","Comment details"),this.container.appendChild(this.card),this.card.addEventListener("mousedown",i=>i.stopPropagation()),this.card.addEventListener("click",i=>i.stopPropagation()),this.boundOnMouseDown=this.onDocumentMouseDown.bind(this),this.boundOnKeyDown=this.onKeyDown.bind(this)}setUser(e){this.currentUser=e}show(e,t){if(this.visible&&this.currentComment?.id===e.id){this.hide();return}this.currentComment=e,this.visible=!0,this.editing=!1,this.dropdownOpen=!1,this.renderCard(e),this.positionNear(t),this.card.classList.add("visible"),this.attachListeners(),document.addEventListener("mousedown",this.boundOnMouseDown,!0),document.addEventListener("keydown",this.boundOnKeyDown)}hide(){this.visible&&(this.visible=!1,this.currentComment=null,this.editing=!1,this.dropdownOpen=!1,this.card.classList.remove("visible"),document.removeEventListener("mousedown",this.boundOnMouseDown,!0),document.removeEventListener("keydown",this.boundOnKeyDown),this.callbacks.onClose())}isVisible(){return this.visible}updateComment(e){!this.visible||this.currentComment?.id!==e.id||(this.currentComment=e,this.renderCard(e),this.attachListeners())}onDocumentMouseDown(e){this.card.contains(e.target)||e.composedPath().includes(this.card)||this.hide()}onKeyDown(e){if(e.key==="Escape"){if(this.dropdownOpen){this.dropdownOpen=!1,this.renderCard(this.currentComment),this.attachListeners();return}if(this.editing){this.editing=!1,this.renderCard(this.currentComment),this.attachListeners();return}e.preventDefault(),this.hide()}}positionNear(e){let t=e.getBoundingClientRect(),i=320,n=8,r=document.body.classList.contains("tack-panel-open")?360:0,a=window.innerWidth-r-16,s=t.right+n+window.scrollX;s+i>a+window.scrollX&&(s=t.left-i-n+window.scrollX),s=Math.max(16,s);let o=t.top+window.scrollY,c=window.innerHeight+window.scrollY-16,d=300;o+d>c&&(o=c-d),o=Math.max(16+window.scrollY,o),this.card.style.left=`${s}px`,this.card.style.top=`${o}px`}isOwnComment(e){return this.currentUser?.id&&e.user_id?this.currentUser.id===e.user_id:(localStorage.getItem("tack_author_name")||"")===e.author_name}renderCard(e){let t=e.replies||[],i=localStorage.getItem("tack_author_name")||"Anonymous",n=`
+      <div class="tack-card-title-bar">
+        <span class="tack-card-title">Comment</span>
+        <div class="tack-card-title-actions">
+          <button class="tack-card-resolve-icon ${e.resolved?"resolved":""}" data-id="${e.id}" title="${e.resolved?"Unresolve":"Resolve"}" aria-label="${e.resolved?"Unresolve comment":"Resolve comment"}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+              <polyline points="22 4 12 14.01 9 11.01"/>
+            </svg>
+          </button>
+          <button class="tack-card-close-btn" title="Close" aria-label="Close comment">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+      </div>`;e.resolved&&(n+=`
+      <div class="tack-card-resolved-banner">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+        Resolved by ${this.escapeHtml(e.author_name)}
+      </div>`),n+=this.renderCommentRow(e,!0),n+='<div class="tack-card-divider"></div>',t.length>0&&(t.forEach((r,a)=>{n+=this.renderCommentRow(r,!1),a<t.length-1&&(n+='<div class="tack-card-divider"></div>')}),n+='<div class="tack-card-divider"></div>'),n+=`
+      <div class="tack-card-reply-bar">
+        <div class="tack-card-reply-bar-avatar-wrap">${u(i,this.currentUser?.avatar_url||null,24)}</div>
+        <div class="tack-card-reply-bar-input-wrap">
+          <input type="text" class="tack-card-reply-bar-input" placeholder="Reply\u2026" data-parent-id="${e.id}" />
+          <button class="tack-card-reply-bar-send" data-parent-id="${e.id}">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="19" x2="12" y2="5"/>
+              <polyline points="5 12 12 5 19 12"/>
+            </svg>
+          </button>
+        </div>
+      </div>`,this.card.innerHTML=n}renderCommentRow(e,t){let i=this.formatTimeAgo(new Date(e.created_at)),n=t&&this.isOwnComment(e),r=`<div class="tack-card-row${t?" main":""}" data-comment-id="${e.id}">`;return r+=`
+      <div class="tack-card-row-header">
+        <div class="tack-card-row-avatar-wrap">${u(e.author_name,e.author_avatar_url,28)}</div>
+        <div class="tack-card-row-meta">
+          <span class="tack-card-row-author">${this.escapeHtml(e.author_name)}</span>
+          ${this.editing&&t?'<span class="tack-card-editing-badge">Editing</span>':""}
+          <span class="tack-card-row-time">\xB7 ${i}</span>
+        </div>
+        ${n?`<button class="tack-card-more-btn" data-comment-id="${e.id}">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/>
+          </svg>
+        </button>`:""}
+      </div>`,n&&this.dropdownOpen&&(r+=`
+      <div class="tack-card-dropdown">
+        <button class="tack-card-dropdown-item" data-action="edit" aria-label="Edit comment">Edit Comment</button>
+        <button class="tack-card-dropdown-item delete" data-action="delete" aria-label="Delete comment">Delete Comment</button>
+      </div>`),t&&e.screenshot_url&&(r+=`<img src="${e.screenshot_url}" class="tack-card-row-screenshot" alt="Screenshot" />`),this.editing&&t?r+=`
+      <div class="tack-card-edit-wrap">
+        <textarea class="tack-card-edit-textarea">${this.escapeHtml(e.content)}</textarea>
+        <div class="tack-card-edit-actions">
+          <button class="tack-card-edit-cancel">Cancel</button>
+          <button class="tack-card-edit-save">Save</button>
+        </div>
+      </div>`:r+=`<div class="tack-card-row-body">${this.escapeHtml(e.content)}</div>`,r+="</div>",r}attachListeners(){this.card.querySelector(".tack-card-close-btn")?.addEventListener("click",t=>{t.stopPropagation(),this.hide()}),this.card.querySelector(".tack-card-resolve-icon")?.addEventListener("click",t=>{t.stopPropagation(),this.currentComment&&this.callbacks.onResolve(this.currentComment.id,!this.currentComment.resolved)}),this.card.querySelector(".tack-card-more-btn")?.addEventListener("click",t=>{t.stopPropagation(),this.dropdownOpen=!this.dropdownOpen,this.renderCard(this.currentComment),this.attachListeners()}),this.card.querySelectorAll(".tack-card-dropdown-item").forEach(t=>{t.addEventListener("click",i=>{i.stopPropagation();let n=t.dataset.action;if(n==="edit"){this.dropdownOpen=!1,this.editing=!0,this.renderCard(this.currentComment),this.attachListeners();let r=this.card.querySelector(".tack-card-edit-textarea");r?.focus(),r?.setSelectionRange(r.value.length,r.value.length)}else n==="delete"&&(this.dropdownOpen=!1,this.currentComment&&(this.callbacks.onDelete(this.currentComment.id),this.hide()))})}),this.card.querySelector(".tack-card-edit-cancel")?.addEventListener("click",t=>{t.stopPropagation(),this.editing=!1,this.renderCard(this.currentComment),this.attachListeners()}),this.card.querySelector(".tack-card-edit-save")?.addEventListener("click",t=>{t.stopPropagation(),this.saveEdit()}),this.card.querySelector(".tack-card-edit-textarea")?.addEventListener("keydown",t=>{let i=t;i.key==="Enter"&&(i.metaKey||i.ctrlKey)&&(i.preventDefault(),this.saveEdit())}),this.card.querySelector(".tack-card-reply-bar-input")?.addEventListener("keydown",t=>{let i=t;i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),this.submitReply())}),this.card.querySelector(".tack-card-reply-bar-send")?.addEventListener("click",t=>{t.stopPropagation(),this.submitReply()})}saveEdit(){if(!this.currentComment)return;let t=this.card.querySelector(".tack-card-edit-textarea")?.value.trim();t&&(this.editing=!1,this.callbacks.onEdit(this.currentComment.id,t))}submitReply(){if(!this.currentComment)return;let e=this.card.querySelector(".tack-card-reply-bar-input"),t=e?.value.trim();t&&(this.callbacks.onReply(this.currentComment.id,t),e.value="")}formatTimeAgo(e){let t=Math.floor((Date.now()-e.getTime())/1e3);return t<60?"just now":t<3600?`${Math.floor(t/60)}m ago`:t<86400?`${Math.floor(t/3600)}h ago`:t<604800?`${Math.floor(t/86400)}d ago`:e.toLocaleDateString()}escapeHtml(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}};var S=class{constructor(e,t,i,n){this.ws=null;this.reconnectAttempts=0;this.maxReconnectAttempts=5;this.heartbeatInterval=null;this.supabaseUrl=e,this.supabaseKey=t,this.versionId=i,this.callback=n}connect(){let e=this.supabaseUrl.replace("https://","wss://")+"/realtime/v1/websocket",t=new URLSearchParams({apikey:this.supabaseKey,vsn:"1.0.0"});this.ws=new WebSocket(`${e}?${t}`),this.ws.onopen=()=>{this.reconnectAttempts=0,this.subscribe()},this.ws.onmessage=i=>{let n=JSON.parse(i.data);this.handleMessage(n)},this.ws.onclose=()=>{this.attemptReconnect()},this.ws.onerror=i=>{console.error("[Tack] Realtime error:",i)}}subscribe(){if(!this.ws)return;let e={topic:"realtime:public:comments",event:"phx_join",payload:{config:{postgres_changes:[{event:"*",schema:"public",table:"comments",filter:`version_id=eq.${this.versionId}`}]}},ref:"1"};this.ws.send(JSON.stringify(e)),this.startHeartbeat()}handleMessage(e){if(e.event==="postgres_changes"&&e.payload?.data){let{type:t,record:i}=e.payload.data,n=t.toUpperCase();this.callback(n,i)}}startHeartbeat(){this.heartbeatInterval&&clearInterval(this.heartbeatInterval),this.heartbeatInterval=setInterval(()=>{this.ws?.readyState===WebSocket.OPEN&&this.ws.send(JSON.stringify({topic:"phoenix",event:"heartbeat",payload:{},ref:Date.now().toString()}))},3e4)}attemptReconnect(){if(this.reconnectAttempts>=this.maxReconnectAttempts){console.error("[Tack] Max reconnect attempts reached");return}this.reconnectAttempts++;let e=Math.min(1e3*Math.pow(2,this.reconnectAttempts),3e4);setTimeout(()=>{console.log(`[Tack] Reconnecting... (attempt ${this.reconnectAttempts})`),this.connect()},e)}disconnect(){this.heartbeatInterval&&(clearInterval(this.heartbeatInterval),this.heartbeatInterval=null),this.ws&&(this.ws.close(),this.ws=null)}};var A=class{constructor(e,t,i){this.ws=null;this.currentUser=null;this.pagePath="";this.users=new Map;this.onPresenceChange=null;this.heartbeatTimer=null;this.reconnectAttempts=0;this.joined=!1;this.ref=1;this.supabaseUrl=e,this.supabaseKey=t,this.projectId=i}join(e){this.currentUser=e,this.connect()}leave(){this.joined=!1,this.currentUser=null,this.users.clear(),this.heartbeatTimer&&(clearInterval(this.heartbeatTimer),this.heartbeatTimer=null),this.ws&&(this.ws.close(),this.ws=null)}updatePagePath(e){this.pagePath=e,this.joined&&this.ws?.readyState===WebSocket.OPEN&&this.trackPresence()}setOnPresenceChange(e){this.onPresenceChange=e}connect(){let e=this.supabaseUrl.replace("https://","wss://")+"/realtime/v1/websocket",t=new URLSearchParams({apikey:this.supabaseKey,vsn:"1.0.0"});this.ws=new WebSocket(`${e}?${t}`),this.ws.onopen=()=>{this.reconnectAttempts=0,this.joinChannel()},this.ws.onmessage=i=>{try{let n=JSON.parse(i.data);this.handleMessage(n)}catch{}},this.ws.onclose=()=>{this.currentUser&&this.attemptReconnect()},this.ws.onerror=()=>{}}nextRef(){return(this.ref++).toString()}joinChannel(){if(!this.ws||this.ws.readyState!==WebSocket.OPEN)return;let e=`realtime:presence:${this.projectId}`;this.ws.send(JSON.stringify({topic:e,event:"phx_join",payload:{config:{presence:{key:this.currentUser.id}}},ref:this.nextRef()})),this.startHeartbeat(),setTimeout(()=>{this.joined=!0,this.trackPresence()},200)}trackPresence(){if(!this.ws||this.ws.readyState!==WebSocket.OPEN||!this.currentUser)return;let e=`realtime:presence:${this.projectId}`;this.ws.send(JSON.stringify({topic:e,event:"presence",payload:{type:"presence",event:"track",payload:{user_id:this.currentUser.id,name:this.currentUser.name,avatar_url:this.currentUser.avatar_url,page_path:this.pagePath,online_at:Date.now()}},ref:this.nextRef()}))}handleMessage(e){if(e.event==="presence_state"){this.users.clear();let t=e.payload||{};for(let i of Object.keys(t)){let n=t[i]?.metas;if(n?.length>0){let r=n[0];this.users.set(i,{id:r.user_id||i,name:r.name||"Unknown",avatar_url:r.avatar_url||null})}}this.notifyChange()}else if(e.event==="presence_diff"){let{joins:t,leaves:i}=e.payload||{};if(t)for(let n of Object.keys(t)){let r=t[n]?.metas;if(r?.length>0){let a=r[0];this.users.set(n,{id:a.user_id||n,name:a.name||"Unknown",avatar_url:a.avatar_url||null})}}if(i)for(let n of Object.keys(i))this.users.delete(n);this.notifyChange()}}notifyChange(){let e=Array.from(this.users.values());this.onPresenceChange?.(e)}startHeartbeat(){this.heartbeatTimer&&clearInterval(this.heartbeatTimer),this.heartbeatTimer=setInterval(()=>{this.ws?.readyState===WebSocket.OPEN&&this.ws.send(JSON.stringify({topic:"phoenix",event:"heartbeat",payload:{},ref:this.nextRef()}))},3e4)}attemptReconnect(){if(this.reconnectAttempts>=5)return;this.reconnectAttempts++;let e=Math.min(1e3*Math.pow(2,this.reconnectAttempts),3e4);setTimeout(()=>{this.currentUser&&this.connect()},e)}};var L=class{constructor(e){this.container=null;this.shadowRoot=null;this.selector=null;this.form=null;this.panel=null;this.pins=null;this.card=null;this.realtime=null;this.presence=null;this.commentMode=!1;this.comments=[];this.currentVersion=null;this.currentPagePath="";this.originalPushState=null;this.originalReplaceState=null;this.pollingInterval=null;this.boundOnUrlChange=null;this.config={apiUrl:"https://tacktext.vercel.app/api",supabaseUrl:"https://etpavqvnpupqdxdptkhc.supabase.co",supabaseKey:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImV0cGF2cXZucHVwcWR4ZHB0a2hjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ4MzU4MzgsImV4cCI6MjA5MDQxMTgzOH0.GMSIuPmMaEkNhss_laSm_NchihN_KF9VyyEh5YH4Ru0",...e},this.api=new k(this.config.apiUrl,this.config.projectId),this.auth=new b(this.config.apiUrl)}async mount(){this.container=document.createElement("div"),this.container.id="tack-widget",this.shadowRoot=this.container.attachShadow({mode:"open"});let e=document.createElement("style");e.textContent=H(),this.shadowRoot.appendChild(e),this.injectPageStyles();let t=document.createElement("div");if(t.className="tack-wrapper",this.shadowRoot.appendChild(t),this.auth.setOnAuthChange(i=>{this.api.setAuthToken(i?this.auth.getSessionToken():null),this.form?.setUser(i),this.card?.setUser(i),this.panel?.setUser(i),i?this.joinPresence(i):(this.presence?.leave(),this.presence=null)}),await this.auth.init(),this.auth.isAuthenticated()&&this.api.setAuthToken(this.auth.getSessionToken()),this.api.setOnUnauthorized(()=>{this.auth.signOut(),this.showToast("Session expired. Please sign in again.")}),this.selector=new x(this.onElementSelected.bind(this)),this.form=new w(t,this.onCommentSubmit.bind(this)),this.form.setUser(this.auth.getUser()),this.form.setOnHide(()=>{this.panel?.isOpen()&&this.enableCommentMode()}),this.form.setOnSignIn(()=>this.signIn()),this.panel=new y(t,{onCommentClick:this.onCommentClick.bind(this),onResolve:this.onResolve.bind(this),onReply:this.onReply.bind(this),onClose:this.onPanelClose.bind(this),onAddComment:this.enableCommentMode.bind(this),onShare:this.onShare.bind(this)}),this.card=new T(t,{onResolve:this.onResolve.bind(this),onReply:this.onReply.bind(this),onEdit:this.onEdit.bind(this),onDelete:this.onDelete.bind(this),onClose:this.onCardClose.bind(this)}),this.card.setUser(this.auth.getUser()),this.panel.setUser(this.auth.getUser()),this.panel.setProjectId(this.config.projectId),this.pins=new E(t,this.onPinClick.bind(this)),this.createToggleButton(t),document.body.appendChild(this.container),await this.loadComments(),this.handleDeepLink(),this.subscribeToRealtime(),this.setupUrlChangeDetection(),this.auth.isAuthenticated()){let i=this.auth.getUser();this.joinPresence(i)}}joinPresence(e){!this.config.supabaseUrl||!this.config.supabaseKey||(this.presence?.leave(),this.presence=new A(this.config.supabaseUrl,this.config.supabaseKey,this.config.projectId),this.presence.setOnPresenceChange(t=>{this.panel?.renderPresence(t)}),this.presence.join(e),this.presence.updatePagePath(this.getPagePath()))}async signIn(){try{await this.auth.signIn()}catch(e){console.error("[Tack] Sign in failed:",e)}}getPagePath(){return window.location.pathname+window.location.search}setupUrlChangeDetection(){this.currentPagePath=this.getPagePath(),this.boundOnUrlChange=this.onUrlChange.bind(this),window.addEventListener("popstate",this.boundOnUrlChange),this.originalPushState=history.pushState.bind(history),this.originalReplaceState=history.replaceState.bind(history),history.pushState=(...e)=>{this.originalPushState(...e),this.onUrlChange()},history.replaceState=(...e)=>{this.originalReplaceState(...e),this.onUrlChange()}}onUrlChange(){let e=this.getPagePath();e!==this.currentPagePath&&(this.currentPagePath=e,this.presence?.updatePagePath(e),setTimeout(()=>{console.log("[Tack] URL changed, re-rendering pins after DOM settle"),this.pins?.render(this.comments),this.panel?.render(this.comments)},100))}createToggleButton(e){let t=document.createElement("button");t.className="tack-toggle",t.setAttribute("aria-label","Toggle comments"),t.setAttribute("aria-expanded","false"),t.innerHTML=`
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+      </svg>
+    `,t.addEventListener("click",()=>this.toggleCommentMode()),e.appendChild(t)}toggleCommentMode(){this.panel?.isOpen()?(this.panel.hide(),this.setPanelOpen(!1),this.pins?.hide(),this.disableCommentMode(),this.updateToggleAria(!1)):(this.panel?.show(),this.setPanelOpen(!0),this.pins?.show(),this.container?.classList.add("tack-active"),this.enableCommentMode(),this.updateToggleAria(!0))}enableCommentMode(){this.commentMode=!0,this.selector?.enable()}disableCommentMode(){this.commentMode=!1,this.selector?.disable(),this.form?.hide(),this.container?.classList.remove("tack-active")}onPanelClose(){this.setPanelOpen(!1),this.pins?.hide(),this.disableCommentMode(),this.updateToggleAria(!1)}onShare(){let e=new URL(window.location.href);e.searchParams.set("tack_open","true"),navigator.clipboard.writeText(e.toString()).then(()=>{this.showToast("Link copied to clipboard")}).catch(()=>{this.showToast("Failed to copy link")})}injectPageStyles(){let e="tack-page-styles";if(document.getElementById(e))return;let t=document.createElement("style");t.id=e,t.textContent=`
+      body.tack-panel-open {
+        margin-right: 360px !important;
+        transition: margin-right 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+      }
+      body {
+        transition: margin-right 250ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+    `,document.head.appendChild(t)}setPanelOpen(e){e?document.body.classList.add("tack-panel-open"):document.body.classList.remove("tack-panel-open")}updateToggleAria(e){let t=this.shadowRoot?.querySelector(".tack-toggle");t&&t.setAttribute("aria-expanded",String(e))}async loadComments(){try{let e=await this.api.getComments();this.comments=e.comments,this.currentVersion=e.version,this.pins?.render(this.comments),this.panel?.render(this.comments)}catch(e){console.error("[Tack] Failed to load comments:",e)}}onElementSelected(e){this.form?.isFormVisible()||(this.selector?.disable(),this.form?.show(e))}async onCommentSubmit(e){try{let t={content:e.content,element_selector:e.anchor.cssSelector,x_percent:e.anchor.relativeX*100,y_percent:e.anchor.relativeY*100,anchor:e.anchor,page_path:window.location.pathname+window.location.search,screenshot_data:e.screenshot};this.auth.isAuthenticated()||(t.author_name=e.authorName,t.author_email=e.authorEmail);let i=await this.api.createComment(t),n={...i,screenshot_url:i.screenshot_url||e.screenshot||null};this.comments.push(n),this.pins?.render(this.comments),this.panel?.render(this.comments),this.showToast("Comment added"),this.panel?.isOpen()&&this.enableCommentMode()}catch(t){console.error("[Tack] Failed to submit comment:",t),this.showToast("Failed to add comment")}}onCommentClick(e){this.pins?.highlight(e.id),this.scrollToComment(e)}onPinClick(e,t){let i=this.comments.find(n=>n.id===e);i&&(this.card?.show(i,t),this.pins?.setActive(e),this.pins?.highlight(e),this.panel?.isOpen()&&this.panel.scrollToComment(e))}onCardClose(){this.pins?.setActive(null)}async onResolve(e,t){try{await this.api.updateComment(e,{resolved:t});let i=this.comments.find(n=>n.id===e);i&&(i.resolved=t,this.pins?.render(this.comments),this.panel?.render(this.comments),this.card?.updateComment(i))}catch(i){console.error("[Tack] Failed to update comment:",i)}}async onReply(e,t){try{let i={content:t,parent_id:e,page_path:window.location.pathname+window.location.search};this.auth.isAuthenticated()||(i.author_name=localStorage.getItem("tack_author_name")||"Anonymous");let n=await this.api.createComment(i),r=this.comments.find(a=>a.id===e);r&&(r.replies=r.replies||[],r.replies.push(n),this.panel?.render(this.comments),this.card?.updateComment(r))}catch(i){console.error("[Tack] Failed to submit reply:",i)}}async onEdit(e,t){try{await this.api.updateComment(e,{content:t});let i=this.comments.find(n=>n.id===e);i&&(i.content=t,this.pins?.render(this.comments),this.panel?.render(this.comments),this.card?.updateComment(i))}catch(i){console.error("[Tack] Failed to edit comment:",i),this.showToast("Failed to edit comment")}}async onDelete(e){try{await this.api.deleteComment(e),this.comments=this.comments.filter(t=>t.id!==e),this.pins?.render(this.comments),this.panel?.render(this.comments),this.showToast("Comment deleted")}catch(t){console.error("[Tack] Failed to delete comment:",t),this.showToast("Failed to delete comment")}}scrollToComment(e){if(e.element_selector)document.querySelector(e.element_selector)?.scrollIntoView({behavior:"smooth",block:"center"});else if(e.x_percent!==null&&e.y_percent!==null){let t=e.x_percent/100*document.documentElement.scrollWidth,i=e.y_percent/100*document.documentElement.scrollHeight;window.scrollTo({left:t-window.innerWidth/2,top:i-window.innerHeight/2,behavior:"smooth"})}}handleDeepLink(){let e=new URLSearchParams(window.location.search);e.get("tack_open")==="true"&&(this.panel?.show(),this.setPanelOpen(!0),this.pins?.show(),this.container?.classList.add("tack-active"),this.updateToggleAria(!0));let i=e.get("tack_comment");if(i){let n=this.comments.find(r=>r.id===i);n&&(this.panel?.show(),this.setPanelOpen(!0),this.pins?.show(),this.container?.classList.add("tack-active"),this.updateToggleAria(!0),this.panel?.scrollToComment(i),this.pins?.highlight(i),this.scrollToComment(n))}}subscribeToRealtime(){if(!this.currentVersion||!this.config.supabaseUrl||!this.config.supabaseKey){this.pollingInterval=setInterval(()=>this.loadComments(),3e4);return}this.realtime=new S(this.config.supabaseUrl,this.config.supabaseKey,this.currentVersion.id,(e,t)=>{this.handleRealtimeEvent(e,t)}),this.realtime.connect()}handleRealtimeEvent(e,t){switch(e){case"INSERT":if(this.comments.some(r=>r.id===t.id)||this.comments.some(r=>r.replies?.some(a=>a.id===t.id)))return;if(t.parent_id){let r=this.comments.find(a=>a.id===t.parent_id);r&&(r.replies=r.replies||[],r.replies.push(t))}else this.comments.push(t);this.showToast(`New comment from ${t.author_name}`);break;case"UPDATE":let n=this.comments.find(r=>r.id===t.id);n&&Object.assign(n,t);break;case"DELETE":this.comments=this.comments.filter(r=>r.id!==t.id);break}this.pins?.render(this.comments),this.panel?.render(this.comments)}showToast(e){if(!this.shadowRoot)return;let t=document.createElement("div");t.className="tack-toast",t.textContent=e,t.style.cssText=`
+      position: fixed;
+      bottom: 80px;
+      right: 20px;
+      background: #1a1a1a;
+      color: white;
+      padding: 12px 20px;
+      border-radius: 8px;
+      font-size: 14px;
+      z-index: 10002;
+      animation: tack-toast-in 0.3s ease;
+    `,this.shadowRoot.appendChild(t),setTimeout(()=>{t.remove()},3e3)}destroy(){this.pollingInterval&&(clearInterval(this.pollingInterval),this.pollingInterval=null),this.selector?.disable(),this.realtime?.disconnect(),this.presence?.leave(),this.pins?.destroy(),this.boundOnUrlChange&&(window.removeEventListener("popstate",this.boundOnUrlChange),this.boundOnUrlChange=null),this.originalPushState&&(history.pushState=this.originalPushState),this.originalReplaceState&&(history.replaceState=this.originalReplaceState),document.getElementById("tack-page-styles")?.remove(),document.body.classList.remove("tack-panel-open"),this.container?.remove()}};var Me={init(l){let e=new L(l);return e.mount(),e}};export{Me as Tack,L as TackWidget};
+//# sourceMappingURL=index.mjs.map