@popgrids/embed 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -1,743 +1,876 @@
-"use strict";var di=Object.create;var Z=Object.defineProperty;var ht=Object.getOwnPropertyDescriptor;var pi=Object.getOwnPropertyNames;var gt=Object.getPrototypeOf,ci=Object.prototype.hasOwnProperty;var mi=Reflect.get;var ui=(n,a)=>{for(var t in a)Z(n,t,{get:a[t],enumerable:!0})},xt=(n,a,t,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of pi(a))!ci.call(n,r)&&r!==t&&Z(n,r,{get:()=>a[r],enumerable:!(e=ht(a,r))||e.enumerable});return n};var Q=(n,a,t)=>(t=n!=null?di(gt(n)):{},xt(a||!n||!n.__esModule?Z(t,"default",{value:n,enumerable:!0}):t,n)),fi=n=>xt(Z({},"__esModule",{value:!0}),n),i=(n,a,t,e)=>{for(var r=e>1?void 0:e?ht(a,t):a,s=n.length-1,o;s>=0;s--)(o=n[s])&&(r=(e?o(a,t,r):o(r))||r);return e&&r&&Z(a,t,r),r};var l=(n,a,t)=>mi(gt(n),t,a);var Di={};ui(Di,{PopApiProvider:()=>li,PopAuthJoin:()=>kt,PopAuthPanel:()=>Vt,PopAuthProvider:()=>zt,PopAuthSignIn:()=>Zt,PopAuthVerifyCode:()=>Ot,PopComment:()=>He,PopCommentBar:()=>se,PopCommentInput:()=>ve,PopCommentThread:()=>je,PopFeed:()=>Re,PopGrid:()=>Ge,PopGridProvider:()=>Ne,PopWidget:()=>ai});module.exports=fi(Di);var bt=require("@popgrids/ui"),Ct=require("lit"),wt=require("lit/decorators.js"),St=require("lit/directives/class-map.js");var X=require("lit");var vt="./swirling-ovals-ZDTHSA3L.gif";var yt=X.css`
+let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embed/auth/login`,r=`popgrids-auth`,i=`popup,width=480,height=640`,a=300*1e3,o=250,s=class extends Error{constructor(e){super(e),this.name=`PopupAuthError`}},c=(e,t,r)=>{let i=new URL(n,e);return i.searchParams.set(`publicKey`,t),i.searchParams.set(`returnOrigin`,r),i.toString()},l=(e,t)=>{let n=window.open(c(e,t,window.location.origin),r,i);if(!n)throw new s(`Popup blocked. Allow popups for this site and try again.`);return n},u=(e,t)=>typeof e==`object`&&!!e&&`type`in e&&`source`in e&&e.type===t&&e.source===`popgrids-embed`,ee=e=>{if(typeof e!=`object`||!e||!(`user`in e))return null;let t=e.user;if(typeof t!=`object`||!t||!(`id`in t))return null;let n=t;return typeof n.id==`string`?{id:n.id,name:typeof n.name==`string`?n.name:``,email:typeof n.email==`string`?n.email:``,image:typeof n.image==`string`?n.image:null}:null},d=(e,t,n)=>new Promise((r,i)=>{let c=new URL(e).origin,l=!1,d=!1,f=!1,p=(e,t)=>{if(!l){if(l=!0,_(),e===`resolve`){r();return}i(t??new s(`Sign-in failed`))}},m=e=>{if(e.origin===c){if(u(e.data,`popgrids:auth:success`)){d=!0;let t=ee(e.data);t&&n?.onAuthUser?.(t),p(`resolve`);return}u(e.data,`popgrids:auth:error`)&&(d=!0,p(`reject`,new s(typeof e.data==`object`&&e.data!==null&&`error`in e.data&&typeof e.data.error==`string`?e.data.error:`Sign-in failed`)))}},h=window.setInterval(()=>{t.closed&&(f||(f=!0,(async()=>{if(await new Promise(e=>window.setTimeout(e,o)),!(d||l)){if(n?.verifySignedIn&&await n.verifySignedIn()){p(`resolve`);return}p(`reject`,new s(`Sign-in was cancelled`))}})()))},300),g=window.setTimeout(()=>{try{t.close()}catch{}p(`reject`,new s(`Sign-in timed out`))},a),_=()=>{window.removeEventListener(`message`,m),clearInterval(h),clearTimeout(g)};window.addEventListener(`message`,m)}),f=async(e,t,n)=>{await d(e,l(e,t),n)},p=(0,e.signal)(null),m=(0,e.signal)(null),h=(0,e.signal)(!1),g=[0,150,400],_=[0,100,200,400,800,1500,2500,4e3];async function v(e,t,n=g){if(!e||!t)return p.value=null,!1;let r=new URL(`/api/v1/embed/grids/${t}/session`,e);r.searchParams.set(`pageUrl`,window.location.href);for(let e=0;e<n.length;e++){let t=n[e]??0;t>0&&await new Promise(e=>window.setTimeout(e,t));try{let e=await fetch(r,{credentials:`include`});if(!e.ok)continue;if(p.value=(await e.json()).user??null,p.value!==null)return!0}catch{}}return p.value=null,!1}async function y(e,t){m.value=null,h.value=!0;try{return await f(e,t,{onAuthUser:e=>{p.value=e},verifySignedIn:()=>v(e,t,_)}),p.value?!0:await v(e,t,_)}catch(e){return m.value=e instanceof Error?e.message:`Sign-in failed`,!1}finally{h.value=!1}}function te(){m.value=null}var b=new WeakMap,x=(e,t,n=t.constructor)=>{let r=b.get(e);r||(r=new Map,b.set(e,r)),r.set(n,t)},ne=e=>{b.delete(e)},re=(e,t)=>{let n=e;for(;n;){let e=b.get(n)?.get(t);if(e)return e;let r=n.getRootNode();if(!(r instanceof ShadowRoot))break;n=r.host}return null};function S(e){return function(t,n){let r=Symbol(`context_`+(e.name||`store`));Object.defineProperty(t,n,{get(){if(this[r])return this[r];let t=re(this,e);if(!t)throw console.error(`[Context] resolveStore failed! isConnected: ${this.isConnected}`,this),Error(`[Context] Store for key "${e.name||e}" not resolved on <${this.localName}>.`);return this[r]=t,t},enumerable:!0,configurable:!0})}}var ie=3e4,C=3,w=e=>{let t=typeof e.createdAt==`number`?e.createdAt:Date.parse(String(e.createdAt));return Number.isFinite(t)?t:0},T=(e,t)=>{let n=e?.previewCount??t;return n>0?n:C},E=class{constructor(t){this.previewCount=C,this.grid=(0,e.signal)(null),this.comments=(0,e.signal)([]),this.loading=(0,e.signal)(!0),this.error=(0,e.signal)(null),this.open=(0,e.signal)(!1),this.replyingTo=(0,e.signal)(null),this.editingCommentId=(0,e.signal)(null),this.scrollingCommentId=(0,e.signal)(null),this.socket=null,this.reconnectAttempt=0,this.reconnectTimer=null,this.disposed=!1,this.topLevelComments=(0,e.computed)(()=>this.comments.value.filter(e=>e.parentCommentId===null).sort((e,t)=>String(e.sortKey).localeCompare(String(t.sortKey)))),this.replyingToComment=(0,e.computed)(()=>{let e=this.replyingTo.value;return e?this.comments.value.find(t=>t.id===e)??null:null}),this.editingComment=(0,e.computed)(()=>{let e=this.editingCommentId.value;return e?this.comments.value.find(t=>t.id===e)??null:null}),this.previewComments=(0,e.computed)(()=>this.topLevelComments.value.slice(0,T(this.grid.value,this.previewCount))),this.previewAvatars=(0,e.computed)(()=>{let e=T(this.grid.value,this.previewCount),t=new Set,n=[],r=[...this.comments.value].sort((e,t)=>w(t)-w(e));for(let i of r){let r=i.author;if(!(!r?.id||t.has(r.id))&&(t.add(r.id),n.push(r),n.length>=e))break}return n.reverse()}),this.apiUrl=t.apiUrl,this.publicKey=t.publicKey,this.pageUrl=t.pageUrl,this.externalId=t.externalId?.trim()||null}identityParams(){let e=new URLSearchParams({pageUrl:this.pageUrl});return this.externalId&&e.set(`externalId`,this.externalId),e.toString()}repliesFor(e){let t=this.comments.value.find(t=>t.id===e);return t?this.comments.value.filter(n=>n.id!==e&&(n.sortKey===t.sortKey||n.sortKey.startsWith(t.sortKey+`/`))).sort((e,t)=>String(e.sortKey).localeCompare(String(t.sortKey))):[]}async load(){this.loading.value=!0,this.error.value=null;try{let e=await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}`,{credentials:`include`});if(!e.ok)return this.error.value=`There was a problem loading the PopGrid`,!1;let t=await e.json();this.grid.value=t.grid,this.connectRealtime();let n=await fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments?${this.identityParams()}`,{credentials:`include`});if(n.ok){let e=await n.json();this.comments.value=e.comments}return!0}catch{return console.error(`Failed to load PopGrid`),this.error.value=`There was a problem loading the PopGrid`,!1}finally{this.loading.value=!1}}async postComment(e,t){let n=async()=>fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments`,{method:`POST`,credentials:`include`,headers:{"Content-Type":`application/json`},body:JSON.stringify({body:e,pageUrl:this.pageUrl,externalId:this.externalId??void 0,parentCommentId:t})}),r=await n();if(r.status===401){if(!await y(this.apiUrl,this.publicKey))return null;r=await n()}if(!r.ok)return null;let i=await r.json();return this.upsertComment(i.comment),i.comment.author&&!p.value&&(p.value={id:i.comment.author.id,name:i.comment.author.name??``,email:``,image:i.comment.author.image}),i.comment}destroy(){this.disposed=!0,this.reconnectTimer&&=(clearTimeout(this.reconnectTimer),null),this.socket&&=(this.socket.onopen=null,this.socket.onmessage=null,this.socket.onclose=null,this.socket.onerror=null,this.socket.close(),null)}connectRealtime(){let e=this.grid.value?.connectUrl;if(!e||this.disposed)return;this.socket&&=(this.socket.onopen=null,this.socket.onmessage=null,this.socket.onclose=null,this.socket.onerror=null,this.socket.close(),null);let t=new URL(e,this.apiUrl);t.protocol=t.protocol===`https:`?`wss:`:`ws:`,t.searchParams.set(`pageUrl`,this.pageUrl),this.externalId&&t.searchParams.set(`externalId`,this.externalId);let n=new WebSocket(t.toString());this.socket=n,n.onopen=()=>{this.reconnectAttempt=0},n.onmessage=e=>{try{let t=JSON.parse(String(e.data));t.type===`comment.created`&&t.comment?this.upsertComment(t.comment):t.type===`comment.updated`&&t.comment&&this.updateCommentInList(t.comment)}catch{}},n.onclose=()=>{this.disposed||this.scheduleReconnect()},n.onerror=()=>{n.close()}}scheduleReconnect(){if(this.disposed||this.reconnectTimer)return;let e=Math.min(1e3*2**this.reconnectAttempt,ie);this.reconnectAttempt+=1,this.reconnectTimer=setTimeout(()=>{this.reconnectTimer=null,this.connectRealtime()},e)}upsertComment(e){this.comments.value.some(t=>t.id===e.id)||(this.comments.value=[...this.comments.value,e])}async editComment(e,t){let n=async()=>fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments/${e}`,{method:`PATCH`,credentials:`include`,headers:{"Content-Type":`application/json`},body:JSON.stringify({body:t,pageUrl:this.pageUrl,externalId:this.externalId??void 0})}),r=await n();if(r.status===401){if(!await y(this.apiUrl,this.publicKey))return null;r=await n()}if(!r.ok)return null;let i=await r.json();return this.updateCommentInList(i.comment),i.comment}async deleteComment(e){let t=async()=>fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments/${e}?${this.identityParams()}`,{method:`DELETE`,credentials:`include`}),n=await t();if(n.status===401){if(!await y(this.apiUrl,this.publicKey))return null;n=await t()}if(!n.ok)return null;let r=await n.json();return this.updateCommentInList(r.comment),r.comment}async flagComment(e){let t=async()=>fetch(`${this.apiUrl}/api/v1/embed/grids/${this.publicKey}/comments/${e}/flag?${this.identityParams()}`,{method:`POST`,credentials:`include`}),n=await t();if(n.status===401){if(!await y(this.apiUrl,this.publicKey))return!1;n=await t()}return n.ok}updateCommentInList(e){this.comments.value=this.comments.value.map(t=>t.id===e.id?e:t)}},ae=`@layer base{:host{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--pop-color-brand-midnight-100:oklch(96.58% .0161 262.75);--pop-color-brand-midnight-900:oklch(15% .03 255.43);--pop-color-brand-midnight-800:oklch(19% .05 255.43);--pop-color-brand-ocean-400:oklch(63% .19 255.43);--pop-color-brand-ocean-100:oklch(91% .05 255.43);--pop-color-brand-forest-900:oklch(38.66% .0698 180.75);--pop-color-brand-forest-700:oklch(45% .15 165.43);--pop-color-brand-forest-100:oklch(97% .04 165.43);--pop-color-brand-highlight-400:oklch(88% .25 105.43);--pop-color-brand-pumpkin-500:oklch(62% .18 45.43);--pop-color-brand-pumpkin-200:oklch(89% .08 45.43);--pop-color-brand-lemon-300:oklch(91% .12 85.43);--pop-color-brand-lemon-100:oklch(97% .04 85.43);--pop-duration-bouncy:1s;--pop-duration-card-highlight:.6s;--pop-duration-gentle:.833s;--pop-duration-menu:.4s;--pop-duration-pop-hover:.6s;--pop-duration-pop-text:.3s;--pop-duration-quick:.833s;--pop-duration-slow:1.167s;--pop-ease-bouncy:linear(0, .011, .045 1.3%, .184 2.7%, .911 7.4%, 1.153 9.4%, 1.301 11.2%, 1.342, 1.362 13%, 1.363, 1.355 14.4%, 1.306 16%, 1.028 21%, .939 23%, .89 24.7%, .876, .868 26.4%, .869, .882 29%, .907 30.5%, 1.014 35.9%, 1.038, 1.048 39.8% 41.1%, 1.043 42.5%, .995 49.3%, .987, .983 53.2%, .984 55.9%, 1.002 62.7%, 1.006 66.4%, .998 79.7%, 1);--pop-ease-card-highlight:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-gentle:linear(0, .007, .026, .059 4.5%, .106 6.3%, .209 9.5%, .558 19.3%, .658, .742, .812, .87, .918, .957, .986 41.6%, 1.007 45.3%, 1.021 49.4%, 1.027 54% 60.9%, 1.007 83.2%, 1);--pop-ease-menu:linear(0, .0034 0.81%, .0278 2.42%, .097 4.84%, .5361 15.32%, .655 18.55%, .7314, .7964 23.39%, .8662, .9185, .9561, .9818, .9984, 1.0083 42.74%, 1.014 46.77%, 1.0145 53.22%, 1.0053 68.55%, 1.0019 77.42%, .9998 100%);--pop-ease-pop-hover:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-pop-text:linear(0, .0051 0.99%, .0261, .0607 3.61%, .1192 5.26%, .2531 8.21%, .6509 16.1%, .7652 18.73%, .8512, .9232 23.33%, .9881 25.96%, 1.0305 28.26%, 1.0642 30.88%, 1.0782 32.53%, 1.089, 1.094 36.47%, 1.0942, 1.0896 41.07%, 1.0804 43.7%, 1.0354 53.23%, 1.0181 57.5%, 1.0061 61.44%, .9974 65.71%, .9925 70.31%, .991 75.9%, .9996 99.88%);--pop-ease-quick:linear(0, .008, .031 1.8%, .127 3.9%, .671 11.8%, .881 15.5%, .959, 1.02 19.2%, 1.064, 1.093 23.2%, 1.102, 1.108, 1.108, 1.104 28.7%, 1.089 31.4%, 1.038 38.1%, 1.016 41.5%, .999 45.4%, .99 49.6%, .989 55.3%, 1.001 74.9%, 1);--pop-ease-slow:linear(0, .005, .02 2%, .081 4.5%, .469 15.2%, .567, .65, .722 24.4%, .784, .835 31.1%, .878 34.9%, .914 39.1%, .942 43.8%, .964 49.1%, .979 55.4%, .989 62.4%, .995 71.1%, 1);--pop-shadow-xs:0px 1px 2px 0px #1018280d;--pop-shadow-sm:0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;--pop-shadow-md:0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;--pop-shadow-lg:0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808;--pop-shadow-xl:0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;--pop-shadow-2xl:0px 24px 48px -12px #1018282e;--pop-shadow-3xl:0px 32px 48px -12px #10182852;--pop-shadow-4xl:0px 24px 32px -12px #10182847;--pop-radius-none:0;--pop-radius-xxs:.125rem;--pop-radius-xs:.25rem;--pop-radius-sm:.375rem;--pop-radius-md:.5rem;--pop-radius-lg:.625rem;--pop-radius-xl:.75rem;--pop-radius-2xl:1rem;--pop-radius-3xl:1.25rem;--pop-radius-4xl:1.5rem;--pop-radius-full:9999px;--pop-radius:.625rem;--pop-background:oklch(100% 0 0);--pop-foreground:oklch(0% 0 0);--pop-card:oklch(100% 0 0);--pop-card-foreground:oklch(14.5% 0 0);--pop-popover:oklch(100% 0 0);--pop-popover-foreground:oklch(0% 0 0);--pop-primary:oklch(20.5% 0 0);--pop-primary-foreground:oklch(98.5% 0 0);--pop-secondary:oklch(97% 0 0);--pop-secondary-foreground:oklch(20.5% 0 0);--pop-muted:oklch(97% 0 0);--pop-muted-foreground:oklch(71.52% .0233 256.76);--pop-accent:oklch(97% 0 0);--pop-accent-foreground:oklch(20.5% 0 0);--pop-destructive:var(--color-error-600);--pop-border:oklch(11.01% .0763 264.05/.102);--pop-input:oklch(92.2% 0 0);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(64.6% .222 41.116);--pop-chart-2:oklch(60% .118 184.704);--pop-chart-3:oklch(39.8% .07 227.392);--pop-chart-4:oklch(82.8% .189 84.429);--pop-chart-5:oklch(76.9% .188 70.08);--pop-sidebar:oklch(98.5% 0 0);--pop-sidebar-foreground:oklch(14.5% 0 0);--pop-sidebar-primary:oklch(20.5% 0 0);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(97% 0 0);--pop-sidebar-accent-foreground:oklch(20.5% 0 0);--pop-sidebar-border:oklch(92.2% 0 0);--pop-sidebar-ring:oklch(70.8% 0 0);font-family:Inter,sans-serif;font-size:16px}@media (prefers-color-scheme:dark){:host{--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}}:host(.dark){--pop-background:oklch(15% .03 255.43);--pop-foreground:oklch(66% .006 255.43);--pop-card:oklch(20.5% 0 0);--pop-card-foreground:oklch(98.5% 0 0);--pop-popover:oklch(15% .03 255.43);--pop-popover-foreground:oklch(66% .006 255.43);--pop-primary:oklch(92.2% 0 0);--pop-primary-foreground:oklch(20.5% 0 0);--pop-secondary:oklch(26.9% 0 0);--pop-secondary-foreground:oklch(98.5% 0 0);--pop-muted:oklch(26.9% 0 0);--pop-muted-foreground:oklch(66% .006 255.43);--pop-accent:oklch(26.9% 0 0);--pop-accent-foreground:oklch(98.5% 0 0);--pop-destructive:var(--color-error-400);--pop-border:oklch(100% 0 0/.1);--pop-input:oklch(100% 0 0/.15);--pop-ring:oklch(62.3% .214 259.815);--pop-chart-1:oklch(48.8% .243 264.376);--pop-chart-2:oklch(69.6% .17 162.48);--pop-chart-3:oklch(76.9% .188 70.08);--pop-chart-4:oklch(62.7% .265 303.9);--pop-chart-5:oklch(64.5% .246 16.439);--pop-sidebar:oklch(20.5% 0 0);--pop-sidebar-foreground:oklch(98.5% 0 0);--pop-sidebar-primary:oklch(48.8% .243 264.376);--pop-sidebar-primary-foreground:oklch(98.5% 0 0);--pop-sidebar-accent:oklch(26.9% 0 0);--pop-sidebar-accent-foreground:oklch(98.5% 0 0);--pop-sidebar-border:oklch(100% 0 0/.1);--pop-sidebar-ring:oklch(55.6% 0 0)}*,:before,:after{box-sizing:inherit}html,body{margin:0;padding:0}svg{display:block}p{margin:0;padding:0}button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}}`,oe=`@layer components{.btn{text-align:center;cursor:pointer;border:0;border-radius:4px;justify-content:center;align-items:center;gap:.625rem;height:auto;padding:.625rem 1.25rem;transition:background-color .2s,color .2s;display:flex}.btn-link{border-radius:var(--pop-radius-xs,4px);cursor:pointer;background-color:#0000;border-style:solid;border-color:#0000;justify-content:center;align-items:center;gap:2px;font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.btn-link--size-sm{letter-spacing:-.08px;border-width:1px 2px;font-size:13px;line-height:18px}.btn-link--size-md{letter-spacing:0;border-width:1px 3px;font-size:14px;line-height:20px}.btn-link--size-lg{letter-spacing:0;border-width:1px 4px;font-size:16px;line-height:24px}.btn-link--theme-default{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link--theme-default.btn-link--primary{color:var(--pop-foreground)}.btn-link--theme-white{color:#fff}.btn-link--theme-black{color:#000}.btn-link--theme-default:hover,.btn-link--theme-black:hover{background-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent);border-color:color-mix(in srgb, var(--pop-foreground) 10%, transparent)}.btn-link--theme-default:not(.btn-link--primary):hover{color:var(--pop-foreground)}.btn-link--theme-white:hover{background-color:#ffffff29;border-color:#ffffff29}.btn-link:active{background-color:#0000;border-color:#0000}.btn-link--theme-default:not(.btn-link--primary):active{color:color-mix(in srgb, var(--pop-foreground) 50%, transparent)}.btn-link:focus-visible{background-color:var(--pop-ring,#155eef);border-color:var(--pop-ring,#155eef);outline:none;color:#fff!important}.btn-link:disabled,.btn-link.is-disabled{cursor:not-allowed;pointer-events:none;color:color-mix(in srgb, var(--pop-foreground) 35%, transparent)!important;background-color:#0000!important;border-color:#0000!important}.btn:focus-visible{outline-offset:2px;outline:2px solid}}`,se=`@layer components{.mask{-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mask-squircle{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M 0 80 C 0 14.12 14.12 0 80 0 C 145.88 0 160 14.12 160 80 C 160 145.88 145.88 160 80 160 C 14.12 160 0 145.88 0 80 Z'/%3e%3c/svg%3e")}}`,D=!1,O=new Set,k=null,A=null;function j(){if(typeof window>`u`||typeof document>`u`)return!1;let e=document.documentElement.classList.contains(`dark`)||document.body.classList.contains(`dark`),t=document.documentElement.classList.contains(`light`)||document.body.classList.contains(`light`);return e?!0:t?!1:(A||=window.matchMedia(`(prefers-color-scheme: dark)`),A.matches)}function M(){let e=j();e!==D&&(D=e,O.forEach(e=>{let t=D||!!e.closest(`.dark`);e.classList.toggle(`dark`,t)}))}var N=()=>{M()};function ce(e){if(typeof window>`u`||typeof document>`u`)return;O.size===0&&(D=j(),k=new MutationObserver(()=>{M()}),k.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}),k.observe(document.body,{attributes:!0,attributeFilter:[`class`]}),A=window.matchMedia(`(prefers-color-scheme: dark)`),A.addEventListener(`change`,N)),O.add(e);let t=D||!!e.closest(`.dark`);e.classList.toggle(`dark`,t)}function le(e){O.delete(e),O.size===0&&(k&&=(k.disconnect(),null),A&&=(A.removeEventListener(`change`,N),null))}function P(e){let t=new CSSStyleSheet;return t.replaceSync(e),t}var ue=P(ae),de=P(oe),fe=P(se),F=class extends HTMLElement{get styleSheets(){return[]}constructor(){super(),this.baseStyleSheets=[ue,de,fe],this._hasRendered=!1,this._disposables=[],this.events={},this.attachShadow({mode:`open`}),this.shadowRoot&&(this.shadowRoot.adoptedStyleSheets=this.styles)}attributeChangedCallback(e,t,n){if(t===n)return;let r=`on${e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}Changed`;typeof this[r]==`function`&&this[r](n,t)}addEffect(t){this._disposables.push((0,e.effect)(t))}connectedCallback(){ce(this),(0,e.untracked)(()=>{this.render(),this._bindEvents(),this.setupEffects()})}disconnectedCallback(){le(this),this._disposables.forEach(e=>e()),this._disposables=[]}_bindEvents(){let e=this.shadowRoot;e&&Object.keys(this.events).forEach(t=>{e.addEventListener(t,this)})}handleEvent(e){let t=this.events[e.type];t&&typeof this[t]==`function`&&this[t](e)}emit(e,t={}){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,...t}))}get styles(){return[...this.baseStyleSheets,...this.styleSheets]}setupEffects(){}render(){this.shadowRoot&&(this.shadowRoot.innerHTML=this.getTemplate(),this._hasRendered=!0)}hideElement(e,t,n=!0){if(!this.shadowRoot||!this._hasRendered)return;let r=this.shadowRoot.querySelector(e);if(!r){console.warn(`Element not found for selector: ${e}`);return}n?r.classList.toggle(`hidden`,t):r.classList.toggle(`invisible`,t)}setText(e,t){let n=this.shadowRoot?.querySelector(e);n&&n.textContent!==String(t)&&(n.textContent=String(t))}setAttr(e,t,n){let r=this.shadowRoot?.querySelector(e);r&&(n===null?r.removeAttribute(t):r.getAttribute(t)!==n&&r.setAttribute(t,n))}toggleClass(e,t,n){let r=this.shadowRoot?.querySelector(e);r&&r.classList.toggle(t,n)}getElement(e){return this.shadowRoot?.querySelector(e)??null}};function I(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var pe=P(`
   :host {
-    display: flex;
-    width: 100%;
+    display: block;
+    position: relative;
+
+    --pop-auth-border: var(--pop-border, rgba(0, 0, 32, 0.04));
+    --pop-auth-watermark: rgba(0, 0, 32, 0.4);
+    --pop-auth-btn: #000000;
+    --pop-auth-logo: rgba(0, 0, 32, 0.35);
+    --pop-auth-error: #dc2626;
   }
 
-  .auth-join {
-    background-image: url("${(0,X.unsafeCSS)(vt)}"), none;
-    background-color: lightgray;
-    background-position: 79% center;
-    background-size:
-      8.215% 59.149%,
-      auto;
-    background-repeat: no-repeat, repeat;
-    background-color: var(--color-surface-bg-default, #fff);
-    border: none;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    gap: var(--spacing-sm, 6px);
-    justify-content: flex-end;
-    padding: var(--spacing-xl, 16px) var(--spacing-md, 8px);
-    width: 100%;
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --pop-auth-border: var(--pop-border, rgba(255, 255, 255, 0.1));
+      --pop-auth-watermark: rgba(255, 255, 255, 0.4);
+      --pop-auth-btn: #ffffff;
+      --pop-auth-logo: rgba(255, 255, 255, 0.35);
+      --pop-auth-error: var(--pop-destructive, #f87171);
+    }
   }
 
-  .auth-join__actions {
-    color: var(--color-text-text-default, #000);
-    font-feature-settings:
-      "liga" off,
-      "clig" off;
-    display: flex;
-    padding: 0px var(--spacing-md, 8px);
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 600;
+  :host(.dark) {
+    --pop-auth-border: var(--pop-border, rgba(255, 255, 255, 0.1));
+    --pop-auth-watermark: rgba(255, 255, 255, 0.4);
+    --pop-auth-btn: #ffffff;
+    --pop-auth-logo: rgba(255, 255, 255, 0.35);
+    --pop-auth-error: var(--pop-destructive, #f87171);
+  }
+
+  .panel {
+    position: relative;
+    border-top: 1px solid var(--pop-auth-border);
+  }
+
+  .watermark {
+    position: absolute;
+    top: -16px;
+    left: 8px;
+    font-family: Inter, sans-serif;
+    font-size: 8px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: var(--pop-auth-watermark);
+    text-transform: uppercase;
+    backdrop-filter: blur(4px);
+    border-radius: 9999px;
+    padding: 2px 6px;
+    pointer-events: none;
   }
 
-  .auth-join__logo {
+  .actions {
     display: flex;
-    width: 75px;
-    height: 12px;
-    padding: 0px var(--spacing-none, 0px);
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    color: var(--color-text-text-default, #000);
-  }
-`;var _=class extends bt.PopElement{handleClick(){this.emit("pop-click")}render(){return Ct.html` <button
-      class=${(0,St.classMap)({"auth-join":!0})}
-      part="base"
-      type="button"
-      @click=${this.handleClick}
-    >
-      <div class="auth-join__actions">
-        Join the Conversation
-        <svg
-          class="auth-join__logo"
-          width="75"
-          height="12"
-          viewBox="0 0 75 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M4.58333 0.265686C1.0463 0.265686 0 2.5714 0 5.47711C0 6.55283 0.115741 7.6114 0.25 8.67426C0.300926 9.08997 0.282407 9.54854 0.365741 9.96426C0.583333 11.0571 1.69444 11.5628 2.77315 11.5628C4.25 11.5628 5.23148 10.7014 5.23148 9.3214C5.23148 8.52426 4.94907 8.0014 4.13426 7.69283C4.08333 7.67569 4.03241 7.66283 4.03241 7.59854C4.03241 7.4914 4.21759 7.41426 4.33333 7.41426C4.73148 7.41426 5.36111 7.78283 5.91204 7.78283C8.06944 7.78283 9.26389 5.86283 9.26389 4.06283C9.26389 1.44854 7.18518 0.265686 4.58333 0.265686ZM4.56481 5.91854C4.43056 5.91854 4.31481 5.8114 4.31481 5.68711C4.31481 5.51997 4.56481 5.39569 4.64815 5.25854C4.8287 4.94997 4.87963 4.42711 4.87963 4.07569C4.87963 3.65997 4.76389 2.89283 4.48148 2.58426C4.39815 2.49426 4.28241 2.44711 4.28241 2.32283C4.28241 2.19854 4.41667 2.0914 4.5463 2.0914C5.11111 2.0914 5.39352 3.62997 5.39352 4.02854C5.39352 4.45711 5.24537 5.91854 4.56481 5.91854Z"
-            fill="currentColor"
-          />
-          <path
-            d="M14.9259 0.527108C11.4074 0.527108 9.2963 2.83282 9.2963 5.99568C9.2963 9.15854 11.4028 11.4643 14.9259 11.4643C18.4491 11.4643 20.537 9.12854 20.537 5.99568C20.537 2.86282 18.412 0.527108 14.9259 0.527108ZM15.0787 9.89997C15.0232 9.96425 14.912 10.0843 14.7778 10.0843C14.6435 10.0843 14.5139 9.97711 14.5139 9.85282C14.5139 9.80568 14.9445 9.20568 15.0139 9.02139C15.2778 8.29711 15.3287 7.51282 15.3287 6.74568C15.3287 5.71711 15.1296 4.39282 14.4491 3.54854C14.3148 3.39425 13.9028 3.10282 13.9028 2.93568C13.9028 2.81139 14.0185 2.70425 14.1528 2.70425C14.2685 2.70425 14.3843 2.79854 14.4676 2.85854C15.5278 3.67282 15.8472 5.53282 15.8472 6.74568C15.8472 7.69711 15.8056 9.08568 15.0833 9.89568L15.0787 9.89997Z"
-            fill="currentColor"
-          />
-          <path
-            d="M25.375 0.265686C21.838 0.265686 20.7917 2.5714 20.7917 5.47711C20.7917 6.55283 20.9074 7.6114 21.0417 8.67426C21.0926 9.08997 21.0741 9.54854 21.1574 9.96426C21.375 11.0571 22.4861 11.5628 23.5648 11.5628C25.0417 11.5628 26.0231 10.7014 26.0231 9.3214C26.0231 8.52426 25.7407 8.0014 24.9259 7.69283C24.875 7.67569 24.8241 7.66283 24.8241 7.59854C24.8241 7.4914 25.0092 7.41426 25.125 7.41426C25.5231 7.41426 26.1528 7.78283 26.7037 7.78283C28.8611 7.78283 30.0555 5.86283 30.0555 4.06283C30.0555 1.44854 27.9815 0.265686 25.375 0.265686ZM25.3611 5.91854C25.2268 5.91854 25.1111 5.8114 25.1111 5.68711C25.1111 5.51997 25.3611 5.39569 25.4444 5.25854C25.625 4.94997 25.6759 4.42711 25.6759 4.07569C25.6759 3.65997 25.5602 2.89283 25.2778 2.58426C25.1944 2.49426 25.0787 2.44711 25.0787 2.32283C25.0787 2.19854 25.213 2.0914 25.3426 2.0914C25.9074 2.0914 26.1898 3.62997 26.1898 4.02854C26.1898 4.45711 26.0417 5.91854 25.3611 5.91854Z"
-            fill="currentColor"
-          />
-          <path
-            d="M37.3843 4.81284C36.1898 4.81284 34.5278 5.31855 34.5278 6.64284C34.5278 7.39713 35.125 8.5157 36.0741 8.5157C36.6713 8.5157 37.0556 8.08713 37.2546 8.08713C37.3056 8.08713 37.3519 8.11713 37.3519 8.16427C37.3519 8.60998 36.4213 8.81141 36.0556 8.81141C34.7778 8.81141 34.0972 7.7957 34.0972 6.71998C34.0972 5.39998 35.4398 4.38427 36.8009 4.38427C37.1991 4.38427 37.6158 4.49141 38.0139 4.49141C39.1945 4.49141 40.0371 3.50998 40.0371 2.46427C40.0371 0.728554 37.8148 0.329982 36.3333 0.329982C32.3982 0.329982 30.1065 2.6957 30.1065 6.29141C30.1065 9.61284 31.9676 11.73 35.6528 11.73C38.0417 11.73 40.6482 10.7786 40.6482 8.19427C40.6482 6.42855 39.4028 4.81284 37.3796 4.81284H37.3843Z"
-            fill="currentColor"
-          />
-          <path
-            d="M48.3611 7.42711C48.0602 7.42711 47.8148 7.53426 47.5648 7.53426C47.5139 7.53426 47.5 7.48711 47.5 7.45712C47.5 7.34997 47.5509 7.30283 47.6342 7.27283C47.9167 7.18283 48.2176 7.11854 48.4954 6.99426C49.7592 6.4414 50.5046 5.45569 50.5046 4.15283C50.5046 1.79997 48.3287 0.372829 45.9398 0.372829C45.0741 0.372829 44.2315 0.604257 43.5 0.972829C41.5092 1.9714 41.125 3.40283 41.0092 5.35283C40.9583 6.11997 40.9583 6.8914 40.9583 7.65854V9.51854C40.9583 10.6843 41.787 11.6228 43.0972 11.6228C44.0416 11.6228 44.8889 10.9928 45.1065 10.1614C45.2222 9.66854 45.1574 9.08569 45.1574 8.60997C45.1574 8.56283 45.1759 8.54997 45.2222 8.54997C45.2685 8.54997 45.3241 8.57997 45.3565 8.59711C45.9398 9.90426 46.7361 11.5628 48.5417 11.5628C49.787 11.5628 50.8148 10.7485 50.8148 9.56569C50.8148 8.38283 49.6204 7.4314 48.3565 7.4314L48.3611 7.42711ZM45.6574 5.91854C45.5231 5.91854 45.4074 5.8114 45.4074 5.68711C45.4074 5.51997 45.6574 5.39569 45.7407 5.25854C45.9213 4.94997 45.9722 4.42711 45.9722 4.07569C45.9722 3.65997 45.8565 2.89283 45.5741 2.58426C45.4907 2.49426 45.3935 2.44711 45.3935 2.32283C45.3935 2.19854 45.5092 2.0914 45.6435 2.0914C46.2083 2.0914 46.4907 3.62997 46.4907 4.02854C46.4907 4.45711 46.3565 5.91854 45.662 5.91854H45.6574Z"
-            fill="currentColor"
-          />
-          <path
-            d="M54.8056 0.865677C54.4074 0.621391 53.8426 0.497105 53.3611 0.497105C52.3148 0.497105 51.4167 1.26425 51.3009 2.21996C51.2685 2.49853 51.2824 2.75996 51.2824 3.05139V5.66139L51.2315 8.41282V9.77996C51.2315 10.8557 52.2269 11.7 53.375 11.7C54.2222 11.7 55.1528 11.2071 55.4676 10.47C55.6482 10.0542 55.6667 9.47139 55.6667 9.02568V7.82568L55.6852 5.42996V3.03425C55.6852 2.14282 55.6667 1.43568 54.8056 0.865677Z"
-            fill="currentColor"
-          />
-          <path
-            d="M58.9445 0.402828C57.25 0.402828 56.4028 1.13997 56.4028 2.7214V3.3514L56.4213 4.59426V5.22426C56.4213 5.69997 56.4213 6.14568 56.4028 6.6214C56.3704 7.1914 56.287 7.75711 56.287 8.34426C56.287 10.4957 57.4815 11.5414 59.7917 11.5414C63.3426 11.5414 65.75 10.1271 65.75 6.60854C65.75 2.36568 63.5417 0.398542 58.9445 0.398542V0.402828ZM60.537 8.9014C60.4028 8.9014 60.287 8.79426 60.287 8.66997C60.287 8.62283 60.3056 8.59283 60.338 8.54568C60.7685 7.88568 60.8843 6.96426 60.8843 6.20997C60.8843 5.50283 60.8009 4.45711 60.3194 3.90426C60.2361 3.77997 60.0695 3.68997 60.0695 3.53569C60.0695 3.4114 60.1852 3.30426 60.3194 3.30426C60.5694 3.30426 60.9167 3.88711 61.0185 4.08854C61.3333 4.76569 61.3843 5.50283 61.3843 6.22283C61.3843 6.66854 61.1343 8.89711 60.537 8.89711V8.9014Z"
-            fill="currentColor"
-          />
-          <path
-            d="M73.5046 5.85855C72.5417 5.78141 71.162 5.47284 70.4167 4.88998C70.3194 4.81284 70.1528 4.7057 70.1528 4.56855C70.1528 4.52141 70.1713 4.44427 70.2361 4.44427C70.4167 4.44427 71.5787 5.3057 72.5787 5.3057C73.8426 5.3057 75 4.39713 75 3.20141C75 1.23427 72.1806 0.437125 70.4676 0.437125C67.9259 0.437125 66.037 1.95855 66.037 4.37141C66.037 4.89427 66.1204 5.61427 66.537 6.01713C66.7361 6.21855 67.0694 6.21855 67.3333 6.21855C68.3287 6.21855 69.5926 6.50998 70.1204 7.35427C70.1713 7.43141 70.2176 7.5557 70.2176 7.6457C70.2176 7.6757 70.2176 7.72284 70.1852 7.7057C70.088 7.6757 70.0046 7.59855 69.9352 7.53855C69.3519 7.0157 68.5555 6.49284 67.713 6.49284C66.4491 6.49284 66.0046 7.6157 66.0046 8.59713C66.0046 10.5771 67.9306 11.67 69.8889 11.67C72.213 11.67 75 10.2557 75 7.84284C75 6.95141 74.5833 5.95284 73.5046 5.86284V5.85855Z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-    </button>`}};_.styles=[l(_,_,"styles"),yt],_=i([(0,wt.customElement)("pop-auth-join")],_);var kt=_;var _t=require("@lit/context"),Et=require("@popgrids/ui"),J=require("lit"),H=require("lit/decorators.js"),Tt=require("lit/directives/class-map.js"),Mt=require("lit/directives/if-defined.js");var jt=require("@lit/context"),E=(0,jt.createContext)(Symbol("pop-auth-context"));var Dt=require("lit"),At=Dt.css`
-  :host {
-    display: flex;
-    width: 100%;
+    justify-content: space-between;
+    padding: 16px;
   }
 
-  .auth-panel {
-    display: flex;
-    border-top: 1px solid var(--color-surface-alpha-singular-alpha-input-bar, rgba(0, 0, 32, 0.04));
-    flex-direction: column;
-    height: 50px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transition: height 150ms ease-in-out;
-    width: 100%;
-    overflow: hidden;
-    background-color: var(--color-surface-bg-default, #fff);
-    backdrop-filter: blur(var(--blur-2xl));
+  .join-btn {
+    font-family: Inter, sans-serif;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--pop-auth-btn);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    letter-spacing: -0.08px;
+    line-height: 18px;
   }
 
-  .auth-panel--is-open {
-    /* Dynamic height will be set via JS */
-    /* The max-height provides a constraint */
-    max-height: 340px;
-    transition: height var(--duration-quick) var(--ease-quick);
+  .join-btn:disabled {
+    opacity: 0.6;
+    cursor: default;
   }
 
-  .auth-panel__content {
-    position: relative;
-    top: 0;
-    left: 0;
-    right: 0;
+  .logo {
+    font-family: Inter, sans-serif;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    color: var(--pop-auth-logo);
+    text-transform: uppercase;
+  }
 
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+  .error {
+    padding: 0 16px 12px;
+    font-family: Inter, sans-serif;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--pop-auth-error);
+    text-align: center;
   }
-`;var u=class extends Et.PopElement{constructor(){super(...arguments);this._email="";this._open=!1;this._resizeObserver=null;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._authPanel)&&(this._open=!1)}}handleJoinClick(){this._open=!0}async connectedCallback(){super.connectedCallback(),await this.updateComplete,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown),this.setupResizeObserver()}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),this._resizeObserver?.disconnect(),super.disconnectedCallback()}setupResizeObserver(){this._resizeObserver=new ResizeObserver(t=>{requestAnimationFrame(()=>{for(let e of t)if(e.target===this._authPanelContent){let r=this._authPanelContent.offsetHeight;this._open?this._authPanel.style.height=`${r}px`:this._authPanel.style.height="50px"}})}),this._authPanelContent&&this._resizeObserver.observe(this._authPanelContent)}updated(t){super.updated(t),(t.has("_open")||t.has("authContext"))&&(t.has("_open")&&!this._open?this._authPanel.style.height="50px":this._open&&this._authPanelContent&&requestAnimationFrame(()=>{let e=this._authPanelContent.offsetHeight;this._authPanel.style.height=`${e}px`}),!this._resizeObserver&&this._authPanelContent&&this.setupResizeObserver())}handleSignInSuccess(t){t.detail?.email&&(this._email=t.detail.email)}handleCodeVerificationSuccess(){this._open=!1}renderAuthenticated(){return J.html`Authenticated`}renderJoinButton(){return J.html`<pop-auth-join @pop-click=${this.handleJoinClick}></pop-auth-join>`}renderSignInForm(){return J.html`<pop-auth-sign-in @pop-success=${this.handleSignInSuccess}></pop-auth-sign-in>`}renderVerifyCodeForm(){return J.html`
-      <pop-auth-verify-code
-        email=${(0,Mt.ifDefined)(this._email)}
-        @pop-success=${this.handleCodeVerificationSuccess}
-      ></pop-auth-verify-code>
-    `}renderUnauthenticated(){return this._open?this.authContext?.isVerifying?this.renderVerifyCodeForm():this.renderSignInForm():this.renderJoinButton()}render(){return J.html`
-      <div
-        class=${(0,Tt.classMap)({"auth-panel":!0,"auth-panel--is-open":this._open})}
-      >
-        <div class="auth-panel__content">
-          ${this.authContext?.isAuthenticated?this.renderAuthenticated():this.renderUnauthenticated()}
+`),L=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[pe]}onClick(e){e.target.closest(`.join-btn`)&&this.handleJoin()}setupEffects(){this.addEffect(()=>{let e=h.value,t=m.value,n=this.getElement(`.join-btn`);n&&(n.disabled=e,n.textContent=e?`Signing in…`:`Join the Conversation`);let r=this.getElement(`.error`);r&&(t?(r.hidden=!1,r.textContent=t):(r.hidden=!0,r.textContent=``))})}async handleJoin(){te(),await y(this.gridStore.apiUrl,this.gridStore.publicKey)}getTemplate(){return`
+      <div class="panel">
+        <div class="watermark">Popgrids</div>
+        <div class="actions">
+          <button class="join-btn" type="button">Join the Conversation</button>
+          <span class="logo">POPGRIDS</span>
         </div>
+        <div class="error" hidden></div>
       </div>
-    `}};u.styles=[l(u,u,"styles"),At],i([(0,_t.consume)({context:E,subscribe:!0})],u.prototype,"authContext",2),i([(0,H.query)(".auth-panel")],u.prototype,"_authPanel",2),i([(0,H.query)(".auth-panel__content")],u.prototype,"_authPanelContent",2),i([(0,H.state)()],u.prototype,"_email",2),i([(0,H.state)()],u.prototype,"_open",2),u=i([(0,H.customElement)("pop-auth-panel")],u);var Vt=u;var O=require("@lit/context"),$t=require("@popgrids/ui"),Bt=require("lit"),j=require("lit/decorators.js");var qt=require("@lit/context"),$=(0,qt.createContext)(Symbol("pop-api-context"));var Lt=require("lit"),Ht=Lt.css`
-  :host {
-    display: block;
-  }
-`;var st="popgrids_token",f=class extends $t.PopElement{constructor(){super(...arguments);this.error=null;this.isAuthenticated=!1;this.currentAccount=null;this.isVerifying=!1;this.token=null;this.verificationExpiresAt=null;this.contextData={currentAccount:null,error:null,isAuthenticated:!1,isVerifying:!1,signIn:this.signIn.bind(this),signOut:this.signOut.bind(this),token:null,verificationExpiresAt:null,verifyCode:this.verifyCode.bind(this)}}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(st);t&&(this.token=t,this.fetchCurrentAccount())}async fetchCurrentAccount(){if(!(!this.token||!this.apiState?.client)){console.log("fetchCurrentAccount",this.token);try{let{data:t,error:e}=await this.apiState.client.GET("/api/v1/users/me",{headers:{Authorization:`Bearer ${this.token}`,"Content-Type":"application/json",Accept:"application/json"}});e&&this.signOut(),t?(this.currentAccount=t,this.isAuthenticated=!0,this.updateContextData()):this.signOut()}catch(t){console.error("Failed to fetch current account:",t),this.signOut()}}}async signIn(t){if(!this.apiState?.client)throw new Error("API client not available");try{let{data:e,error:r}=await this.apiState.client.POST("/api/v1/session",{params:{query:{email:t.email}}});if(r&&(this.error=r,this.updateContextData()),e)return this.isVerifying=!0,this.verificationExpiresAt=e.expires,this.updateContextData(),e;throw new Error("Authentication failed")}catch(e){throw console.error("Sign in failed:",e),e}}async verifyCode(t,e){if(this.apiState?.client)try{let{data:r,error:s}=await this.apiState.client.PUT("/api/v1/session",{params:{query:{code:t,email:e}}});if(s&&(this.error=s,this.updateContextData()),r)this.token=`${r.token}`,localStorage.setItem(st,this.token),this.isVerifying=!1,this.verificationExpiresAt=null,await this.fetchCurrentAccount();else throw new Error("Verification failed")}catch(r){throw console.error("Verification failed:",r),r}}signOut(){this.token=null,this.currentAccount=null,this.isAuthenticated=!1,this.isVerifying=!1,this.verificationExpiresAt=null,localStorage.removeItem(st),this.updateContextData()}updateContextData(){this.contextData={...this.contextData,error:this.error,isAuthenticated:this.isAuthenticated,isVerifying:this.isVerifying,currentAccount:this.currentAccount,token:this.token,verificationExpiresAt:this.verificationExpiresAt}}render(){return Bt.html`<slot part="base"></slot>`}};f.styles=[Ht],i([(0,O.consume)({context:$})],f.prototype,"apiState",2),i([(0,j.state)()],f.prototype,"error",2),i([(0,j.state)()],f.prototype,"isAuthenticated",2),i([(0,j.state)()],f.prototype,"currentAccount",2),i([(0,j.state)()],f.prototype,"isVerifying",2),i([(0,j.state)()],f.prototype,"token",2),i([(0,j.state)()],f.prototype,"verificationExpiresAt",2),i([(0,O.provide)({context:E}),(0,j.property)({attribute:!1})],f.prototype,"contextData",2),f=i([(0,j.customElement)("pop-auth-provider")],f);var zt=f;var Nt=require("@lit/context"),Qt=require("@popgrids/ui"),Jt=require("lit"),I=require("lit/decorators.js"),Ft=require("lit/directives/class-map.js");var It="./apple-IX52EWYN.png";var Rt="./google-Q3MFTU5A.png";var Ut=require("lit"),Kt=Ut.css`
+    `}};I([S(E)],L.prototype,`gridStore`,void 0),customElements.get(`pop-auth-panel`)||customElements.define(`pop-auth-panel`,L);var me=`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAABMCAYAAADa6W+wAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUuSURBVHgB5ZyBceIwEEX3bq4AOsAdQAdxKggl+Co4rgKcCkgqgFRAUgGkAqACOxVAKvDpg+VRHEmWQSubuTezg8Ega7UrebWS+UG8jIXEQoZCovI9lcd1ciHHUnZCPsrXXflZ7xkISYSshByEFJ5kLWRO54bsHRGdK+dTYZNkQhbUg4aI6FyRoiNBQyQUGLj3jMJYuleNMC4v1gel67Ig/WCq5Qe144+QlM6Wb2QwGNB4PD7JaDQ6veIzKZLj8XiSPM9Pr/v9nna73UnwWUtyIb+FbMgjM3K0QBzHxXq9Lg6HQ3Et2+22WCwWpzJdr1/KjDzRqLiwZDGbzbwobCLLslNDRFEUrAEmTReBVVCxkLRohIsbICLLiA5roxJdAm9zaIAJXUBmKhCtHtraJjAuNHjBgVrcBcDsFhSXoD4NDbB2VTyyFNI7xSUODTB1UX5hKmA+nxd9Bl0AYxGZ3X9wkdWTJCluARjIYv2ULrG6T3eHhabT6SkY4sASFB1aWx23FJ+IULcqm6MBUKbF+rFO+ZQCje6qa6J8jsjQYv2FTvmMAvb1yWRSXePp6anwzWq1cnb9MQXo6yqwthyZ0Q04y9e5/k9F+VjnCpiGCrckDjCtFV51OpZTWN/lo/4Gxqryd7pvCNckTkS/rI7f39/JN5b6j1TltU10d3dHnKjl+7Y8sHhtpS+iHm3f4JyfS2RIytHvMV4ZdMt+1lvhS9OUaSdu5DUuSFk5l60hksoPWv7QK9I1kb/zjU2HRsuHIFQj17FanusWV4fD4i5I5Ye6k8PhkELAqbxlHDn2os9L5Tm6mUX5vBfKy/s7x/U+Pz9Np7q3/GazqY7VaI+j/Br7zpV/e3urjjmiSUvUWJ3QRkHcqAlHzL58g+iUzAmNLxOboGAgur+/rwYkjgnU6+ur6VROXVpezbLA6hw5A9dMTnDlZRoLinPk8CwTmm85vE76PCdIvRn0ympdQL8YGWI6y0GD1atVGzngaePLrmLua8FAaqEaBTsb7bl4fHy0hbTPdB7pv7AmjYtwraZw0eDu6OuRqrTV7T8+PuhWkHGDhUeqWV0qr43+b6XPI4RVAyYNGyHL+odS+Vz3i1tQ/vn5uUlxnPitO/FL+cL3XzEkFAFmWsjRY28eZnKXTKBQBgY3y6xN8pcM+km0O66wlhZiUMJ1lstlY1yB8y335KU2peUOTKRQtvWTyOGJypJv4FGwmlD42zl4Aq6rZnQhFyxnYYBLXb4YEemXpjlx2ENziSBaTaglncT3nhtgTS23nEkyXYEhdl417KJwtfaUrkCrPPbOhEDdqNBS6ZQcd4HbWOkugN0NIWhhfRhpQR4eM/mlHGujPEvq1ysNOXu4tHzaKidPqLO6XPcFrkCnDgIdy/IYUryYiubkEVV5bSwbSnlgW04mBhqVDxnfh16tVZXXhk8hLW9bVCQGemV5y7VyCkAnUR5APEHmezkL9RxeZ4Oey5qab5yUVxcTuXh5eTGd2lMgnkjjepg/c9JmdYWT2FQJjo3BEsusLqPAbHUV4VpMTNPUZvUFBSYxVMT7vvsGxWH1iDpgTYbbDjzg2i6AXBweMSH77C2hjsAUy/psPLwASce2OD4GuqIA2B4hxzRyrrzHbfBb8I2ZGJKODw8PVeJRxujysXDcw/FYOBKWDhFjLuSeAkV1NlJqn125RjLqqJ+bSOk/VVwSEe9fRSzJQx6Om4T8NgLKiunGSMh8O3QR/Damjmn7hyF14KpxKSM6d49IOa/7u6dX6snfPf0DiVL6IWhCmZ4AAAAASUVORK5CYII=`,R=`#DDD0BE.#E9DCBB.#E9DCBB.#C7D1B0.#C6D0CB.#E9DCBB.#C7D1B0.#E9DCBB.#DFC2C0.#CFD4C6.#D7E3E8.#CFD4C6.#D6B3B3.#E9DCBB.#CFCBDC.#BFD6D7.#E3D2C6.#D1E2E7.#D6B3B3.#BFD6D7.#E9DCBB.#C7D1B0.#DFC2C0.#D1E2E7.#CFD4C6.#E9DCBB.#D7E3E8.#CFD4C6.#C6D0CB.#E9DCBB.#C7D1B0.#E9DCBB.#CFCBDC.#E3D2C6.#E9DCBB`.split(`.`),z=e=>typeof e==`number`?R[e%R.length]??`#e5e7eb`:R[Math.floor(Math.random()*R.length)];function he(e){let t=new TextEncoder().encode(e),n=2166136261;for(let e=0;e<t.length;e++){let r=t[e]??0;n^=r,n=Math.imul(n,16777619)}return n>>>0}function ge(e){return R[he(e)%R.length]??`#e5e7eb`}var _e=P(`
   :host {
     display: block;
+
+    --comment-avatar-border-size: 1px;
+    --comment-avatar-border-color: var(--color-background, #fff);
+    --comment-avatar-size: 32px;
   }
 
-  .auth-sign-in {
+  .comment-avatar {
+    align-items: center;
     display: flex;
-    padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
-    flex-direction: column;
+    flex-shrink: 0;
+    isolation: isolate;
     justify-content: center;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
+    position: relative;
+    width: calc(var(--comment-avatar-size) + calc(var(--comment-avatar-border-size) * 2));
+    height: calc(var(--comment-avatar-size) + calc(var(--comment-avatar-border-size) * 2));
   }
 
-  .auth-sign-in__footer {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xl, 16px);
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 500;
+  .comment-avatar--size-xs {
+    --comment-avatar-size: 32px;
   }
 
-  .auth-sign-in__form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xl, 16px);
-    justify-content: center;
-    align-items: center;
-    width: 100%;
+  .comment-avatar--size-sm {
+    --comment-avatar-size: 56px;
   }
 
-  .auth-sign-in__apple-icon,
-  .auth-sign-in__google-icon {
-    border: none;
-    background-color: transparent;
-    display: flex;
-    width: 32px;
-    height: 32px;
-    justify-content: center;
-    align-items: center;
-    transition: transform 300ms ease-out;
+  .comment-avatar--size-md {
+    --comment-avatar-size: 80px;
   }
 
-  .auth-sign-in__apple-icon:hover,
-  .auth-sign-in__google-icon:hover {
-    transform: scale(1.125);
+  .comment-avatar--size-lg {
+    --comment-avatar-size: 120px;
+  }
+
+  .comment-avatar--size-xl {
+    --comment-avatar-size: 140px;
+  }
+
+  .comment-avatar__background {
+    background-color: var(--comment-avatar-border-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
   }
 
-  .auth-sign-in__social-login {
+  /**
+   * Content
+   */
+
+  .comment-avatar__content {
+    align-items: center;
+    background-color: var(--color-surface-bg-default);
     display: flex;
-    padding: 0px var(--spacing-2xl, 20px);
     justify-content: center;
-    align-items: center;
-    gap: var(--spacing-4xl, 32px);
-    align-self: stretch;
-  }
+    overflow: hidden;
+    position: relative;
+    height: var(--comment-avatar-size);
+    width: var(--comment-avatar-size);
+    z-index: 20;
 
-  .auth-sign-in__title {
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
+    /* Initials styling */
+    font-family: Inter, sans-serif;
     font-weight: 600;
+    color: #374151;
+    font-size: calc(var(--comment-avatar-size) * 0.35);
+    line-height: 1;
   }
 
-  .auth-sign-in__submit-button {
-    width: 100%;
-    height: 40px;
-    color: var(--color-text-text-default);
+  .comment-avatar__content::slotted(img) {
+    -webkit-user-drag: none;
+    align-self: stretch;
+    flex: 1 0 0;
+    height: var(--comment-avatar-size);
+    object-fit: cover;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    width: var(--comment-avatar-size);
   }
 
-  .auth-sign-in__email-input {
+  .comment-avatar__deleted-mark {
+    -webkit-user-drag: none;
+    bottom: -3px;
+    height: auto;
+    left: 0;
+    object-fit: cover;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
     width: 100%;
-    height: 40px;
-    color: var(--color-text-text-default);
-  }
-`;var vi=Rt,yi=It,h=class extends Qt.PopElement{constructor(){super(...arguments);this.email="";this.emailError="";this.isSubmitting=!1;this.isValid=!1}validateEmail(t){return t?!0:(this.emailError="Please enter an email address",this.isValid=!1,!1)}handleBlur(){this.email&&this.validateEmail(this.email)}handleEmailChange(t){this.email=t.target.value,this.email?this.validateEmail(this.email):(this.emailError="",this.isValid=!1)}handleInvalid(t){let{valid:e,validationMessage:r,validity:s}=t.detail;e||(console.log("Validation failed:",r),s.typeMismatch&&console.log("Invalid email format"),s.patternMismatch&&console.log("Pattern mismatch")),this.isValid=e}async handleSubmit(t){if(t.preventDefault(),!(!this.validateEmail(this.email)||this.isSubmitting)){if(!this.authContext?.signIn)throw new Error("Authentication context not available");this.isSubmitting=!0;try{let e=await this.authContext.signIn({email:this.email});this.onSuccess(e)}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(t){this.emit("pop-success",{email:t.email,expires:t.expires})}onFailure(){console.log("failure"),this.emit("pop-error",{error:"Creating a session failed",success:!1})}render(){return Jt.html`<div
-      class=${(0,Ft.classMap)({"auth-sign-in":!0})}
-      part="base"
-    >
-      <form class="auth-sign-in__form" @submit=${this.handleSubmit}>
-        <pop-logo variant="logo" theme="white" style="width: 100px; height: 16px;"></pop-logo>
-        <h2 class="auth-sign-in__title">Small communities, big connections 👋</h2>
-        <pop-form-input-simple
-          aria-invalid=${this.emailError?"true":"false"}
-          aria-describedby="email-error"
-          autocomplete="off"
-          errorMessage=${this.emailError}
-          name="email"
-          type="email"
-          placeholder="Email"
-          pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+.[a-zA-Z]{2,}"
-          .value=${this.email}
-          .disabled=${this.isSubmitting}
-          ?required=${!0}
-          ?error=${!!this.emailError}
-          @input=${this.handleEmailChange}
-          @blur=${this.handleBlur}
-          @pop-invalid=${this.handleInvalid}
-        ></pop-form-input-simple>
-        <pop-button
-          class="auth-sign-in__submit-button"
-          theme="brand"
-          variant="primary"
-          current
-          ?disabled=${this.isSubmitting||!this.isValid}
-        >
-          ${this.isSubmitting?"Submitting...":"Continue"}
-        </pop-button>
-      </form>
-      <div class="auth-sign-in__social-login">
-        <button class="auth-sign-in__google-icon" type="button">
-          <img src=${vi} alt="Google" />
-        </button>
-        <button class="auth-sign-in__apple-icon" type="button">
-          <img src=${yi} alt="Apple" />
-        </button>
-      </div>
-      <div class="auth-sign-in__footer">
-        <pop-button-link ?primary=${!0} size="sm">What's Popgrids?</pop-button-link>
+    transform: scale(0.57);
+  }
+`),ve=class extends F{constructor(){super(),this._backgroundColor=z()??`#e5e7eb`}static get observedAttributes(){return[`size`,`data-color-key`,`deleted`]}onSizeChanged(){this.render()}onDataColorKeyChanged(){this.render()}onDeletedChanged(){this.render()}get styleSheets(){return[_e]}get size(){return this.getAttribute(`size`)||`md`}set size(e){this.setAttribute(`size`,e)}get deleted(){return this.hasAttribute(`deleted`)}set deleted(e){e?this.setAttribute(`deleted`,``):this.removeAttribute(`deleted`)}getTemplate(){let e=this.size,t=this.deleted,n=this.getAttribute(`data-color-key`),r=t?`var(--pop-muted-foreground, #e5e7eb)`:n?ge(n):this._backgroundColor;return`
+      <div class="comment-avatar comment-avatar--size-${e}" part="base">
+        <div class="comment-avatar__background mask mask-squircle" part="background"></div>
+        ${t?`<div
+          class="comment-avatar__content mask mask-squircle"
+          part="content"
+          style="background-color: ${r}; opacity: 0.15"
+        ><img class="comment-avatar__deleted-mark" src="${me}" alt="Deleted user" /></div>`:`<slot
+          class="comment-avatar__content mask mask-squircle"
+          part="content"
+          style="background-color: ${r};"
+        ></slot>`}
       </div>
-    </div>`}};h.styles=[l(h,h,"styles"),Kt],i([(0,Nt.consume)({context:E,subscribe:!0})],h.prototype,"authContext",2),i([(0,I.state)()],h.prototype,"email",2),i([(0,I.state)()],h.prototype,"emailError",2),i([(0,I.state)()],h.prototype,"isSubmitting",2),i([(0,I.state)()],h.prototype,"isValid",2),h=i([(0,I.customElement)("pop-auth-sign-in")],h);var Zt=h;var Pt=require("@lit/context"),Wt=require("@popgrids/ui"),Y=require("lit"),g=require("lit/decorators.js"),Xt=require("lit/directives/class-map.js"),ot=require("lit/directives/when.js");var Yt=require("lit"),Gt=Yt.css`
+    `}};customElements.get(`pop-comment-avatar`)||customElements.define(`pop-comment-avatar`,ve);function B(e){return e?e.split(` `).map(e=>e[0]??``).join(``).toUpperCase().slice(0,2):`?`}var ye=P(`
   :host {
+    background: var(--pop-background);
+    border-top: 1px solid var(--pop-bar-input-bg);
     display: block;
-  }
-
-  .auth-verify-code {
-    display: flex;
-    padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
+    padding: 6px;
     position: relative;
+
+    --pop-bar-avatar-bg: #e5e7eb;
+    --pop-bar-avatar-color: #374151;
+    --pop-bar-avatar-border: #ffffff;
+    --pop-bar-input-bg: rgba(0, 0, 32, 0.04);
+    --pop-bar-send-hover: rgba(0, 0, 32, 0.06);
+    --pop-bar-send-color: #000000;
+    --pop-bar-watermark: rgba(0, 0, 32, 0.1);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --pop-bar-avatar-bg: #1f2937;
+      --pop-bar-avatar-color: #d1d5db;
+      --pop-bar-avatar-border: var(--pop-popover, #151d2a);
+      --pop-bar-input-bg: rgba(255, 255, 255, 0.05);
+      --pop-bar-send-hover: rgba(255, 255, 255, 0.08);
+      --pop-bar-send-color: #ffffff;
+      --pop-bar-watermark: rgba(255, 255, 255, 0.1);
+    }
   }
 
-  .auth-verify-code__toast {
-    position: absolute;
+  :host(.dark) {
+    --pop-bar-avatar-bg: #1f2937;
+    --pop-bar-avatar-color: #d1d5db;
+    --pop-bar-avatar-border: var(--pop-popover, #151d2a);
+    --pop-bar-input-bg: rgba(255, 255, 255, 0.05);
+    --pop-bar-send-hover: rgba(255, 255, 255, 0.08);
+    --pop-bar-send-color: #ffffff;
+    --pop-bar-watermark: rgba(255, 255, 255, 0.1);
   }
 
-  .auth-verify-code__body {
+  .bar {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: var(--spacing-md, 8px);
-    align-self: stretch;
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    text-align: center;
+    gap: 4px;
   }
 
-  .auth-verify-code__help .auth-verify-code__body {
-    text-align: left;
+  .bar__user {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    flex-shrink: 0;
+    padding-top: 2px;
   }
 
-  .auth-verify-code__body strong {
-    font-weight: 600;
+  .bar__avatar {
+    flex-shrink: 0;
+    --comment-avatar-border-size: 0px;
   }
 
-  .auth-verify-code__footer {
-    display: flex;
-    color: var(--color-text-text-default);
-    justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-2xl, 20px);
+  .bar__avatar--reply {
+    margin-right: -4px;
+    z-index: 1;
   }
 
-  .auth-verify-code__form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
+  .bar__avatar--user {
+    z-index: 2;
   }
 
-  .auth-verify-code__help {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-xl, 16px);
+  .bar__user.has-reply .bar__avatar--user {
+    --comment-avatar-border-size: 2px;
+    --comment-avatar-border-color: var(--pop-bar-avatar-border);
   }
 
-  .auth-verify-code__title {
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 600;
+  .bar__input-wrap {
+    flex: 1;
+    min-width: 0;
+    background: var(--pop-bar-input-bg);
+    border-radius: 18px;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-end;
+    padding: 4px 8px 4px 12px;
+    max-height: 280px;
   }
 
-  .auth-verify-code__code-input-fields {
+  .bar__send {
+    align-items: center;
+    align-self: flex-end;
+    background: none;
+    border: none;
+    cursor: pointer;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
-    gap: var(--spacing-xl, 16px);
-    margin-bottom: var(--spacing-xs, 4px);
+    padding-bottom: 2px;
   }
 
-  .auth-verify-code__code-input-group {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm, 6px);
-  }
-`;var p=class extends Wt.PopElement{constructor(){super(...arguments);this.email="";this.code="";this.isSubmitting=!1;this.error="";this._showingHelp=!1;this._showingToast=!1;this._toastMessage=""}getCodeInput(t){return this.codeInputs[t]}closeToast(){this._showingToast=!1}handleContactSupport(){console.log("handleContactSupport")}async handleResendCode(){console.log("handleResendCode");try{let t=await this.authContext?.signIn({email:this.email});this._showingHelp=!1}catch(t){console.error(t)}finally{this.isSubmitting=!1}}handleInput(t){let e=t.target,r=/^\d$/.test(e.value);if(r||e.value===""){if(r){let s=Array.from(this.codeInputs).indexOf(t.currentTarget);s<this.codeInputs.length-1&&this.getCodeInput(s+1)?.focus()}this.updateCodeValue()}else e.value=""}handleKeyDown(t){let e=t.target,r=Array.from(this.codeInputs).indexOf(t.currentTarget);if(t.key==="Backspace"&&e.value===""&&r>0){let s=this.getCodeInput(r-1);s?.focus(),s?.select()}if(t.key==="ArrowLeft"&&r>0){let s=this.getCodeInput(r-1);s?.focus(),s?.select()}if(t.key==="ArrowRight"&&r<this.codeInputs.length-1){let s=this.getCodeInput(r+1);s?.focus(),s?.select()}}handleFocus(t){t.target.select()}showToast(t){this._showingToast=!0,this._toastMessage=t}toggleHelp(){this._showingHelp=!this._showingHelp,console.log("handleNeedHelpClick")}handleSubmit(t){t.preventDefault(),this.submitForm()}handlePaste(t){t.preventDefault();let e=t.clipboardData;if(!e)return;e.getData("text").replace(/\D/g,"").substring(0,this.codeInputs.length).split("").forEach((M,d)=>{if(d<this.codeInputs.length){let c=this.getCodeInput(d);c&&(c.value=M)}});let o=Array.from(this.codeInputs).findIndex(M=>!M.value),K=o!==-1?o:this.codeInputs.length-1;this.getCodeInput(K)?.focus(),this.updateCodeValue()}updateCodeValue(){let t=Array.from(this.codeInputs).map(r=>r.value);this.code=t.join(""),this.hiddenInput&&(this.hiddenInput.value=this.code),t.length===6&&t.every(r=>/^\d$/.test(r))&&setTimeout(()=>this.submitForm(),0)}async submitForm(){if(!(!this.authContext?.verifyCode||this.isSubmitting||!this.email||this.code.length!==6)){this.isSubmitting=!0,this.error="";try{await this.authContext.verifyCode(this.code,this.email),this.onSuccess()}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(){this.emit("pop-success")}onFailure(){this.showToast("Verification failed. Please try again."),Array.from(this.codeInputs).forEach(t=>{t.value=""}),this.codeInputs.length&&this.getCodeInput(0)?.focus(),this.code=""}render(){return Y.html`<div
-      class=${(0,Xt.classMap)({"auth-verify-code":!0})}
-      part="base"
-    >
-      ${(0,ot.when)(this._showingToast,()=>Y.html`<pop-toast class="auth-verify-code__toast" theme="transparent" @pop-close=${this.closeToast}
-            >${this._toastMessage}</pop-toast
-          >`)}
-      ${(0,ot.when)(!this._showingHelp,()=>Y.html`
-          <form class="auth-verify-code__form" @submit=${this.handleSubmit}>
-            <input type="hidden" name="code" value=${this.code} />
-            <h2 class="auth-verify-code__title">Enter Verification Code</h2>
-            <div class="auth-verify-code__code-input-fields">
-              <div class="auth-verify-code__code-input-group">
-                <pop-code-input-field
-                  name="code_1"
-                  autofocus
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_2"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_3"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-              </div>
-              <div class="auth-verify-code__code-input-group">
-                <pop-code-input-field
-                  name="code_4"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_5"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-                <pop-code-input-field
-                  name="code_6"
-                  .disabled=${this.isSubmitting}
-                  @input=${this.handleInput}
-                  @keydown=${this.handleKeyDown}
-                  @focus=${this.handleFocus}
-                  @paste=${this.handlePaste}
-                ></pop-code-input-field>
-              </div>
-            </div>
+  .logo-watermark {
+    position: absolute;
+    top: -16px;
+    left: 8px;
+    font-family: Inter, sans-serif;
+    font-size: 8px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: var(--pop-bar-watermark);
+    text-transform: uppercase;
+    border-radius: 9999px;
+    padding: 2px 6px;
+    pointer-events: none;
+    user-select: none;
+  }
+`),be=`<svg width="64" height="11" viewBox="0 0 64 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.91111 0C0.892839 0 0 2.11357 0 4.77714C0 5.76321 0.0987654 6.73357 0.213333 7.70786C0.25679 8.08893 0.240988 8.50929 0.312099 8.89036C0.497778 9.89214 1.44593 10.3557 2.36642 10.3557C3.62667 10.3557 4.4642 9.56607 4.4642 8.30107C4.4642 7.57036 4.22321 7.09107 3.5279 6.80821C3.48444 6.7925 3.44099 6.78071 3.44099 6.72179C3.44099 6.62357 3.59901 6.55286 3.69778 6.55286C4.03753 6.55286 4.57481 6.89071 5.04494 6.89071C6.88593 6.89071 7.90519 5.13071 7.90519 3.48071C7.90519 1.08429 6.13136 0 3.91111 0ZM3.89531 5.18179C3.78074 5.18179 3.68198 5.08357 3.68198 4.96964C3.68198 4.81643 3.89531 4.7025 3.96642 4.57679C4.12049 4.29393 4.16395 3.81464 4.16395 3.4925C4.16395 3.11143 4.06519 2.40821 3.8242 2.12536C3.75309 2.04286 3.65432 1.99964 3.65432 1.88571C3.65432 1.77179 3.76889 1.67357 3.87951 1.67357C4.36148 1.67357 4.60247 3.08393 4.60247 3.44929C4.60247 3.84214 4.47605 5.18179 3.89531 5.18179Z" fill="#000020" fill-opacity="0.1"/>
+<path d="M12.7368 0.239637C9.73433 0.239637 7.93285 2.35321 7.93285 5.25249C7.93285 8.15178 9.73038 10.2654 12.7368 10.2654C15.7432 10.2654 17.5249 8.12428 17.5249 5.25249C17.5249 2.38071 15.7116 0.239637 12.7368 0.239637ZM12.8672 8.83142C12.8198 8.89035 12.7249 9.00035 12.6104 9.00035C12.4958 9.00035 12.3852 8.90214 12.3852 8.78821C12.3852 8.74499 12.7526 8.19499 12.8119 8.02607C13.037 7.36214 13.0805 6.64321 13.0805 5.93999C13.0805 4.99714 12.9106 3.78321 12.3299 3.00928C12.2153 2.86785 11.8637 2.60071 11.8637 2.44749C11.8637 2.33357 11.9625 2.23535 12.077 2.23535C12.1758 2.23535 12.2746 2.32178 12.3457 2.37678C13.2504 3.12321 13.523 4.82821 13.523 5.93999C13.523 6.81214 13.4874 8.08499 12.8711 8.82749L12.8672 8.83142Z" fill="#000020" fill-opacity="0.1"/>
+<path d="M21.6533 0C18.6351 0 17.7422 2.11357 17.7422 4.77714C17.7422 5.76321 17.841 6.73357 17.9555 7.70786C17.999 8.08893 17.9832 8.50929 18.0543 8.89036C18.24 9.89214 19.1881 10.3557 20.1086 10.3557C21.3689 10.3557 22.2064 9.56607 22.2064 8.30107C22.2064 7.57036 21.9654 7.09107 21.2701 6.80821C21.2267 6.7925 21.1832 6.78071 21.1832 6.72179C21.1832 6.62357 21.3412 6.55286 21.44 6.55286C21.7797 6.55286 22.317 6.89071 22.7871 6.89071C24.6281 6.89071 25.6474 5.13071 25.6474 3.48071C25.6474 1.08429 23.8775 0 21.6533 0ZM21.6415 5.18179C21.5269 5.18179 21.4281 5.08357 21.4281 4.96964C21.4281 4.81643 21.6415 4.7025 21.7126 4.57679C21.8667 4.29393 21.9101 3.81464 21.9101 3.4925C21.9101 3.11143 21.8113 2.40821 21.5704 2.12536C21.4992 2.04286 21.4005 1.99964 21.4005 1.88571C21.4005 1.77179 21.5151 1.67357 21.6257 1.67357C22.1076 1.67357 22.3486 3.08393 22.3486 3.44929C22.3486 3.84214 22.2222 5.18179 21.6415 5.18179Z" fill="#000020" fill-opacity="0.1"/>
+<path d="M31.9012 4.16822C30.882 4.16822 29.4637 4.6318 29.4637 5.84572C29.4637 6.53715 29.9733 7.56251 30.7832 7.56251C31.2929 7.56251 31.6208 7.16965 31.7906 7.16965C31.8341 7.16965 31.8736 7.19715 31.8736 7.24037C31.8736 7.64894 31.0795 7.83358 30.7674 7.83358C29.677 7.83358 29.0963 6.90251 29.0963 5.91644C29.0963 4.70644 30.242 3.77537 31.4035 3.77537C31.7432 3.77537 32.0988 3.87358 32.4385 3.87358C33.4459 3.87358 34.165 2.97394 34.165 2.01537C34.165 0.424295 32.2687 0.0589382 31.0045 0.0589382C27.6464 0.0589382 25.6909 2.22751 25.6909 5.52358C25.6909 8.56822 27.279 10.5089 30.4237 10.5089C32.4622 10.5089 34.6864 9.6368 34.6864 7.26787C34.6864 5.6493 33.6237 4.16822 31.8973 4.16822H31.9012Z" fill="#000020" fill-opacity="0.1"/>
+<path d="M41.2681 6.56464C41.0113 6.56464 40.802 6.66286 40.5886 6.66286C40.5452 6.66286 40.5333 6.61964 40.5333 6.59214C40.5333 6.49393 40.5768 6.45071 40.6479 6.42321C40.8889 6.34071 41.1457 6.28179 41.3827 6.16786C42.4612 5.66107 43.0973 4.7575 43.0973 3.56321C43.0973 1.40643 41.2405 0.0982143 39.202 0.0982143C38.4632 0.0982143 37.7442 0.310357 37.12 0.648214C35.4212 1.56357 35.0933 2.87571 34.9946 4.66321C34.9511 5.36643 34.9511 6.07357 34.9511 6.77679V8.48179C34.9511 9.55036 35.6583 10.4107 36.7763 10.4107C37.5822 10.4107 38.3052 9.83321 38.4909 9.07107C38.5896 8.61929 38.5343 8.085 38.5343 7.64893C38.5343 7.60571 38.5501 7.59393 38.5896 7.59393C38.6291 7.59393 38.6765 7.62143 38.7042 7.63714C39.202 8.83536 39.8815 10.3557 41.4222 10.3557C42.4849 10.3557 43.362 9.60929 43.362 8.525C43.362 7.44071 42.3427 6.56857 41.2642 6.56857L41.2681 6.56464ZM38.961 5.18179C38.8464 5.18179 38.7476 5.08357 38.7476 4.96964C38.7476 4.81643 38.961 4.7025 39.0321 4.57679C39.1862 4.29393 39.2296 3.81464 39.2296 3.4925C39.2296 3.11143 39.1309 2.40821 38.8899 2.12536C38.8188 2.04286 38.7358 1.99964 38.7358 1.88571C38.7358 1.77179 38.8346 1.67357 38.9491 1.67357C39.4311 1.67357 39.6721 3.08393 39.6721 3.44929C39.6721 3.84214 39.5575 5.18179 38.9649 5.18179H38.961Z" fill="#000020" fill-opacity="0.1"/>
+<path d="M46.7674 0.549991C46.4277 0.326063 45.9457 0.212134 45.5348 0.212134C44.642 0.212134 43.8756 0.915349 43.7768 1.79142C43.7491 2.04678 43.761 2.28642 43.761 2.55356V4.94606L43.7175 7.46821V8.72142C43.7175 9.70749 44.5669 10.4814 45.5467 10.4814C46.2696 10.4814 47.0637 10.0296 47.3324 9.35392C47.4864 8.97285 47.5022 8.43856 47.5022 8.02999V6.92999L47.518 4.73392V2.53785C47.518 1.72071 47.5022 1.07249 46.7674 0.549991Z" fill="#000020" fill-opacity="0.1"/>
+<path d="M50.2993 0.125713C48.8533 0.125713 48.1304 0.801428 48.1304 2.25107V2.82857L48.1462 3.96786V4.54536C48.1462 4.98143 48.1462 5.39 48.1304 5.82607C48.1027 6.34857 48.0316 6.86714 48.0316 7.40536C48.0316 9.3775 49.0509 10.3361 51.0222 10.3361C54.0523 10.3361 56.1067 9.03964 56.1067 5.81429C56.1067 1.925 54.2222 0.121785 50.2993 0.121785V0.125713ZM51.6583 7.91607C51.5437 7.91607 51.4449 7.81786 51.4449 7.70393C51.4449 7.66071 51.4608 7.83352 51.4884 7.59C51.8558 6.985 51.9546 6.14036 51.9546 5.44893C51.9546 4.80071 51.8835 3.84214 51.4726 3.33536C51.4015 3.22143 51.2593 3.13893 51.2593 2.9975C51.2593 2.88357 51.358 2.78536 51.4726 2.78536C51.6859 2.78536 51.9822 3.31964 52.0691 3.50428C52.3378 4.125 52.3812 4.80071 52.3812 5.46071C52.3812 5.86928 52.1679 7.91214 51.6583 7.91214V7.91607Z" fill="#000020" fill-opacity="0.1"/>
+<path d="M62.7239 5.1268C61.9022 5.05608 60.7249 4.77322 60.0889 4.23894C60.0059 4.16822 59.8637 4.07001 59.8637 3.9443C59.8637 3.90108 59.8795 3.83037 59.9348 3.83037C60.0889 3.83037 61.0805 4.62001 61.9338 4.62001C63.0123 4.62001 64 3.78715 64 2.69108C64 0.887867 61.5941 0.157152 60.1324 0.157152C57.9635 0.157152 56.3516 1.5518 56.3516 3.76358C56.3516 4.24287 56.4227 4.90287 56.7783 5.27215C56.9482 5.4568 57.2326 5.4568 57.4578 5.4568C58.3072 5.4568 59.3857 5.72394 59.836 6.49787C59.8795 6.56858 59.919 6.68251 59.919 6.76501C59.919 6.79251 59.919 6.83572 59.8914 6.82001C59.8084 6.79251 59.7373 6.7218 59.678 6.6668C59.1802 6.18751 58.5007 5.70822 57.7817 5.70822C56.7032 5.70822 56.324 6.73751 56.324 7.63715C56.324 9.45215 57.9674 10.4539 59.6385 10.4539C61.6217 10.4539 64 9.15751 64 6.94572C64 6.12858 63.6444 5.21322 62.7239 5.13072V5.1268Z" fill="#000020" fill-opacity="0.1"/>
+</svg>`,V=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[ye]}onClick(e){e.target.closest(`.bar__send`)&&this.handleSend()}setupEffects(){let e=null,t=null;this.addEffect(()=>{let t=this.gridStore.replyingTo.value;if(t&&t!==e){let e=this.getElement(`pop-comment-input`);e&&setTimeout(()=>e.focus(),0)}e=t}),this.addEffect(()=>{let e=this.gridStore.editingComment.value;if(e&&e.id!==t){let t=this.getElement(`pop-comment-input`);t&&(t.setValue(e.body),setTimeout(()=>t.focus(),0))}else if(!e&&t){let e=this.getElement(`pop-comment-input`);e&&e.clear()}t=e?.id??null}),this.addEffect(()=>{let e=p.value,t=this.getElement(`.bar__user`);if(!t)return;let n=this.gridStore.replyingToComment.value?.author;if(this.gridStore.editingComment.value){t.classList.remove(`has-reply`);let n=e?.id??e?.name??``;t.innerHTML=e?.image?`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}"><img src="${e.image}" alt="${e.name??`User`}'s avatar"></pop-comment-avatar>`:`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}">${B(e?.name)}</pop-comment-avatar>`}else if(n){t.classList.add(`has-reply`);let r=n.id??n.name??``,i=e?.id??e?.name??``;t.innerHTML=(n.image?`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--reply" data-color-key="${r}"><img src="${n.image}" alt="${n.name??`User`}'s avatar"></pop-comment-avatar>`:`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--reply" data-color-key="${r}">${B(n.name)}</pop-comment-avatar>`)+(e?.image?`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${i}"><img src="${e.image}" alt="${e.name??`User`}'s avatar"></pop-comment-avatar>`:`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${i}">${B(e?.name)}</pop-comment-avatar>`)}else{t.classList.remove(`has-reply`);let n=e?.id??e?.name??``;t.innerHTML=e?.image?`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}"><img src="${e.image}" alt="${e.name??`User`}'s avatar"></pop-comment-avatar>`:`<pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user" data-color-key="${n}">${B(e?.name)}</pop-comment-avatar>`}})}async handleSend(){let e=this.getElement(`pop-comment-input`);if(!e)return;let t=e.getValue().trim();if(!t)return;let n=this.gridStore.editingCommentId.value;if(n)e.clear(),this.gridStore.editingCommentId.value=null,await this.gridStore.editComment(n,t);else{e.clear();let n=await this.gridStore.postComment(t,this.gridStore.replyingTo.value??void 0);this.gridStore.replyingTo.value=null,n&&(this.gridStore.scrollingCommentId.value=n.id)}}getTemplate(){return`
+      <div class="logo-watermark">${be}</div>
+      <div class="bar">
+        <div class="bar__user">
+          <pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user">?</pop-comment-avatar>
+        </div>
+        <div class="bar__input-wrap">
+          <pop-comment-input></pop-comment-input>
+        </div>
+        <button class="bar__send" type="button" aria-label="Send comment">
+          <pop-comment-icon theme="neutral" variant="send"></pop-comment-icon>
+        </button>
+      </div>
+    `}};I([S(E)],V.prototype,`gridStore`,void 0),customElements.get(`pop-comment-bar`)||customElements.define(`pop-comment-bar`,V);var xe=P(`
+  :host {
+    /* Mode-level theme colors (defaults for light mode) */
+    --pop-comment-color-black: #000000;
+    --pop-comment-color-white: #ffffff;
+    --pop-comment-color-default: #000000;
+    --pop-comment-color-reversed: #ffffff;
+    --pop-comment-bg-singular-resting: #121926;
+    --pop-comment-bg-singular-hover: rgba(0, 0, 32, 0.08);
+    --pop-comment-bg-reversed: #121926;
+    --pop-comment-bg-blank-resting: #ffffff;
 
-            <div class="auth-verify-code__body">
-              <p>A verification code has been sent to your email. Enter code to continue.</p>
-              <p>
-                Code expires in
-                <pop-timestamp-countdown>${this.authContext?.verificationExpiresAt}</pop-timestamp-countdown>.
-              </p>
-            </div>
+    display: flex;
 
-            <div class="auth-verify-code__footer">
-              <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.toggleHelp}>
-                No verification code?
-              </pop-button-link>
-            </div>
-          </form>
-        `,()=>Y.html`
-          <div class="auth-verify-code__help">
-            <h2 class="auth-verify-code__title">Steps to Take</h2>
-            <div class="auth-verify-code__body">
-              <ul>
-                <li><strong>Check spam/junk</strong> – it might be there.</li>
-                <li><strong>Verify email</strong> – check your email for typos.</li>
-                <li><strong>Wait a moment</strong> – emails take a few mins.</li>
-                <li><strong>Whitelist us</strong> – it may be blocked.</li>
-              </ul>
-            </div>
-            <div class="auth-verify-code__footer">
-              <pop-button-link size="sm" theme="default" @click=${this.handleContactSupport}>
-                Contact Support
-              </pop-button-link>
-              <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.handleResendCode}>
-                Resend Code
-              </pop-button-link>
-            </div>
-          </div>
-        `)}
-    </div>`}};p.styles=[l(p,p,"styles"),Gt],i([(0,Pt.consume)({context:E,subscribe:!0})],p.prototype,"authContext",2),i([(0,g.property)({type:String})],p.prototype,"email",2),i([(0,g.state)()],p.prototype,"code",2),i([(0,g.state)()],p.prototype,"isSubmitting",2),i([(0,g.state)()],p.prototype,"error",2),i([(0,g.state)()],p.prototype,"_showingHelp",2),i([(0,g.state)()],p.prototype,"_showingToast",2),i([(0,g.state)()],p.prototype,"_toastMessage",2),i([(0,g.query)('input[name="code"]')],p.prototype,"hiddenInput",2),i([(0,g.queryAll)("pop-code-input-field")],p.prototype,"codeInputs",2),p=i([(0,g.customElement)("pop-auth-verify-code")],p);var Ot=p;var ie=require("@popgrids/ui"),re=require("lit"),ae=require("lit/decorators.js"),ne=require("lit/directives/class-map.js");var te=require("lit"),ee=te.css`
-  :host {
-    display: block;
+    --pop-comment-icon-scale: 1;
+    --pop-comment-icon-scale-hover: 1.1875;
+    --pop-comment-icon-scale-active: 0.9375;
+    --pop-comment-icon-size: 32px;
+    --pop-comment-icon-color: var(--pop-foreground, #000000);
+    --pop-comment-icon-color-hover: var(--pop-foreground, #000000);
+    --pop-comment-icon-color-active: var(--pop-foreground, #000000);
+    --pop-comment-icon-color-focused: var(--pop-foreground, #000000);
+    --pop-comment-icon-background: var(
+      --color-surface-buttons-singular-bg-launch-icon-hover,
+      rgba(0, 0, 32, 0.08)
+    );
+    --pop-comment-icon-background-hover: var(
+      --color-surface-buttons-singular-bg-launch-icon-hover,
+      rgba(0, 0, 32, 0.08)
+    );
+    --pop-comment-icon-background-active: var(
+      --color-surface-buttons-singular-bg-launch-icon-hover,
+      rgba(0, 0, 32, 0.08)
+    );
+    --pop-comment-icon-background-focused: var(
+      --color-surface-buttons-singular-bg-launch-icon-hover,
+      rgba(0, 0, 32, 0.08)
+    );
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      /* Overrides for dark mode */
+      --pop-comment-color-black: #ffffff;
+      --pop-comment-color-white: #000000;
+      --pop-comment-color-default: #ffffff;
+      --pop-comment-color-reversed: #000000;
+      --pop-comment-bg-singular-resting: #ffffff;
+      --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);
+      --pop-comment-bg-reversed: #ffffff;
+      --pop-comment-bg-blank-resting: #121926;
+    }
   }
 
-  .comment-bar {
-    align-items: flex-start;
-    background: var(--color-border-singular-border-island);
-    border-top: 1px solid var(--color-surface-alpha-alpha-input-bar);
-    padding: var(--spacing-sm, 6px) var(--spacing-sm, 6px) var(--spacing-md, 8px) var(--spacing-sm, 6px);
-    position: relative;
-    transition: all var(--duration-quick) var(--ease-quick);
+  :host(.dark) {
+    /* Overrides for dark mode (.dark class on host) */
+    --pop-comment-color-black: #ffffff;
+    --pop-comment-color-white: #000000;
+    --pop-comment-color-default: #ffffff;
+    --pop-comment-color-reversed: #000000;
+    --pop-comment-bg-singular-resting: #ffffff;
+    --pop-comment-bg-singular-hover: rgba(255, 255, 255, 0.15);
+    --pop-comment-bg-reversed: #ffffff;
+    --pop-comment-bg-blank-resting: #121926;
   }
 
-  .comment-bar__actions {
+  .comment-icon {
+    align-items: center;
+    background: transparent;
+    border: none;
+    display: inline-flex;
+    height: var(--pop-comment-icon-size);
+    justify-content: center;
+    padding: 0;
     position: relative;
-    display: grid;
-    grid-template-columns: auto 1fr 0px;
-    gap: 6px;
-    align-items: start;
-    transition: all var(--duration-quick) var(--ease-quick);
-  }
-  .comment-bar--has-content {
-    grid-template-columns: auto 1fr 32px;
+    transform-origin: center;
+    width: var(--pop-comment-icon-size);
   }
 
-  .comment-bar__avatars {
-    display: flex;
-    align-items: center;
-    padding-top: 2px;
+  .comment-icon--size-sm {
+    --pop-comment-icon-size: 24px;
   }
 
-  .comment-bar__avatars > *:not(:last-child) {
-    margin-right: -4px;
+  .comment-icon:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
   }
 
-  .comment-bar__avatars > pop-comment-avatar {
-    transition: transform var(--duration-pop-hover) var(--ease-pop-hover);
-  }
-  .comment-bar__avatars > pop-comment-avatar:hover {
-    transform: scale(1.1875);
+  .comment-icon__focus-indicator {
+    display: none;
+    height: calc(100% + 3px);
+    inset: -1.5px;
+    transform-origin: center;
+    transform: scale(var(--pop-comment-icon-scale));
+    transition: all 200ms ease-out;
+    width: calc(100% + 3px);
   }
 
-  .comment-bar__send-icon {
-    position: absolute;
-    right: 0;
-    bottom: 0.5px;
-    transition: opacity var(--duration-150) var(--ease-linear);
-    opacity: 0;
+  .comment-icon:focus-visible .comment-icon__focus-indicator {
+    display: flex;
   }
-  .comment-bar--has-content .comment-bar__send-icon {
-    opacity: 1;
+
+  .comment-icon:focus-visible {
+    outline: none;
   }
-`;var T=class extends ie.PopElement{render(){return re.html`
-      <div
-        class=${(0,ne.classMap)({"comment-bar":!0})}
-        part="base"
-      >
-        <div class="comment-bar__actions">
-          <div>
-            <div class="comment-bar__avatars">
-              <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
-                <img src="https://i.pravatar.cc/90" alt="User avatar" />
-              </pop-comment-avatar>
-              <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
-                <img src="https://i.pravatar.cc/100" alt="User avatar" />
-              </pop-comment-avatar>
-            </div>
-          </div>
-          <pop-comment-input></pop-comment-input>
-          <pop-comment-icon class="comment-bar__send-icon" theme="neutral" variant="send" size="sm"></pop-comment-icon>
-        </div>
-      </div>
-    `}};T.styles=[l(T,T,"styles"),ee],T=i([(0,ae.customElement)("pop-comment-bar")],T);var se=T;var B=require("@floating-ui/dom"),lt=require("@lit/context"),pe=require("@popgrids/ui"),tt=require("@tiptap/core"),ce=Q(require("@tiptap/extension-document"),1),me=require("@tiptap/extension-mention"),ue=Q(require("@tiptap/extension-paragraph"),1),fe=Q(require("@tiptap/extension-placeholder"),1),he=Q(require("@tiptap/extension-text"),1),ge=Q(require("@tiptap/extension-typography"),1),dt=require("lit"),V=require("lit/decorators.js"),xe=require("lit/directives/class-map.js");var oe=require("@lit/context"),w=(0,oe.createContext)(Symbol("pop-grid-context"));var le=require("lit"),de=le.css`
-  :host {
+
+  .comment-icon__inner {
+    align-items: center;
+    background: var(--pop-comment-icon-background);
+    color: var(--pop-comment-icon-color);
     display: flex;
-    position: relative;
+    flex-direction: column;
+    flex-shrink: 0;
+    height: var(--pop-comment-icon-size);
+    justify-content: center;
+    position: absolute;
+    transform-origin: center;
+    transition: all 200ms ease-out;
+    transform: scale(var(--pop-comment-icon-scale));
+    width: var(--pop-comment-icon-size);
   }
 
-  .comment-input {
+  .comment-icon__icon-container {
+    align-items: center;
     display: flex;
-    align-items: flex-end;
+    height: 100%;
     justify-content: center;
-    max-height: 280px;
+    transition: transform ease-out 150ms;
     width: 100%;
-    padding-top: 4px;
-    padding-right: 8px;
-    padding-bottom: 4px;
-    padding-left: 12px;
-    background-color: var(--color-surface-alpha-singular-alpha-input-bar);
-    transition: all var(--duration-quick) var(--ease-quick);
-    border-radius: 18px;
-    min-height: 36px;
-    flex: 1 0 0;
   }
 
-  .comment-input--has-error {
-    border-color: var(--color-border-conditional-border-error);
-    background-color: var(--color-surface-alpha-alpha-error);
+  .comment-icon__icon-container svg {
+    width: calc(var(--pop-comment-icon-size) * 0.6875);
+    height: calc(var(--pop-comment-icon-size) * 0.6875);
   }
 
-  .comment-input__input {
-    display: flex;
-    padding: 5px 0;
-    align-items: flex-end;
-    gap: 2px;
-    flex: 1 0 0;
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    white-space: pre-wrap;
-  }
-
-  .tiptap__editor {
-    color: var(--color-text-text-default);
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    max-height: 264px;
-    outline: none;
-    overflow-y: auto;
-    position: relative;
-    width: 100%;
+  .comment-icon--variant-close.comment-icon--theme-neutral .comment-icon__icon-container svg {
+    width: var(--pop-comment-icon-size);
+    height: var(--pop-comment-icon-size);
   }
 
-  .tiptap__mention {
-    color: var(--color-text-singular-text-link);
-    font-weight: var(--font-weight-medium);
+  .comment-icon__icon-image {
+    display: flex;
+    width: var(--pop-comment-icon-size);
+    height: var(--pop-comment-icon-size);
   }
 
-  .tiptap__mention-popup {
-    background: var(--color-surface-bg-default);
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--color-border-border-edge-strong);
-    box-shadow: var(--shadow-lg);
-    position: absolute;
-    z-index: 1000;
-    transition: opacity 0.1s ease-in-out;
+  .comment-icon__icon {
+    display: flex;
   }
 
-  .tiptap__mention-popup ul {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-sm);
+  .comment-icon__icon-image + .comment-icon__icon {
+    display: none;
   }
 
-  .tiptap__mention-popup li {
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    align-items: center;
-    align-self: stretch;
-    background: var(--color-surface-buttons-secondary-bg-blank-resting);
-    border-radius: var(--radius-sm);
-    color: var(--color-text-text-default);
-    cursor: pointer;
-    display: -webkit-box;
-    display: flex;
-    flex: 1 0 0;
-    font-size: var(--text-widget-base);
-    line-height: var(--text-widget-base--line-height);
-    letter-spacing: var(--text-widget-base--letter-spacing);
-    font-weight: 400;
-    gap: 12px;
-    padding: 8px;
+  @media (hover: hover) and (pointer: fine) {
+    .comment-icon:hover .comment-icon__inner {
+      background: var(--pop-comment-icon-background-hover);
+      color: var(--pop-comment-icon-color-hover);
+      transition: transform var(--pop-ease-pop-hover) var(--pop-duration-pop-hover);
+      transform: scale(var(--pop-comment-icon-scale-hover));
+    }
+
+    .comment-icon:hover .comment-icon__icon-image {
+      display: none;
+    }
+
+    .comment-icon:hover .comment-icon__icon-image + .comment-icon__icon {
+      display: flex;
+    }
   }
 
-  .tiptap__mention-popup li:hover {
-    background: #f0f0f0;
+  .comment-icon:active .comment-icon__inner {
+    background: var(--pop-comment-icon-background-active);
+    color: var(--pop-comment-icon-color-active);
+    transform: scale(var(--pop-comment-icon-scale-active));
+    transition-duration: 100ms;
+  }
+
+  .comment-icon:is(:focus-visible) .comment-icon__inner {
+    background: var(--pop-comment-icon-background-focused);
+    color: var(--pop-comment-icon-color-focused);
+  }
+
+  /* Brand / Add */
+  .comment-icon--theme-brand.comment-icon--variant-add {
+    --pop-comment-icon-color: var(--pop-comment-color-black);
+    --pop-comment-icon-color-hover: var(--pop-comment-color-black);
+    --pop-comment-icon-color-active: var(--pop-comment-color-black);
+    --pop-comment-icon-color-focused: var(--pop-comment-color-black);
+    --pop-comment-icon-background: transparent;
+    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-hover);
+    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);
+    --pop-comment-icon-background-focused: transparent;
+  }
+
+  /* Brand / Close */
+  .comment-icon--theme-brand.comment-icon--variant-close {
+    --pop-comment-icon-color: var(--pop-comment-color-white);
+    --pop-comment-icon-color-hover: var(--pop-comment-color-white);
+    --pop-comment-icon-color-active: var(--pop-comment-color-white);
+    --pop-comment-icon-color-focused: var(--pop-comment-color-white);
+    --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);
+    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);
+    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);
+    --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);
+  }
+
+  /* Neutral / Add */
+  .comment-icon--theme-neutral.comment-icon--variant-add {
+    --pop-comment-icon-color: var(--pop-comment-color-white);
+    --pop-comment-icon-color-hover: var(--pop-comment-color-black);
+    --pop-comment-icon-color-active: var(--pop-comment-color-black);
+    --pop-comment-icon-color-focused: var(--pop-comment-color-white);
+    --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);
+    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-hover);
+    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);
+    --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);
+  }
+
+  /* Neutral / Close */
+  .comment-icon--theme-neutral.comment-icon--variant-close {
+    --pop-comment-icon-color: var(--pop-comment-color-white);
+    --pop-comment-icon-color-hover: var(--pop-comment-color-white);
+    --pop-comment-icon-color-active: var(--pop-comment-color-white);
+    --pop-comment-icon-color-focused: var(--pop-comment-color-white);
+    --pop-comment-icon-background: var(--pop-comment-bg-singular-resting);
+    --pop-comment-icon-background-hover: var(--pop-comment-bg-singular-resting);
+    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-resting);
+    --pop-comment-icon-background-focused: var(--pop-comment-bg-singular-resting);
+  }
+
+  /* Neutral / Send */
+  .comment-icon--theme-neutral.comment-icon--variant-send {
+    --pop-comment-icon-color: var(--pop-comment-color-reversed);
+    --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);
+    --pop-comment-icon-color-active: var(--pop-comment-color-reversed);
+    --pop-comment-icon-color-focused: var(--pop-comment-color-reversed);
+    --pop-comment-icon-background: var(--pop-comment-bg-reversed);
+    --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);
+    --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);
+    --pop-comment-icon-background-focused: var(--pop-comment-bg-reversed);
+  }
+
+  /* Neutral / More */
+  .comment-icon--theme-neutral.comment-icon--variant-more {
+    --pop-comment-icon-color: var(--pop-comment-color-default);
+    --pop-comment-icon-color-hover: var(--pop-comment-color-reversed);
+    --pop-comment-icon-color-active: var(--pop-comment-color-default);
+    --pop-comment-icon-color-focused: var(--pop-comment-color-default);
+    --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);
+    --pop-comment-icon-background-hover: var(--pop-comment-bg-reversed);
+    --pop-comment-icon-background-active: var(--pop-comment-bg-blank-resting);
+    --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);
+  }
+
+  /* Neutral / Cancel */
+  .comment-icon--theme-neutral.comment-icon--variant-cancel {
+    --pop-comment-icon-color: var(--pop-comment-color-default);
+    --pop-comment-icon-color-hover: var(--pop-comment-color-default);
+    --pop-comment-icon-color-active: var(--pop-comment-color-reversed);
+    --pop-comment-icon-color-focused: var(--pop-comment-color-default);
+    --pop-comment-icon-background: var(--pop-comment-bg-blank-resting);
+    --pop-comment-icon-background-hover: var(--pop-comment-bg-blank-resting);
+    --pop-comment-icon-background-active: var(--pop-comment-bg-reversed);
+    --pop-comment-icon-background-focused: var(--pop-comment-bg-blank-resting);
+  }
+`),Se=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[xe]}static get observedAttributes(){return[`counter`,`icon-url`,`size`,`theme`,`variant`,`type`,`disabled`]}onCounterChanged(){this.render()}onIconUrlChanged(){this.render()}onSizeChanged(){this.render()}onThemeChanged(){this.render()}onVariantChanged(){this.render()}onTypeChanged(){this.render()}onDisabledChanged(){this.render()}get counter(){return Number(this.getAttribute(`counter`)||`0`)}set counter(e){this.setAttribute(`counter`,String(e))}get iconUrl(){return this.getAttribute(`icon-url`)||void 0}set iconUrl(e){e===void 0?this.removeAttribute(`icon-url`):this.setAttribute(`icon-url`,e)}get size(){return this.getAttribute(`size`)||`md`}set size(e){this.setAttribute(`size`,e)}get theme(){return this.getAttribute(`theme`)||`brand`}set theme(e){this.setAttribute(`theme`,e)}get variant(){return this.getAttribute(`variant`)||`add`}set variant(e){this.setAttribute(`variant`,e)}get type(){return this.getAttribute(`type`)||`button`}set type(e){this.setAttribute(`type`,e)}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){e?this.setAttribute(`disabled`,``):this.removeAttribute(`disabled`)}onClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}this.emit(`pop-click`)}get icon(){let e=``;return this.theme===`brand`?this.variant===`add`?e=`
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M11 4.58331V17.4166M4.58333 11H17.4167"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        `:this.variant===`close`&&(e=`
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        `):this.theme===`neutral`&&(this.variant===`add`?e=`
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M11.0002 4.58301V17.4163M4.5835 10.9997H17.4168"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        `:this.variant===`close`?e=`
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M11.4628 11.4627L20.5373 20.5373M11.4628 20.5373L20.5373 11.4627"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        `:this.variant===`more`?e=`
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M12.8335 16.5L7.3335 11L12.8335 5.5"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        `:this.variant===`send`?e=`
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M18.0394 3.68048C18.2139 3.61601 18.3837 3.78583 18.3193 3.96036L12.3858 20.0241C12.314 20.2185 12.0369 20.2123 11.9739 20.0149L9.89172 13.4908C9.86908 13.4199 9.88424 13.3423 9.93191 13.2851L14.4838 7.82287C14.6536 7.61906 14.3807 7.34616 14.1769 7.516L8.71467 12.0678C8.65746 12.1155 8.57987 12.1307 8.50893 12.108L1.98489 10.0259C1.78743 9.96287 1.78121 9.68575 1.97565 9.61393L18.0394 3.68048Z"
+              fill="currentColor"
+            />
+          </svg>
+        `:this.variant===`cancel`&&(e=`
+          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M16.5 5.5L5.5 16.5M5.5 5.5L16.5 16.5"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        `)),e}getTemplate(){let e=this.disabled?`disabled`:``,t=[`comment-icon`,this.size?`comment-icon--size-${this.size}`:``,this.theme?`comment-icon--theme-${this.theme}`:``,this.variant?`comment-icon--variant-${this.variant}`:``].filter(Boolean).join(` `),n=this.iconUrl?`<img src="${this.iconUrl}" alt="" class="comment-icon__icon-image" />
+         <slot class="comment-icon__icon" name="icon">${this.icon}</slot>`:`<slot class="comment-icon__icon" name="icon">${this.icon}</slot>`;return`
+      <button
+        class="${t}"
+        part="base"
+        type="${this.type}"
+        ${e}
+      >
+        <pop-focus-indicator class="comment-icon__focus-indicator"></pop-focus-indicator>
+        <div class="comment-icon__inner mask mask-squircle">
+          <div class="comment-icon__icon-container" part="icon">${n}</div>
+        </div>
+      </button>
+    `}};customElements.get(`pop-comment-icon`)||customElements.define(`pop-comment-icon`,Se);var Ce=P(`
+  :host {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    align-items: flex-end;
   }
 
-  .tiptap__mention-popup li[data-selected] {
-    background: var(--color-surface-buttons-secondary-bg-blank-hover);
+  textarea {
+    flex: 1;
+    min-width: 0;
+    background: none;
+    border: none;
+    outline: none;
+    resize: none;
+    font-family: Inter, sans-serif;
+    font-size: 13px;
+    color: black;
+    line-height: 18px;
+    padding: 5px 0;
+    max-height: 200px;
+    overflow-y: auto;
+    width: 100%;
+    letter-spacing: -0.08px;
   }
 
-  .is-editor-empty:first-child::before {
-    color: var(--color-text-text-placeholder);
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
+  textarea::placeholder {
+    color: #697586;
   }
-`;var m=class extends pe.PopElement{constructor(){super(...arguments);this.variant="text";this._content="";this._error=null}createMentionSuggestion(){return{items:async({query:t})=>{if(!t||t.trim().length===0)return[];let e=this.apiState?.client;if(!e)return[];let{data:r,error:s}=await e.GET("/api/v1/accounts",{params:{query:{by_name:t}}});return s?[]:r?r.map(o=>({id:o.id,label:o.name,href:o.url})):[]},render:()=>{let t,e,r,s,o=0,K=()=>{let d=s.querySelectorAll("li");d.forEach((c,k)=>{k===o?c.setAttribute("data-selected","true"):c.removeAttribute("data-selected")}),d.length>0?(e.style.visibility="visible",e.style.opacity="1"):(e.style.visibility="hidden",e.style.opacity="0")},nt=async d=>{if(!e||!d)return;let c={getBoundingClientRect(){return d}},{x:k,y:A}=await(0,B.computePosition)(c,e,{placement:"top-start",middleware:[(0,B.offset)(6),(0,B.flip)(),(0,B.shift)({padding:8})]});Object.assign(e.style,{position:"absolute",left:`${k}px`,top:`${A}px`})},M=()=>{e&&(e.style.opacity="0",e.style.visibility="hidden",setTimeout(()=>{e?.remove(),e=void 0,s=void 0},150))};return{onStart:d=>{t=d.command;let c=this.shadowRoot?.querySelector(".tiptap__mention-popup");if(c&&c.remove(),e=document.createElement("div"),e.className="tiptap__mention-popup",e.style.opacity="0",e.style.transition="opacity 150ms ease-in-out",e.style.visibility="hidden",this.shadowRoot?.appendChild(e),r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,s=document.createElement("ul");for(let A of r){let N=document.createElement("li");N.textContent=A.label,N.addEventListener("click",ft=>{ft.preventDefault(),ft.stopPropagation(),t({id:A.id,label:A.label,href:A.href}),M()}),s.appendChild(N)}e.appendChild(s),K();let k=d.clientRect?.();k&&nt(k)},onUpdate:d=>{if(t=d.command,r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,s?s.innerHTML="":(s=document.createElement("ul"),e.appendChild(s));for(let k of r){let A=document.createElement("li");A.textContent=k.label,A.addEventListener("click",N=>{N.preventDefault(),N.stopPropagation(),t({id:k.id,label:k.label,href:k.href}),M()}),s.appendChild(A)}K();let c=d.clientRect?.();c&&nt(c)},onKeyDown:d=>{if(d.event?.key==="Escape")return M(),!0;if(d.event?.key==="ArrowDown")return o=(o+1)%r.length,K(),!0;if(d.event?.key==="ArrowUp")return o=(o-1+r.length)%r.length,K(),!0;if(d.event?.key==="Enter"){let c=r[o];if(c)return t({id:c.id,label:c.label,href:c.href}),M(),!0}return!1},onExit:()=>{M()}}}}}async firstUpdated(){await this.updateComplete,this.initializeEditor()}disconnectedCallback(){this.editor?.destroy(),super.disconnectedCallback()}initializeEditor(){if(!this._editor)return;let t=this.createMentionSuggestion();this.editor=new tt.Editor({element:this._editor,content:this._content,editable:!0,editorProps:{attributes:{class:"tiptap__editor"}},extensions:[ce.default,me.Mention.configure({HTMLAttributes:{class:"tiptap__mention"},renderText({options:e,node:r}){return`${e.suggestion.char}${r.attrs.label??r.attrs.id}`},renderHTML({options:e,node:r}){return["a",(0,tt.mergeAttributes)({href:`${r.attrs.href}`},e.HTMLAttributes),`${e.suggestion.char}${r.attrs.label??r.attrs.id}`]},suggestion:t}).extend({addAttributes(){return{id:{default:null,parseHTML:e=>e.getAttribute("data-id"),renderHTML:e=>({"data-id":e.id})},label:{default:null,parseHTML:e=>e.getAttribute("data-label"),renderHTML:e=>({"data-label":e.label})},href:{default:null,parseHTML:e=>e.getAttribute("href"),renderHTML:e=>({href:e.href})}}}}),ue.default,fe.default.configure({placeholder:"Try mentioning someone using @ symbol"}),he.default,ge.default],onUpdate:({editor:e})=>{this._content=e.getHTML(),this.emit("pop-content-change",this._content)}})}render(){return dt.html`<div
-      class=${(0,xe.classMap)({"comment-input":!0,[`comment-input--variant-${this.variant}`]:!0,"comment-input--has-error":!!this._error})}
-      part="base"
-    >
-      <div class="comment-input__input"></div>
-      ${this._error?dt.html`<div class="comment-input__error">${this._error.message}</div>`:""}
-    </div>`}};m.styles=[l(m,m,"styles"),de],i([(0,lt.consume)({context:$,subscribe:!0})],m.prototype,"apiState",2),i([(0,lt.consume)({context:w,subscribe:!0})],m.prototype,"gridContext",2),i([(0,V.property)({type:String})],m.prototype,"variant",2),i([(0,V.query)(".comment-input__input")],m.prototype,"_editor",2),i([(0,V.state)()],m.prototype,"_content",2),i([(0,V.state)()],m.prototype,"_error",2),m=i([(0,V.customElement)("pop-comment-input")],m);var ve=m;var Ce=require("@lit/context"),we=require("@popgrids/ui"),et=require("lit"),it=require("lit/decorators.js"),Se=require("lit/directives/class-map.js"),ke=require("lit/directives/when.js");var ye=require("lit"),be=ye.css`
+`),H=class extends F{constructor(...e){super(...e),this.events={input:`onInput`,keydown:`onKeyDown`}}get styleSheets(){return[Ce]}onInput(e){let t=e.target;t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`}onKeyDown(e){e.key===`Escape`&&(this.gridStore.editingCommentId.value||this.gridStore.replyingTo.value)&&(e.stopPropagation(),this.gridStore.editingCommentId.value=null,this.gridStore.replyingTo.value=null)}getValue(){return this.getElement(`textarea`)?.value??``}setValue(e){let t=this.getElement(`textarea`);t&&(t.value=e,t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`)}clear(){let e=this.getElement(`textarea`);e&&(e.value=``,e.style.height=`auto`)}focus(){this.getElement(`textarea`)?.focus()}setupEffects(){this.addEffect(()=>{let e=this.gridStore.replyingToComment.value,t=this.gridStore.editingComment.value,n=`Comment`;t?n=`Edit comment...`:e?.author?.name&&(n=`Reply to ${e.author.name}`),this.setAttr(`textarea`,`placeholder`,n)})}getTemplate(){return`
+      <textarea rows="1" placeholder="Comment"></textarea>
+    `}};I([S(E)],H.prototype,`gridStore`,void 0),customElements.get(`pop-comment-input`)||customElements.define(`pop-comment-input`,H);var we=P(`
   :host {
     display: block;
+
+    --pop-thread-link: rgba(0, 0, 32, 0.5);
+    --pop-thread-link-hover: rgba(0, 0, 32, 0.8);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --pop-thread-link: rgba(255, 255, 255, 0.5);
+      --pop-thread-link-hover: rgba(255, 255, 255, 0.8);
+    }
+  }
+
+  :host(.dark) {
+    --pop-thread-link: rgba(255, 255, 255, 0.5);
+    --pop-thread-link-hover: rgba(255, 255, 255, 0.8);
   }
 
-  .comment-thread {
+  .thread {
+    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .thread__replies {
+    align-items: center;
     display: flex;
     flex-direction: column;
-    align-items: stretch;
     gap: 12px;
+    padding-left: 24px;
   }
 
-  .comment-thread--size-sm {
+  .thread__more {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    gap: 6px;
+    padding-left: 30px;
+    transition: opacity 0.15s ease;
+    width: 100%;
   }
 
-  .comment-thread--size-md {
+  .thread__more:hover {
+    opacity: 1;
   }
 
-  .comment-thread__replies {
-    display: flex;
-    padding-left: var(--spacing-3xl, 24px);
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-lg, 12px);
-  }
-`;var S=class extends we.PopElement{get comment(){return this.gridContext?.comments.find(a=>a.id===this.id)}render(){return et.html`
-      <div
-        class=${(0,Se.classMap)({"comment-thread":!0})}
-      >
-        <pop-comment id=${this.id}></pop-comment>
-        ${(0,ke.when)((this.comment?.repliesCount??0)>0,()=>et.html`
-            <div class="comment-thread__replies">
-              ${this.comment?.replies.map(a=>et.html`<pop-comment id=${a.id}></pop-comment>`)}
-            </div>
-          `)}
+  .thread__more-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--pop-muted-foreground);
+    flex-shrink: 0;
+    opacity: 0.1;
+  }
+`),U=2,W=class extends F{constructor(...e){super(...e),this._showAll=!1,this.events={click:`onClick`}}get styleSheets(){return[we]}onClick(e){e.target.closest(`.thread__more-btn`)&&(this._showAll=!0,this.render())}setupEffects(){this.addEffect(()=>{let e=this.getAttribute(`comment-id`),t=this.gridStore.scrollingCommentId.value;e&&t&&this.gridStore.repliesFor(e).some(e=>e.id===t)&&(this._showAll=!0),this.gridStore.comments.value,this.render()})}getTemplate(){let e=this.getAttribute(`comment-id`);if(!e)return``;let t=this.gridStore.repliesFor(e),n=this._showAll||t.length<=U?t:t.slice(0,U),r=t.length-n.length,i=r>0?`<div class="thread__more">
+            <div class="thread__more-dot"></div>
+            <button class="thread__more-btn btn-link btn-link--size-sm btn-link--theme-default" type="button">
+              Show ${r} more ${r===1?`reply`:`replies`}
+            </button>
+          </div>`:``;return`
+      <div class="thread">
+        <pop-comment comment-id="${e}"></pop-comment>
+        ${t.length>0?`<div class="thread__replies">
+            ${n.map(e=>`<pop-comment comment-id="${e.id}"></pop-comment>`).join(``)}
+            ${i}
+          </div>`:``}
       </div>
-    `}};S.styles=[l(S,S,"styles"),be],i([(0,Ce.consume)({context:w,subscribe:!0})],S.prototype,"gridContext",2),i([(0,it.property)({type:String})],S.prototype,"id",2),S=i([(0,it.customElement)("pop-comment-thread")],S);var je=S;var Ee=require("@lit/context"),Te=require("@popgrids/ui"),Me=require("lit"),q=require("lit/decorators.js"),pt=require("lit/directives/class-map.js"),Ve=require("lit/directives/style-map.js"),qe=require("@popgrids/ui");function De(n){let a=(Date.now()-n.getTime())/1e3;return a<60?`${Math.floor(a)}s`:a<3600?`${Math.floor(a/60)}m`:a<86400?`${Math.floor(a/3600)}h`:`${Math.floor(a/86400)}d`}var Le=require("lit/directives/if-defined.js");var Ae=require("lit"),_e=Ae.css`
+    `}};I([S(E)],W.prototype,`gridStore`,void 0),customElements.get(`pop-comment-thread`)||customElements.define(`pop-comment-thread`,W);function G(e){let t=e instanceof Date?e:new Date(e),n=(Date.now()-t.getTime())/1e3;return n<1?`now`:n<60?`${Math.floor(n)}s`:n<3600?`${Math.floor(n/60)}m`:n<86400?`${Math.floor(n/3600)}h`:n<604800?`${Math.floor(n/86400)}d`:`${Math.floor(n/604800)}w`}var Te=P(`
   :host {
     display: block;
+    width: 100%;
+    --pop-comment-hover: rgba(0, 0, 32, 0.04);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --pop-comment-hover: rgba(255, 255, 255, 0.04);
+    }
   }
 
   .comment {
     display: flex;
     width: 100%;
+    gap: 8px;
     align-items: center;
     background-color: transparent;
-
     border: none;
     padding: 0;
-    border-radius: var(--radius-md);
+    border-radius: var(--pop-radius-md);
     outline: 6px solid transparent;
+    text-align: left;
     transition:
-      background-color 0.2s ease,
-      outline-color 0.2s ease;
+      background-color 150ms ease,
+      outline-color 150ms ease;
   }
 
-  .comment--size-sm {
+  :host([data-size="sm"]) .comment,
+  :host:not([data-size]) .comment {
     --avatar-size: 32px;
     --width: 32px;
-
     gap: 8px;
   }
 
-  .comment--size-lg {
+  :host([data-size="lg"]) .comment {
     --avatar-size: 56px;
     --width: 56px;
-
     gap: 12px;
   }
 
   .comment--is-selected {
-    background-color: var(--color-black-alpha-900);
-    outline-color: var(--color-black-alpha-900);
+    background-color: var(--pop-muted);
+    outline-color: var(--pop-muted);
+  }
+
+  :host(.is-signed-in) .comment {
+    cursor: pointer;
   }
 
   @media (hover: hover) and (pointer: fine) {
     .comment:hover .comment__avatar {
-      transform: translateX(2px);
+      --avatar-translate-x: 2px;
+    }
+
+    .comment__avatar:hover {
+      /* --avatar-scale: 1.06; */
+    }
+
+    .comment .comment__menu {
+      display: none;
+    }
+
+    .comment:hover .comment__menu {
+      display: flex;
     }
   }
 
   .comment--is-selected .comment__avatar {
-    transform: translateX(2px);
+    --avatar-translate-x: 2px;
   }
 
   .comment__avatar {
-    --border-size: 0;
+    --comment-avatar-border-size: 0;
+    --avatar-translate-x: 0px;
+    --avatar-scale: 1;
     width: var(--avatar-size);
     height: var(--avatar-size);
+    transform: translateX(var(--avatar-translate-x)) scale(var(--avatar-scale));
+    transition: transform var(--pop-duration-quick) var(--pop-ease-quick);
   }
 
   .comment__user {
@@ -763,12 +896,45 @@
     align-self: stretch;
   }
 
+  .comment__menu {
+    display: flex;
+    justify-self: flex-end;
+  }
+
+  .comment__menu-trigger {
+    background: none;
+    border: none;
+    cursor: pointer;
+    border-radius: 9999px;
+    aspect-ratio: 1;
+    position: relative;
+  }
+
+  .comment__menu-trigger:before {
+    content: "";
+    height: 40px;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+  }
+
+  .comment__user-meta {
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+    flex-shrink: 0;
+    align-self: stretch;
+    flex-grow: 1;
+  }
+
   .comment__user-name {
-    color: var(--color-text-text-default, #000);
+    color: var(--pop-foreground);
     font-feature-settings:
       "liga" off,
       "clig" off;
-    font-family: Inter;
+    font-family: Inter, sans-serif;
     font-size: var(--text-widget-base, 13px);
     font-style: normal;
     font-weight: 500;
@@ -777,31 +943,30 @@
   }
 
   .comment__timestamp {
-    color: var(--color-text-text-default-dim-light, #697586);
+    color: var(--pop-muted-foreground);
     font-feature-settings:
       "liga" off,
       "clig" off;
-    /* Widget/Regular */
-    font-family: Inter;
+    font-family: Inter, sans-serif;
     font-size: var(--text-widget-base, 13px);
     font-style: normal;
     font-weight: 400;
     line-height: var(--text-widget-base--line-height, 18px);
     letter-spacing: -0.08px;
+    opacity: 0.5;
   }
 
   .comment__text {
-    /* Base styles */
     align-self: stretch;
-    color: var(--color-text-text-default-dim);
+    color: var(--pop-foreground);
     font-feature-settings:
       "liga" off,
       "clig" off;
-    font-family: Inter;
-    font-size: var(--text-widget-base, 13px);
+    font-family: Inter, sans-serif;
+    font-size: 13px;
     font-style: normal;
     font-weight: 400;
-    line-height: var(--text-widget-base--line-height, 18px);
+    line-height: 18px;
     letter-spacing: -0.08px;
     text-align: left;
 
@@ -812,85 +977,279 @@
     overflow: hidden;
   }
 
-  .comment__text.expanded {
-    /* Remove line clamping */
+  .comment__text.expanded,
+  .comment--is-selected .comment__text {
     -webkit-line-clamp: initial;
     display: block;
   }
-`;var x=class extends Te.PopElement{constructor(){super(...arguments);this._randomColor=(0,qe.sampleColor)();this._expanded=!1}handleClick(){let t=this.selected;if(t?this.gridContext?.selectComment(null):this.gridContext?.selectComment(this.id),this.emit("pop-click",{id:this.id,selected:!t}),!this._expanded&&this._text){let e=this._text.offsetHeight;this._expanded=!0,this.requestUpdate(),this.updateComplete.then(()=>{let r=this._text.scrollHeight;this._text.style.height=`${e}px`,this._text.style.overflow="hidden",this._text.offsetHeight,this._text.style.transition="height var(--duration-quick) var(--ease-quick)",this._text.style.height=`${r}px`,setTimeout(()=>{this._text.style.height="",this._text.style.overflow=""},300)})}}get comment(){return this.findCommentOrReply(this.gridContext?.comments??[],this.id)}get commentAvatarSize(){return this.gridContext?.grid?.layout==="sm"?"xs":"sm"}get selected(){return this.gridContext?.selectedCommentId===this.id}findCommentOrReply(t,e){let r=[...t];for(;r.length>0;){let s=r.pop();if(s){if(s.id===e)return s;s.replies&&s.replies.length>0&&r.push(...s.replies)}}return null}render(){return Me.html`
-      <button
-        class=${(0,pt.classMap)({comment:!0,[`comment--size-${this.gridContext?.grid?.layout??"sm"}`]:!0,"comment--is-selected":this.selected})}
-        part="base"
-        type="button"
-        @click=${this.handleClick}
+
+  .comment__mention {
+    color: #155eef;
+    font-weight: 500;
+  }
+
+  .comment__menu {
+    position: relative;
+  }
+
+  .comment__dropdown {
+    background-color: var(--pop-background);
+    border-radius: 6px;
+    box-shadow: var(--pop-shadow-xl);
+    display: none;
+    flex-direction: column;
+    gap: 6px;
+    padding: 6px;
+    pointer-events: auto;
+    position: fixed;
+    width: 120px;
+    z-index: 1000;
+  }
+
+  .comment__dropdown.is-open {
+    display: flex;
+  }
+
+  .comment__dropdown-item {
+    align-items: center;
+    background: none;
+    border-radius: 4px;
+    border: none;
+    color: var(--pop-foreground);
+    cursor: pointer;
+    display: flex;
+    flex: 1 0 0;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    justify-content: center;
+    min-height: 40px;
+    padding: 0 12px;
+    text-align: left;
+    transition: background-color 100ms ease;
+    width: 100%;
+  }
+
+  .comment__dropdown-item:hover {
+    background-color: var(--pop-comment-hover, rgba(0, 0, 0, 0.04));
+  }
+
+  .comment__dropdown-item--danger {
+    color: #ef4444;
+  }
+
+  .comment__edit-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 8px;
+    margin-top: 4px;
+  }
+
+  .comment__edit-input {
+    width: 100%;
+    background: var(--pop-background, #ffffff);
+    color: var(--pop-foreground, #000000);
+    border: 1px solid var(--pop-border, #e4e4e7);
+    border-radius: var(--pop-radius-sm, 4px);
+    padding: 6px 8px;
+    font-family: Inter, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    resize: vertical;
+    outline: none;
+  }
+
+  .comment__edit-input:focus {
+    border-color: var(--pop-ring, #000020);
+  }
+
+  .comment__edit-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .comment__edit-save,
+  .comment__edit-cancel {
+    font-size: 12px;
+    padding: 4px 8px;
+    cursor: pointer;
+  }
+
+  .comment--deleted .comment__text {
+    color: var(--pop-muted-foreground, #697586);
+    font-style: italic;
+    opacity: 0.8;
+  }
+`),K=class extends F{constructor(...e){super(...e),this.events={click:`onClick`},this._expanded=!1,this._dropdownOpen=!1,this._onOutsideClick=e=>{let t=e.composedPath(),n=this.getElement(`.comment__dropdown`),r=this.getElement(`.comment__menu-trigger`);n&&r&&!t.includes(n)&&!t.includes(r)&&this.closeDropdown()},this._timeUpdateTimer=null}static get observedAttributes(){return[`data-size`,`comment-id`]}onDataSizeChanged(){this.render()}onCommentIdChanged(){this.render()}get size(){return this.getAttribute(`data-size`)||`sm`}get commentAvatarSize(){return this.size===`sm`?`xs`:`sm`}get styleSheets(){return[Te]}toggleDropdown(){this._dropdownOpen?this.closeDropdown():this.openDropdown()}openDropdown(){this._dropdownOpen=!0;let e=this.getElement(`.comment__dropdown`),n=this.getElement(`.comment__menu-trigger`);if(e&&n){e.classList.add(`is-open`);let r=()=>{(0,t.computePosition)(n,e,{placement:`bottom-end`,middleware:[(0,t.offset)(4),(0,t.flip)(),(0,t.shift)({padding:8})],strategy:`fixed`}).then(({x:t,y:n})=>{Object.assign(e.style,{left:`${t}px`,top:`${n}px`,position:`fixed`})})};this._floatingCleanup=(0,t.autoUpdate)(n,e,r),document.addEventListener(`mousedown`,this._onOutsideClick)}}closeDropdown(){this._dropdownOpen=!1;let e=this.getElement(`.comment__dropdown`);e&&e.classList.remove(`is-open`),this._floatingCleanup&&=(this._floatingCleanup(),void 0),document.removeEventListener(`mousedown`,this._onOutsideClick)}async deleteComment(){let e=this.getAttribute(`comment-id`);e&&confirm(`Are you sure you want to delete this comment?`)&&await this.gridStore.deleteComment(e)}async flagComment(){let e=this.getAttribute(`comment-id`);e&&(await this.gridStore.flagComment(e)?alert(`Comment flagged successfully.`):alert(`Failed to flag comment.`))}onClick(e){let t=e.target;if(t.closest(`.comment__menu-trigger`)){e.stopPropagation(),this.toggleDropdown();return}let n=t.closest(`.comment__dropdown-item`);if(n){e.stopPropagation();let t=n.getAttribute(`data-action`),r=this.getAttribute(`comment-id`);t===`edit`&&r?(this.gridStore.replyingTo.value=null,this.gridStore.editingCommentId.value=r):t===`delete`?this.deleteComment():t===`flag`&&this.flagComment(),this.closeDropdown();return}if(t.closest(`.comment__dropdown`)){e.stopPropagation();return}if(!p.value)return;let r=this.getAttribute(`comment-id`);r&&this.gridStore.comments.value.find(e=>e.id===r)?.status!==`deleted`&&(this.gridStore.replyingTo.value===r?this.gridStore.replyingTo.value=null:this.gridStore.replyingTo.value=r,this.expandText())}expandText(){let e=this.getElement(`.comment__text`);if(!this._expanded&&e){let t=e.offsetHeight;this._expanded=!0,this.render();let n=this.getElement(`.comment__text`);if(n){let e=n.scrollHeight;n.style.height=`${t}px`,n.style.overflow=`hidden`,n.offsetHeight,n.style.transition=`height var(--pop-duration-quick) var(--pop-ease-quick)`,n.style.height=`${e}px`,setTimeout(()=>{n.style.height=``,n.style.overflow=``},300)}}}disconnectedCallback(){this.closeDropdown(),this.stopTimeUpdates(),super.disconnectedCallback()}startTimeUpdates(){this.stopTimeUpdates();let e=this.getAttribute(`comment-id`);if(!e)return;let t=this.gridStore.comments.value.find(t=>t.id===e);if(!t)return;let n=()=>{let e=this.getElement(`.comment__timestamp`);e&&(e.textContent=G(t.createdAt));let r=Date.now()-(typeof t.createdAt==`number`?t.createdAt:Date.parse(String(t.createdAt))),i=6e4;i=r<6e4?5e3:r<36e5?6e4:18e5,this._timeUpdateTimer=setTimeout(n,i)},r=Date.now()-(typeof t.createdAt==`number`?t.createdAt:Date.parse(String(t.createdAt)))<6e4?5e3:6e4;this._timeUpdateTimer=setTimeout(n,r)}stopTimeUpdates(){this._timeUpdateTimer&&=(clearTimeout(this._timeUpdateTimer),null)}setupEffects(){this.addEffect(()=>{let e=this.getAttribute(`comment-id`),t=p.value,n=this.gridStore.replyingTo.value,r=this.gridStore.editingCommentId.value,i=this.gridStore.scrollingCommentId.value;this.classList.toggle(`is-signed-in`,t!==null),this.classList.toggle(`is-replying`,e!==null&&n===e),this.classList.toggle(`is-editing`,e!==null&&r===e),this.gridStore.comments.value,this.render(),this.startTimeUpdates(),e&&i===e&&setTimeout(()=>{let t=this.shadowRoot?.querySelector(`#comment-${e}`);t?t.scrollIntoView({behavior:`smooth`,block:`center`}):this.scrollIntoView({behavior:`smooth`,block:`center`}),this.gridStore.scrollingCommentId.value=null},50)})}getTemplate(){let e=this.getAttribute(`comment-id`);if(!e)return``;let t=this.gridStore.comments.value.find(t=>t.id===e);if(!t)return``;let n=t.status===`deleted`,r=t.authorDeleted===!0,i=n||r,a=i?``:t.author?.image?`<img src="${t.author.image}" alt="${t.author.name??`User avatar`}" />`:B(t.author?.name),o=this.gridStore.replyingTo.value,s=e!==null&&o===e,c=this.size,l=p.value&&t.author&&p.value.id===t.author.id,u=p.value&&!n?`<div class="comment__menu">
+            <button class="comment__menu-trigger" type="button">
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9 9.5C9.27614 9.5 9.5 9.27614 9.5 9C9.5 8.72386 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.72386 8.5 9C8.5 9.27614 8.72386 9.5 9 9.5Z"
+                  fill="white"
+                />
+                <path
+                  d="M12.5 9.5C12.7761 9.5 13 9.27614 13 9C13 8.72386 12.7761 8.5 12.5 8.5C12.2239 8.5 12 8.72386 12 9C12 9.27614 12.2239 9.5 12.5 9.5Z"
+                  fill="white"
+                />
+                <path
+                  d="M5.5 9.5C5.77614 9.5 6 9.27614 6 9C6 8.72386 5.77614 8.5 5.5 8.5C5.22386 8.5 5 8.72386 5 9C5 9.27614 5.22386 9.5 5.5 9.5Z"
+                  fill="white"
+                />
+                <path
+                  d="M9 9.5C9.27614 9.5 9.5 9.27614 9.5 9C9.5 8.72386 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.72386 8.5 9C8.5 9.27614 8.72386 9.5 9 9.5Z"
+                  stroke="#000020"
+                  stroke-opacity="0.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12.5 9.5C12.7761 9.5 13 9.27614 13 9C13 8.72386 12.7761 8.5 12.5 8.5C12.2239 8.5 12 8.72386 12 9C12 9.27614 12.2239 9.5 12.5 9.5Z"
+                  stroke="#000020"
+                  stroke-opacity="0.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M5.5 9.5C5.77614 9.5 6 9.27614 6 9C6 8.72386 5.77614 8.5 5.5 8.5C5.22386 8.5 5 8.72386 5 9C5 9.27614 5.22386 9.5 5.5 9.5Z"
+                  stroke="#000020"
+                  stroke-opacity="0.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+            <div class="comment__dropdown">
+              ${l?`<button class="comment__dropdown-item" type="button" data-action="edit">Edit</button>
+                     <button class="comment__dropdown-item comment__dropdown-item--danger" type="button" data-action="delete">Delete</button>`:``}
+              <button class="comment__dropdown-item" type="button" data-action="flag">Flag</button>
+            </div>
+          </div>`:``;return`
+      <div
+        class="comment comment--size-${c}${s?` comment--is-selected`:``}${n?` comment--deleted`:``}"
+        id="comment-${e}"
       >
         <div class="comment__user">
           <pop-comment-avatar
             class="comment__avatar"
-            size=${this.commentAvatarSize}
-            style="--comment-avatar-border-size: 0;"
+            size="${this.commentAvatarSize}"
+            data-color-key="${t.author?.id??t.author?.name??``}"
+            ${i?`deleted`:``}
           >
-            <img
-              src=${(0,Le.ifDefined)(this.comment?.account?.avatar?.url)}
-              alt="${this.comment?.account?.name}'s avatar"
-              style=${(0,Ve.styleMap)({backgroundColor:this._randomColor})}
-            />
+            ${a}
           </pop-comment-avatar>
         </div>
         <div class="comment__content">
           <div class="comment__info">
-            <div class="comment__user">
-              <div class="comment__user-name">${this.comment?.account?.name}</div>
-              <div class="comment__timestamp">
-                ${this.comment?De(new Date(this.comment.createdAt??"")):""}
+            <div class="comment__user-meta">
+              <div class="comment__user-name">
+                ${n?`[Deleted]`:r?`[Deleted user]`:t.author?.name??``}
               </div>
+              <div class="comment__timestamp">${G(t.createdAt)}</div>
             </div>
+            ${u}
           </div>
-          <div
-            class=${(0,pt.classMap)({comment__text:!0,expanded:this._expanded})}
-          >
-            ${this.comment?.content}
-          </div>
+          <div class="comment__text${this._expanded?` expanded`:``}">${t.body}</div>
         </div>
-      </button>
-    `}};x.styles=[l(x,x,"styles"),_e],i([(0,Ee.consume)({context:w,subscribe:!0})],x.prototype,"gridContext",2),i([(0,q.property)({type:String})],x.prototype,"id",2),i([(0,q.state)()],x.prototype,"_randomColor",2),i([(0,q.state)()],x.prototype,"_expanded",2),i([(0,q.query)(".comment__text")],x.prototype,"_text",2),x=i([(0,q.customElement)("pop-comment")],x);var He=x;var ct=require("@lit/context"),ze=require("@popgrids/ui"),R=require("lit"),G=require("lit/decorators.js"),Ie=require("lit/directives/class-map.js");var $e=require("lit"),Be=$e.css`
+      </div>
+    `}};I([S(E)],K.prototype,`gridStore`,void 0),customElements.get(`pop-comment`)||customElements.define(`pop-comment`,K);var Ee=P(`
   :host {
     display: flex;
-  }
-
-  .feed {
-    align-items: flex-start;
-    background: var(--color-border-singular-border-island, #fff);
-    border-radius: var(--border-radius-2xl, 16px);
-    border: 1px solid var(--color-border-singular-border-island, #fff);
-    box-shadow: var(--shadow-3xl);
-    display: grid;
-    grid-template-rows: 1fr 50px;
+    background: var(--pop-background);
+    border-radius: var(--pop-radius-2xl);
+    border: 1px solid var(--pop-background);
+    box-shadow: var(--pop-shadow-3xl);
+    display: block;
+    left: 0;
     max-height: 400px;
     max-width: 400px;
+    min-width: 343px;
+    opacity: 0;
     overflow: hidden;
-    position: relative;
+    padding: 0 4px 0 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+    transform: scale(0.94);
+    transition:
+      opacity var(--pop-duration-quick) var(--pop-ease-quick),
+      transform var(--pop-duration-quick) var(--pop-ease-quick),
+      display var(--pop-duration-quick) allow-discrete;
   }
 
-  .feed__footer {
-    position: absolute;
-    bottom: 0;
-    min-height: 50px;
-    width: 100%;
+  :host([data-current-placement="top-start"]) {
+    transform-origin: left bottom;
+  }
+
+  :host([data-current-placement="bottom-start"]) {
+    transform-origin: left top;
+  }
+
+  :host([data-current-placement="top-end"]) {
+    transform-origin: right bottom;
+  }
+
+  :host([data-current-placement="bottom-end"]) {
+    transform-origin: right top;
+  }
+
+  :host([data-current-placement="top"]) {
+    transform-origin: bottom;
+  }
+
+  :host([data-current-placement="bottom"]) {
+    transform-origin: top;
+  }
+
+  :host([open]) {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+
+    @starting-style {
+      display: flex;
+      opacity: 0;
+      transform: scale(0.94);
+    }
   }
 
-  .feed__comment-bar {
+  .feed {
+    display: grid;
+    grid-template-rows: 1fr 50px;
   }
 
   .feed__content {
     align-items: flex-start;
     align-self: stretch;
     display: flex;
-    gap: var(--spacing-md, 8px);
+    gap: 8px;
     min-height: 80px;
     max-height: 290px;
-    overflow: hidden auto;
-    padding: var(--spacing-md, 8px) 20px var(--spacing-xl, 16px) var(--spacing-md, 8px);
+  }
+
+  .feed__empty {
+    padding: 24px 16px 24px 8px;
+    text-align: center;
+    font-family: Inter, sans-serif;
+    font-size: 13px;
+    color: var(--pop-muted-foreground);
+    line-height: 18px;
+  }
+
+  .feed__footer {
+    position: absolute;
+    bottom: 0;
+    min-height: 50px;
+    width: 100%;
   }
 
   .feed__main {
@@ -899,173 +1258,208 @@
     display: flex;
     flex-direction: column;
     flex: 1 0 0;
-    gap: var(--spacing-xl, 16px);
+    gap: 16px;
     min-height: 100%;
+    overflow: hidden auto;
+    padding: 8px 10px 8px 8px;
   }
 
-  .feed--size-md .feed__main {
-    gap: var(--spacing-lg, 12px);
+  .feed__main::-webkit-scrollbar {
+    width: 4px;
   }
-`;var y=class extends ze.PopElement{constructor(){super(...arguments);this.open=!1;this.size="sm"}render(){return this.gridContext?this.gridContext.comments.length===0?R.html`<div class="feed__empty">No comments yet</div>`:R.html`
-      <div
-        class=${(0,Ie.classMap)({feed:!0,"feed--is-open":this.open,[`feed--size-${this.gridContext.grid?.layout??"sm"}`]:!0})}
-        part="base"
-      >
+
+  .feed__main::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .feed__main::-webkit-scrollbar-thumb {
+    background: var(--pop-border);
+    border-radius: 100px;
+  }
+`),q=class extends F{constructor(...e){super(...e),this._footerChild=null,this._wasOpen=!1}get styleSheets(){return[Ee]}connectedCallback(){super.connectedCallback(),document.addEventListener(`mousedown`,this),document.addEventListener(`keydown`,this)}disconnectedCallback(){document.removeEventListener(`mousedown`,this),document.removeEventListener(`keydown`,this),super.disconnectedCallback()}handleEvent(e){if(e.type===`mousedown`){this.onOutsideClick(e);return}if(e.type===`keydown`){this.onKeyDown(e);return}super.handleEvent(e)}onOutsideClick(e){if(!this.gridStore.open.value)return;let t=e.composedPath(),n=this.getRootNode(),r=n instanceof ShadowRoot?n.host:null;!t.includes(this)&&(!r||!t.includes(r))&&(this.gridStore.open.value=!1)}onKeyDown(e){e.key===`Escape`&&(this.gridStore.open.value=!1)}setupEffects(){this.addEffect(()=>{let e=this.gridStore.open.value;e&&!this._wasOpen&&this.gridStore.grid.value&&v(this.gridStore.apiUrl,this.gridStore.publicKey),this._wasOpen=e,this.update()})}update(){this.gridStore.open.value?this.setAttribute(`open`,``):this.removeAttribute(`open`);let e=this.getElement(`.feed__main`);if(e){let t=this.gridStore.topLevelComments.value;if(t.length===0)e.querySelector(`.feed__empty`)||(e.innerHTML=`<div class="feed__empty">Waiting for your thoughts…</div>`);else{let n=Array.from(e.querySelectorAll(`pop-comment-thread`)).map(e=>e.getAttribute(`comment-id`)),r=t.map(e=>e.id);(n.length!==r.length||n.some((e,t)=>e!==r[t]))&&(e.innerHTML=t.map(e=>`<pop-comment-thread comment-id="${e.id}"></pop-comment-thread>`).join(``))}}let t=this.getElement(`.feed__footer`);if(t){let e=p.value===null?`pop-auth-panel`:`pop-comment-bar`;this._footerChild!==e&&(this._footerChild=e,t.innerHTML=`<${e}></${e}>`)}}getTemplate(){return`
+      <div class="feed">
         <div class="feed__content">
-          <div class="feed__main">
-            ${this.gridContext.comments.map(t=>R.html`<pop-comment-thread id=${t.id}></pop-comment-thread> `)}
-          </div>
-        </div>
-        <div class="feed__footer">
-          ${this.authContext?.isAuthenticated?R.html`<pop-comment-bar class="feed__comment-bar"></pop-comment-bar>`:R.html` <pop-auth-panel class="feed__auth-panel"></pop-auth-panel> `}
+          <div class="feed__main"></div>
         </div>
+        <div class="feed__footer"></div>
       </div>
-    `:R.html``}};y.styles=[l(y,y,"styles"),Be],i([(0,ct.consume)({context:E,subscribe:!0})],y.prototype,"authContext",2),i([(0,ct.consume)({context:w,subscribe:!0})],y.prototype,"gridContext",2),i([(0,G.property)({type:Boolean,reflect:!0})],y.prototype,"open",2),i([(0,G.property)({type:String})],y.prototype,"size",2),y=i([(0,G.customElement)("pop-feed")],y);var Re=y;var rt=require("@lit/context"),Ue=require("@popgrids/ui"),Ke=require("lit"),L=require("lit/decorators.js");var b=class extends Ue.PopElement{constructor(){super(...arguments);this.grid=null;this.comments=[];this.loading=!1;this.contextData=this.initializeContextData()}initializeContextData(){return{grid:null,comments:[],loading:this.loading,fetchGrid:this.fetchGrid.bind(this),fetchReplies:this.fetchReplies.bind(this),selectedCommentId:null,selectComment:this.selectComment.bind(this)}}updateState(t){this.contextData={...this.contextData,...t},this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.id?this.fetchGrid(this.id):console.error("ID not provided.")}async fetchGrid(t){if(!this.apiState?.client){console.error("No API client provided.");return}this.updateState({loading:!0});let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{id}",{params:{path:{id:t}}});if(e){let s=e;this.grid=s.grid,this.updateState({grid:this.grid,loading:!1}),this.fetchComments(this.id)}if(r){console.error("Failed to fetch grid:",r),this.loading=!1,this.updateState({loading:this.loading});return}}async fetchComments(t){if(!this.apiState?.client)return;let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments",{params:{path:{grid_id:t}}});if(this.loading=!1,e){let s=e;this.comments=s.comments,this.updateState({comments:this.comments,loading:this.loading})}if(r){console.error("Failed to fetch comments:",r),this.updateState({loading:this.loading});return}}async fetchReplies(t){if(this.apiState?.client)try{let e=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments/{id}/replies",{params:{path:{grid_id:this.id,id:t}}});if(e.data){let s=e.data.replies||[];this.comments=this.comments.map(o=>o.id===t?{...o,replies:[...o.replies||[],...s]}:o),this.updateState({comments:this.comments})}}catch(e){console.error(`Failed to fetch replies for comment ${t}:`,e)}}selectComment(t){this.updateState({selectedCommentId:t})}render(){return Ke.html`<slot></slot>`}};b.styles=[],i([(0,rt.consume)({context:$})],b.prototype,"apiState",2),i([(0,L.property)({type:String})],b.prototype,"id",2),i([(0,L.state)()],b.prototype,"grid",2),i([(0,L.state)()],b.prototype,"comments",2),i([(0,L.state)()],b.prototype,"loading",2),i([(0,rt.provide)({context:w}),(0,L.property)({attribute:!1})],b.prototype,"contextData",2),b=i([(0,L.customElement)("pop-grid-provider")],b);var Ne=b;var Fe=require("@popgrids/ui"),Ze=require("lit"),P=require("lit/decorators.js");var Qe=require("lit"),Je=Qe.css`
-  :host {
-    display: flex;
-    align-items: center;
-  }
-`;var C=class extends Fe.PopElement{constructor(){super(...arguments);this.apiUrl="https://api.popgrids.com";this.gridId=""}render(){return Ze.html`
-      <pop-api-provider api-url=${this.apiUrl}>
-        <pop-grid-provider id=${this.gridId}>
-          <pop-auth-provider>
-            <pop-widget></pop-widget>
-          </pop-auth-provider>
-        </pop-grid-provider>
-      </pop-api-provider>
-    `}};C.styles=[l(C,C,"styles"),Je],i([(0,P.property)({type:String,attribute:"api-url",reflect:!0})],C.prototype,"apiUrl",2),i([(0,P.property)({type:String,attribute:"data-grid-id"})],C.prototype,"gridId",2),C=i([(0,P.customElement)("pop-grid")],C);var Ge=C;customElements.get("pop-grid")||customElements.define("pop-grid",C);function Ye(){let n=document.querySelectorAll("pop-grid[grid-id]:not([initialized])");for(let a of Array.from(n)){let t=a.getAttribute("grid-id");t&&(a.setAttribute("data-grid-id",t),a.setAttribute("initialized","true"))}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Ye):Ye();var D=require("@floating-ui/dom"),ei=require("@lit/context"),ii=require("@popgrids/ui");function bi(){return typeof window<"u"}function Pe(n){var a;return(n==null||(a=n.ownerDocument)==null?void 0:a.defaultView)||window}function Ci(n){return bi()?n instanceof Element||n instanceof Pe(n).Element:!1}function We(n){let a=wi(),t=Ci(n)?Si(n):n;return["transform","translate","scale","rotate","perspective"].some(e=>t[e]?t[e]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!a&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!a&&(t.filter?t.filter!=="none":!1)||["transform","translate","scale","rotate","perspective","filter"].some(e=>(t.willChange||"").includes(e))||["paint","layout","strict","content"].some(e=>(t.contain||"").includes(e))}function wi(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function Si(n){return Pe(n).getComputedStyle(n)}function Xe(n){return ki(n)}function mt(n){return n.assignedSlot?n.assignedSlot:n.parentNode instanceof ShadowRoot?n.parentNode.host:n.parentNode}function ki(n){for(let a=n;a;a=mt(a))if(a instanceof Element&&getComputedStyle(a).display==="none")return null;for(let a=mt(n);a;a=mt(a)){if(!(a instanceof Element))continue;let t=getComputedStyle(a);if(t.display!=="contents"&&(t.position!=="static"||We(t)||a.tagName==="BODY"))return a}return null}var W=require("lit"),U=require("lit/decorators.js"),ut=require("lit/directives/class-map.js"),ri=require("lit/directives/if-defined.js");var Oe=require("lit"),ti=Oe.css`
+    `}};I([S(E)],q.prototype,`gridStore`,void 0),customElements.get(`pop-feed`)||customElements.define(`pop-feed`,q);function De(){return typeof window<`u`}function J(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function Oe(e){return De()?e instanceof Element||e instanceof J(e).Element:!1}var ke=/transform|translate|scale|rotate|perspective|filter/,Ae=/paint|layout|strict|content/,Y=e=>!!e&&e!==`none`,X;function je(e){let t=Oe(e)?Ne(e):e;return Y(t.transform)||Y(t.translate)||Y(t.scale)||Y(t.rotate)||Y(t.perspective)||!Me()&&(Y(t.backdropFilter)||Y(t.filter))||ke.test(t.willChange||``)||Ae.test(t.contain||``)}function Me(){return X??=typeof CSS<`u`&&CSS.supports&&CSS.supports(`-webkit-backdrop-filter`,`none`),X}function Ne(e){return J(e).getComputedStyle(e)}function Pe(e){return Fe(e)}function Z(e){return e.assignedSlot?e.assignedSlot:e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentNode}function Fe(e){for(let t=e;t;t=Z(t))if(t instanceof Element&&getComputedStyle(t).display===`none`)return null;for(let t=Z(e);t;t=Z(t)){if(!(t instanceof Element))continue;let e=getComputedStyle(t);if(e.display!==`contents`&&(e.position!==`static`||je(e)||t.tagName===`BODY`))return t}return null}var Q=`https://www.popgrids.io`,Ie=P(`
   :host {
     display: block;
+    position: relative;
   }
 
-  .grid-widget {
+  .grid {
     display: flex;
     height: 100%;
     position: relative;
     width: 100%;
   }
 
-  .grid-widget--align-left {
+  .grid--align-start {
     justify-content: flex-start;
   }
 
-  .grid-widget--align-center {
+  .grid--align-center {
     justify-content: center;
   }
 
-  .grid-widget--align-right {
+  .grid--align-end {
     justify-content: flex-end;
   }
+`),Le=class extends F{constructor(...e){super(...e),this._initialized=!1}get styleSheets(){return[Ie]}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`data-key`)??this.getAttribute(`public-key`)??``,t=this.getAttribute(`data-api-url`)??this.getAttribute(`api-url`)??Q,n=this.getAttribute(`data-page-url`)??this.getAttribute(`page-url`)??location.href,r=this.getAttribute(`data-id`);this._store=new E({apiUrl:t,publicKey:e,pageUrl:n,externalId:r}),x(this,this._store),super.connectedCallback(),this._store.load().then(n=>{n&&v(t,e)})}disconnectedCallback(){this._floatingCleanup?.(),this._store.destroy(),ne(this),super.disconnectedCallback()}setupEffects(){this.addEffect(()=>{let e=this._store.grid.value,t=this.getElement(`.grid`);if(!t)return;let n=Array.from(t.classList).filter(e=>e.startsWith(`grid--`));if(n.length>0&&t.classList.remove(...n),e){e.align&&t.classList.add(`grid--align-${e.align}`),e.appearance&&t.classList.add(`grid--appearance-${e.appearance}`),e.icon&&t.classList.add(`grid--icon-${e.icon}`),e.layout&&t.classList.add(`grid--layout-${e.layout}`),e.position&&t.classList.add(`grid--position-${e.position}`);let n=e.previewCount??this._store.previewCount;t.classList.add(`grid--preview-${n}`)}}),this.addEffect(()=>{let e=this._store.open.value;if(this._floatingCleanup&&=(this._floatingCleanup(),void 0),!e)return;let n=this.getElement(`pop-widget`),r=this.getElement(`pop-feed`);if(!n||!r)return;let i=this._store.grid.value;if(!i)return;let a=[];a=[(0,t.offset)({mainAxis:i.position===`down`?-16:-54,crossAxis:-18})],(!i.position||i.position===`auto`)&&a.push((0,t.flip)({fallbackPlacements:[`bottom-start`,`top-start`],fallbackStrategy:`bestFit`,padding:16}));let o=e=>t.platform.getOffsetParent(e,Pe),s=()=>{(0,t.computePosition)(n,r,{placement:i.position===`down`?`bottom-start`:`top-start`,middleware:a,strategy:`fixed`,platform:{...t.platform,getOffsetParent:o}}).then(({x:e,y:t,placement:n})=>{r.setAttribute(`data-current-placement`,n),Object.assign(r.style,{left:`${e}px`,top:`${t}px`})})};this._floatingCleanup=(0,t.autoUpdate)(n,r,s)})}getTemplate(){return`
+      <div class="grid">
+        <pop-widget></pop-widget>
+        <pop-feed></pop-feed>
+      </div>
+    `}};customElements.get(`pop-grid`)||customElements.define(`pop-grid`,Le);var Re=P(`
+  :host {
+    --error-badge-bg: #fef2f2;
+    --error-badge-text: #991b1b;
+    --error-badge-border: #fecaca;
 
-  .grid-widget__feed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2147483647;
-    display: none;
-    opacity: 0;
-    transform: scale(0.94);
-    transition:
-      opacity var(--duration-quick) var(--ease-quick),
-      transform var(--duration-quick) var(--ease-quick),
-      display var(--duration-quick) allow-discrete;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
   }
 
-  .grid-widget__feed[data-current-placement="top-start"] {
-    transform-origin: left bottom;
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --error-badge-bg: #450a0a;
+      --error-badge-text: #fca5a5;
+      --error-badge-border: #7f1d1d;
+    }
   }
 
-  .grid-widget__feed[data-current-placement="bottom-start"] {
-    transform-origin: left top;
+  :host(.dark) {
+    --error-badge-bg: #450a0a;
+    --error-badge-text: #fca5a5;
+    --error-badge-border: #7f1d1d;
   }
 
-  .grid-widget__feed[data-current-placement="top-end"] {
-    transform-origin: right bottom;
+  :host([data-error]) {
+    cursor: default;
   }
 
-  .grid-widget__feed[data-current-placement="bottom-end"] {
-    transform-origin: right top;
+  .error-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 10px;
+    border-radius: var(--pop-radius-full);
+    border: 1px solid var(--error-badge-border);
+    background: var(--error-badge-bg);
+    color: var(--error-badge-text);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    white-space: nowrap;
   }
 
-  .grid-widget__feed[data-current-placement="top"] {
-    transform-origin: bottom;
+  .widget {
+    display: inline-flex;
+    align-items: flex-start;
   }
 
-  .grid-widget__feed[data-current-placement="bottom"] {
-    transform-origin: top;
+  .widget > :not([hidden]) ~ :not([hidden]) {
+    margin-left: -6px;
   }
 
-  .grid-widget__feed--open {
-    display: flex;
-    opacity: 1;
-    transform: scale(1);
+  .skeleton {
+    width: 32px;
+    height: 32px;
+    background: var(--pop-muted);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
 
-    @starting-style {
-      display: flex;
-      opacity: 0;
-      transform: scale(0.94);
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
     }
   }
 
-  .grid-widget__loader {
+  .count {
+    --count-size: calc(32px + var(--count-border-size));
+    --count-background: var(--pop-background);
+    --count-border-color: rgba(0 0 32 / 16%);
+    --count-border-size: 1px;
+    --count-color: var(--pop-foreground);
+
     align-items: center;
+    background-color: var(--pop-background);
     display: flex;
-    min-height: 30px;
-  }
+    flex-shrink: 0;
+    justify-content: center;
+    padding: calc(var(--count-border-size) / 2);
+    position: relative;
+    z-index: 10;
 
-  .grid-widget__previews {
-    display: inline-flex;
-    align-items: flex-start;
+    width: calc(var(--count-size) + (calc(var(--count-border-size))));
+    height: calc(var(--count-size) + (calc(var(--count-border-size))));
   }
 
-  .grid-widget__previews > :not([hidden]) ~ :not([hidden]) {
-    margin-left: -4px;
+  .count__background {
+    background-color: var(--count-border-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
   }
 
-  .grid-widget__preview-avatar,
-  .grid-widget__preview-sum {
-    transition: transform var(--ease-quick) 600ms;
+  .count__content {
+    align-items: center;
+    background: var(--count-background);
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    height: var(--count-size);
+    width: var(--count-size);
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    .grid-widget__preview-avatar:hover,
-    .grid-widget__preview-sum:hover {
-      cursor: pointer;
-      transform: scale(1.1875);
-    }
+  .count__label {
+    color: var(--count-color);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    letter-spacing: -0.96px;
+    line-height: 28px;
+    text-align: center;
+    user-select: none;
   }
 
-  .grid-widget__preview-avatar:active,
-  .grid-widget__preview-sum:active {
-    cursor: pointer;
-    transform: scale(0.875);
-  }
-`;var ji={default:1,md:3,lg:5},v=class extends ii.PopElement{constructor(){super(...arguments);this._open=!1;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._feed)&&(this._open=!1)};this.reposition=()=>{if(!this._open||!this._previews||!this._feed||!this.gridContext?.grid)return;let t=[];t=[(0,D.offset)({mainAxis:this.gridContext.grid.position==="down"?-16:-48,crossAxis:-13})],(!this.gridContext.grid.position||this.gridContext.grid.position==="smart")&&t.push((0,D.flip)({fallbackPlacements:["bottom-start","top-start"],fallbackStrategy:"bestFit",padding:16}));let e=r=>D.platform.getOffsetParent(r,Xe);(0,D.computePosition)(this._previews,this._feed,{placement:this.gridContext.grid.position==="down"?"bottom-start":"top-start",middleware:t,strategy:"fixed",platform:{...D.platform,getOffsetParent:e}}).then(({x:r,y:s,placement:o})=>{this._feed.setAttribute("data-current-placement",o),Object.assign(this._feed.style,{left:`${r}px`,top:`${s}px`})})}}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.start(),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback(),this.stop()}handlePopClick(){this._open||(this._open=!0)}start(){this._previews&&(this.cleanup=(0,D.autoUpdate)(this._previews,this._feed,()=>{this.reposition()}))}async stop(){return new Promise(t=>{this.cleanup?(this.cleanup(),this.cleanup=void 0,this.removeAttribute("data-current-placement"),this.style.removeProperty("--auto-size-available-width"),this.style.removeProperty("--auto-size-available-height"),requestAnimationFrame(()=>t())):t()})}async updated(t){super.updated(t),t.has("_open")&&(this._open?this.start():this.stop()),t.has("position")&&(this.gridContext?.grid?.position==="smart"&&this._open?this.start():this.stop()),this._open&&(await this.updateComplete,this.reposition())}get previewComments(){return this.gridContext?.comments.filter(t=>t.parentCommentId===null).sort((t,e)=>new Date(e.createdAt??"").getTime()-new Date(t.createdAt??"").getTime()).slice(0,ji[this.gridContext.grid?.preview??"default"])}render(){return this.gridContext?.loading?W.html`<div class="grid-widget">
-        <pop-loader class="grid-widget__loader" variant="spinner"></pop-loader>
-      </div>`:this.gridContext?.grid?W.html`
-      <div
-        class=${(0,ut.classMap)({"grid-widget":!0,[`grid-widget--align-${this.gridContext.grid.align}`]:!0,[`grid-widget--appearance-${this.gridContext.grid.appearance}`]:!0,[`grid-widget--icon-${this.gridContext.grid.icon}`]:!0,[`grid-widget--layout-${this.gridContext.grid.layout}`]:!0,[`grid-widget--position-${this.gridContext.grid.position}`]:!0,[`grid-widget--preview-${this.gridContext.grid.preview}`]:!0})}
-      >
-        <div class="grid-widget__previews">
-          ${(this.previewComments??[]).map(t=>W.html`
-              <pop-comment-avatar class="grid-widget__preview-avatar" size="xs" @click=${this.handlePopClick}>
-                <img src=${(0,ri.ifDefined)(t.account?.avatar?.url)} alt="${t.account?.name}’s avatar" />
-              </pop-comment-avatar>
-            `)}
-          <pop-sum class="grid-widget__preview-sum">${this.gridContext.grid.commentsCount}</pop-sum>
-          <pop-comment-icon
-            size="sm"
-            theme=${this.gridContext.grid?.customAddIcon?"brand":"neutral"}
-            variant="add"
-            .iconUrl=${this.gridContext.grid?.customAddIcon||void 0}
-          ></pop-comment-icon>
-        </div>
-        <div
-          class=${(0,ut.classMap)({"grid-widget__feed":!0,"grid-widget__feed--open":this._open})}
-          part="feed"
-        >
-          <pop-feed ?open=${this._open}></pop-feed>
+  .count__label-container {
+    align-items: center;
+    background: var(--pop-background);
+    display: flex;
+    height: calc(100% - calc(var(--count-border-size) * 2));
+    justify-content: center;
+    position: relative;
+    text-indent: calc(calc(var(--count-border-size) * 2) * -1);
+    width: calc(100% - calc(var(--count-border-size) * 2));
+    z-index: 20;
+  }
+`),$=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[Re]}onClick(){this.gridStore.error.value||(this.gridStore.open.value=!this.gridStore.open.value)}setupEffects(){this.addEffect(()=>{this.gridStore.loading.value,this.gridStore.error.value,this.gridStore.previewAvatars.value,this.gridStore.comments.value,this.gridStore.grid.value;let e=!!this.gridStore.error.value;this.toggleAttribute(`data-error`,e),e&&this.gridStore.open.value&&(this.gridStore.open.value=!1),this.render()})}getTemplate(){if(this.gridStore.loading.value)return`<div class="widget"><div class="skeleton mask mask-squircle"></div></div>`;if(this.gridStore.error.value)return`<div class="error-badge">Error: there was a problem loading the PopGrid</div>`;let e=this.gridStore.previewAvatars.value,t=this.gridStore.comments.value.length;return`
+      <div class="widget">
+        ${e.map((t,n)=>{let r=e.length+n,i=t?.id??t?.name??``;return t?.image?`<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
+            <img src="${t.image}" alt="${t.name??`User`}" />
+          </pop-comment-avatar>`:`<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
+          ${B(t?.name)}
+        </pop-comment-avatar>`}).join(``)}
+        <div class="count mask mask-squircle">
+          <span class="count__content mask mask-squircle">
+            <div class="count__background mask mask-squircle"></div>
+            <div class="count__label-container mask mask-squircle">
+              <div class="count__label">${t}</div>
+            </div>
+          </span>
         </div>
       </div>
-    `:W.html`<p>No grid found.</p>`}};v.styles=[l(v,v,"styles"),ti],i([(0,ei.consume)({context:w,subscribe:!0})],v.prototype,"gridContext",2),i([(0,U.state)()],v.prototype,"_open",2),i([(0,U.query)(".grid-widget__previews")],v.prototype,"_previews",2),i([(0,U.query)(".grid-widget__feed")],v.prototype,"_feed",2),v=i([(0,U.customElement)("pop-widget")],v);var ai=v;var oi=require("@lit/context"),at=require("lit"),F=require("lit/decorators.js");var ni=Q(require("openapi-fetch"),1),si=n=>(0,ni.default)({baseUrl:n});var z=class extends at.LitElement{constructor(){super(...arguments);this.apiState={baseUrl:"",client:null}}connectedCallback(){super.connectedCallback(),this.apiUrl?(this.apiState={...this.apiState,baseUrl:this.apiUrl,client:si(this.apiUrl)},this.requestUpdate()):console.error("API URL or ID not provided.")}render(){return at.html`<slot></slot>`}};i([(0,F.property)({type:String,attribute:"api-url"})],z.prototype,"apiUrl",2),i([(0,oi.provide)({context:$}),(0,F.state)()],z.prototype,"apiState",2),z=i([(0,F.customElement)("pop-api-provider")],z);var li=z;0&&(module.exports={PopApiProvider,PopAuthJoin,PopAuthPanel,PopAuthProvider,PopAuthSignIn,PopAuthVerifyCode,PopComment,PopCommentBar,PopCommentInput,PopCommentThread,PopFeed,PopGrid,PopGridProvider,PopWidget});
+    `}};if(I([S(E)],$.prototype,`gridStore`,void 0),customElements.get(`pop-widget`)||customElements.define(`pop-widget`,$),typeof document<`u`){let e=`https://rsms.me/inter/inter.css`;if(!document.querySelector(`link[href="${e}"]`)){let t=document.createElement(`link`);t.rel=`stylesheet`,t.href=e,document.head.appendChild(t)}}
 //# sourceMappingURL=index.cjs.map