@popgrids/embed 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -1,4 +1,4 @@
-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(`
+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,ne=(e,t,n=t.constructor)=>{let r=b.get(e);r||(r=new Map,b.set(e,r)),r.set(n,t)},re=e=>{b.delete(e)},ie=(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 x(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=ie(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 S=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},ae=(e,t)=>e&&{...e,...t},E=class{constructor(t){this.previewCount=C,this._fetchedGrid=(0,e.signal)(null),this._overrides=(0,e.signal)({}),this.grid=(0,e.computed)(()=>ae(this._fetchedGrid.value,this._overrides.value)),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}setOverrides(e){this._overrides.value=e}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._fetchedGrid.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,S);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)}},oe=`@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}}`,se=`@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}}`,ce=`@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 le(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 ue(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 de=P(oe),fe=P(se),pe=P(ce),F=class extends HTMLElement{get styleSheets(){return[]}constructor(){super(),this.baseStyleSheets=[de,fe,pe],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(){le(this),(0,e.untracked)(()=>{this.render(),this._bindEvents(),this.setupEffects()})}disconnectedCallback(){ue(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 me=P(`
   :host {
     display: block;
     position: relative;
@@ -91,7 +91,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     color: var(--pop-auth-error);
     text-align: center;
   }
-`),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`
+`),L=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[me]}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">
@@ -100,7 +100,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
         </div>
         <div class="error" hidden></div>
       </div>
-    `}};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(`
+    `}};I([x(E)],L.prototype,`gridStore`,void 0),customElements.get(`pop-auth-panel`)||customElements.define(`pop-auth-panel`,L);var R=`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=`,z=`#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(`.`),he=e=>typeof e==`number`?z[e%z.length]??`#e5e7eb`:z[Math.floor(Math.random()*z.length)];function ge(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 _e(e){return z[ge(e)%z.length]??`#e5e7eb`}var ve=P(`
   :host {
     display: block;
 
@@ -197,20 +197,20 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     width: 100%;
     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`
+`),ye=class extends F{constructor(){super(),this._backgroundColor=he()??`#e5e7eb`}static get observedAttributes(){return[`size`,`data-color-key`,`deleted`]}onSizeChanged(){this.render()}onDataColorKeyChanged(){this.render()}onDeletedChanged(){this.render()}get styleSheets(){return[ve]}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?_e(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
+        ><img class="comment-avatar__deleted-mark" src="${R}" alt="Deleted user" /></div>`:`<slot
           class="comment-avatar__content mask mask-squircle"
           part="content"
           style="background-color: ${r};"
         ></slot>`}
       </div>
-    `}};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(`
+    `}};customElements.get(`pop-comment-avatar`)||customElements.define(`pop-comment-avatar`,ye);function B(e){return e?e.split(` `).map(e=>e[0]??``).join(``).toUpperCase().slice(0,2):`?`}var be=P(`
   :host {
     background: var(--pop-background);
     border-top: 1px solid var(--pop-bar-input-bg);
@@ -320,7 +320,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     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">
+`),xe=`<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"/>
@@ -329,8 +329,8 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
 <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>
+</svg>`,V=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[be]}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">${xe}</div>
       <div class="bar">
         <div class="bar__user">
           <pop-comment-avatar size="xs" class="bar__avatar bar__avatar--user">?</pop-comment-avatar>
@@ -338,11 +338,14 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
         <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>
+        <pop-comment-icon
+          class="bar__send"
+          theme="neutral"
+          variant="send"
+          aria-label="Send comment"
+        ></pop-comment-icon>
       </div>
-    `}};I([S(E)],V.prototype,`gridStore`,void 0),customElements.get(`pop-comment-bar`)||customElements.define(`pop-comment-bar`,V);var xe=P(`
+    `}};I([x(E)],V.prototype,`gridStore`,void 0),customElements.get(`pop-comment-bar`)||customElements.define(`pop-comment-bar`,V);var Se=P(`
   :host {
     /* Mode-level theme colors (defaults for light mode) */
     --pop-comment-color-black: #000000;
@@ -431,13 +434,15 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
   }
 
   .comment-icon__focus-indicator {
+    background-color: var(--pop-ring);
     display: none;
-    height: calc(100% + 3px);
-    inset: -1.5px;
+    position: absolute;
+    inset: -3px;
+    pointer-events: none;
     transform-origin: center;
     transform: scale(var(--pop-comment-icon-scale));
     transition: all 200ms ease-out;
-    width: calc(100% + 3px);
+    width: calc(100% + 6px);
   }
 
   .comment-icon:focus-visible .comment-icon__focus-indicator {
@@ -497,11 +502,14 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     display: none;
   }
 
+  .comment-icon .comment-icon__inner {
+    transition: transform var(--pop-ease-pop-hover) var(--pop-duration-pop-hover);
+  }
+
   @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));
     }
 
@@ -518,7 +526,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     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;
+    transition-duration: 200ms;
   }
 
   .comment-icon:is(:focus-visible) .comment-icon__inner {
@@ -553,12 +561,12 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
   /* 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-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-hover);
-    --pop-comment-icon-background-active: var(--pop-comment-bg-singular-hover);
+    --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);
   }
 
@@ -609,7 +617,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     --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=`
+`),Ce=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[Se]}static get observedAttributes(){return[`counter`,`icon-url`,`size`,`theme`,`variant`,`type`,`disabled`,`aria-label`]}onAriaLabelChanged(){this.render()}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`)}get ariaLabel(){return this.getAttribute(`aria-label`)}set ariaLabel(e){e===null?this.removeAttribute(`aria-label`):this.setAttribute(`aria-label`,e)}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"
@@ -677,19 +685,22 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
             />
           </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`
+         <slot class="comment-icon__icon" name="icon">${this.icon}</slot>`:`<slot class="comment-icon__icon" name="icon">${this.icon}</slot>`,r=this.ariaLabel?`aria-label="${this.ariaLabel}"`:``;return`
       <button
         class="${t}"
         part="base"
         type="${this.type}"
         ${e}
+        ${r}
       >
-        <pop-focus-indicator class="comment-icon__focus-indicator"></pop-focus-indicator>
+        <pop-focus-indicator
+          class="comment-icon__focus-indicator mask mask-squircle"
+        ></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(`
+    `}};customElements.get(`pop-comment-icon`)||customElements.define(`pop-comment-icon`,Ce);var we=P(`
   :host {
     display: flex;
     flex: 1;
@@ -718,9 +729,9 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
   textarea::placeholder {
     color: #697586;
   }
-`),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`
+`),H=class extends F{constructor(...e){super(...e),this.events={input:`onInput`,keydown:`onKeyDown`}}get styleSheets(){return[we]}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(`
+    `}};I([x(E)],H.prototype,`gridStore`,void 0),customElements.get(`pop-comment-input`)||customElements.define(`pop-comment-input`,H);var Te=P(`
   :host {
     display: block;
 
@@ -777,7 +788,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     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">
+`),U=2,W=class extends F{constructor(...e){super(...e),this._showAll=!1,this.events={click:`onClick`}}get styleSheets(){return[Te]}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`}
@@ -790,7 +801,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
             ${i}
           </div>`:``}
       </div>
-    `}};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(`
+    `}};I([x(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 Ee=P(`
   :host {
     display: block;
     width: 100%;
@@ -1082,7 +1093,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     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">
+`),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[Ee]}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"
@@ -1159,7 +1170,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
           <div class="comment__text${this._expanded?` expanded`:``}">${t.body}</div>
         </div>
       </div>
-    `}};I([S(E)],K.prototype,`gridStore`,void 0),customElements.get(`pop-comment`)||customElements.define(`pop-comment`,K);var Ee=P(`
+    `}};I([x(E)],K.prototype,`gridStore`,void 0),customElements.get(`pop-comment`)||customElements.define(`pop-comment`,K);var De=P(`
   :host {
     display: flex;
     background: var(--pop-background);
@@ -1276,14 +1287,14 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     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`
+`),q=class extends F{constructor(...e){super(...e),this._footerChild=null,this._wasOpen=!1}get styleSheets(){return[De]}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"></div>
         </div>
         <div class="feed__footer"></div>
       </div>
-    `}};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=P(`
+    `}};I([x(E)],q.prototype,`gridStore`,void 0),customElements.get(`pop-feed`)||customElements.define(`pop-feed`,q);function Oe(){return typeof window<`u`}function J(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function ke(e){return Oe()?e instanceof Element||e instanceof J(e).Element:!1}var Ae=/transform|translate|scale|rotate|perspective|filter/,je=/paint|layout|strict|content/,Y=e=>!!e&&e!==`none`,X;function Me(e){let t=ke(e)?Pe(e):e;return Y(t.transform)||Y(t.translate)||Y(t.scale)||Y(t.rotate)||Y(t.perspective)||!Ne()&&(Y(t.backdropFilter)||Y(t.filter))||Ae.test(t.willChange||``)||je.test(t.contain||``)}function Ne(){return X??=typeof CSS<`u`&&CSS.supports&&CSS.supports(`-webkit-backdrop-filter`,`none`),X}function Pe(e){return J(e).getComputedStyle(e)}function Fe(e){return Q(e)}function Z(e){return e.assignedSlot?e.assignedSlot:e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentNode}function Q(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`||Me(e)||t.tagName===`BODY`))return t}return null}var Ie=`https://www.popgrids.io`,Le=new Set([`start`,`center`,`end`]),Re=new Set([`sm`,`lg`]),ze=new Set([`auto`,`up`,`down`]),Be=P(`
   :host {
     display: block;
     position: relative;
@@ -1307,12 +1318,12 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
   .grid--align-end {
     justify-content: flex-end;
   }
-`),Ie=class extends F{constructor(...e){super(...e),this._initialized=!1}get styleSheets(){return[Q]}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`)??``,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`
+`),Ve=class extends F{constructor(...e){super(...e),this._initialized=!1}get styleSheets(){return[Be]}static get observedAttributes(){return[`data-align`,`data-layout`,`data-position`,`data-icon`,`data-preview-count`]}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`)??Ie,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}),ne(this,this._store),super.connectedCallback(),this._store.setOverrides(this._readOverridesFromAttributes()),this._store.load().then(n=>{n&&v(t,e)})}_readOverridesFromAttributes(){let e={},t=this.getAttribute(`data-align`);t&&Le.has(t)&&(e.align=t);let n=this.getAttribute(`data-layout`);n&&Re.has(n)&&(e.layout=n);let r=this.getAttribute(`data-position`);r&&ze.has(r)&&(e.position=r);let i=this.getAttribute(`data-icon`);i&&(e.icon=i);let a=this.getAttribute(`data-preview-count`);if(a!==null){let t=Number(a);Number.isInteger(t)&&t>0&&(e.previewCount=t)}return e}_applyOverridesFromAttributes(){this._store&&this._store.setOverrides(this._readOverridesFromAttributes())}onDataAlignChanged(){this._applyOverridesFromAttributes()}onDataLayoutChanged(){this._applyOverridesFromAttributes()}onDataPositionChanged(){this._applyOverridesFromAttributes()}onDataIconChanged(){this._applyOverridesFromAttributes()}onDataPreviewCountChanged(){this._applyOverridesFromAttributes()}disconnectedCallback(){this._floatingCleanup?.(),this._store.destroy(),re(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,Fe),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`,Ie);var Le=P(`
+    `}};customElements.get(`pop-grid`)||customElements.define(`pop-grid`,Ve);var He=P(`
   :host {
     --error-badge-bg: #fef2f2;
     --error-badge-text: #991b1b;
@@ -1445,11 +1456,20 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
     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[Le]}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`
+
+  /* Above .count (z-index: 10) — otherwise it paints underneath despite
+   * coming later in the widget's facepile, since z-index only applies to
+   * positioned elements and this one had neither. */
+  .widget pop-comment-icon {
+    position: relative;
+    z-index: 20;
+    top: 1px;
+  }
+`),$=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[He]}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,n=this.gridStore.grid.value,r=n?.layout===`lg`?`md`:`xs`,i=n?.icon===`brand`?`brand`:`neutral`;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}">
+        ${e.map((t,n)=>{let i=e.length+n,a=t?.id??t?.name??``;return t?.image?`<pop-comment-avatar size="${r}" style="z-index: ${i}" data-color-key="${a}">
             <img src="${t.image}" alt="${t.name??`User`}" />
-          </pop-comment-avatar>`:`<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
+          </pop-comment-avatar>`:`<pop-comment-avatar size="${r}" style="z-index: ${i}" data-color-key="${a}">
           ${B(t?.name)}
         </pop-comment-avatar>`}).join(``)}
         <div class="count mask mask-squircle">
@@ -1460,6 +1480,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
             </div>
           </span>
         </div>
+        <pop-comment-icon variant="add" theme="${i}" size="xs"></pop-comment-icon>
       </div>
-    `}};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)}}
+    `}};if(I([x(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