@popgrids/embed 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -1285,17 +1285,23 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
     height: var(--pop-comment-icon-size);
   }
 
+  /* Hidden until it loads, so the plus shows while it loads or if it fails. */
   .comment-icon__icon-image {
-    display: flex;
+    display: none;
     width: var(--pop-comment-icon-size);
     height: var(--pop-comment-icon-size);
+    object-fit: contain;
+  }
+
+  .comment-icon__icon-image--loaded {
+    display: flex;
   }
 
   .comment-icon__icon {
     display: flex;
   }
 
-  .comment-icon__icon-image + .comment-icon__icon {
+  .comment-icon__icon-image--loaded + .comment-icon__icon {
     display: none;
   }
 
@@ -1310,11 +1316,11 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
       transform: scale(var(--pop-comment-icon-scale-hover));
     }
 
-    .comment-icon:hover .comment-icon__icon-image {
+    .comment-icon:hover .comment-icon__icon-image--loaded {
       display: none;
     }
 
-    .comment-icon:hover .comment-icon__icon-image + .comment-icon__icon {
+    .comment-icon:hover .comment-icon__icon-image--loaded + .comment-icon__icon {
       display: flex;
     }
   }
@@ -1481,7 +1487,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
               stroke-linejoin="round"
             />
           </svg>
-        `)),e}getTemplate(){let e=this.disabled?`disabled`:``,t=[`comment-icon`,this.size?`comment-icon--size-${this.size}`:``,this.theme?`comment-icon--theme-${this.theme}`:``,this.variant?`comment-icon--variant-${this.variant}`:``].filter(Boolean).join(` `),n=this.iconUrl?`<img src="${this.iconUrl}" alt="" class="comment-icon__icon-image" />
+        `)),e}render(){super.render();let e=this.getElement(`.comment-icon__icon-image`);if(!e||!this.iconUrl)return;let t=()=>{e.classList.add(`comment-icon__icon-image--loaded`);let t=this.getElement(`.comment-icon`);t?.classList.remove(`comment-icon--theme-${this.theme}`),t?.classList.add(`comment-icon--theme-brand`)};e.addEventListener(`load`,t,{once:!0}),e.addEventListener(`error`,()=>e.remove(),{once:!0}),e.src=this.iconUrl,e.complete&&e.naturalWidth>0&&t()}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 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>`,r=this.ariaLabel?`aria-label="${this.ariaLabel}"`:``;return`
       <button
         class="${t}"
@@ -1897,7 +1903,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
     font-style: italic;
     opacity: 0.8;
   }
-`),X=class extends k{constructor(...e){super(...e),this.events={click:`onClick`},this._expanded=!1,this._dropdownOpen=!1,this._onOutsideClick=e=>{let t=e.composedPath(),n=this.getElement(A(`dropdown`)),r=this.getElement(A(`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[Xe]}toggleDropdown(){this._dropdownOpen?this.closeDropdown():this.openDropdown()}openDropdown(){this._dropdownOpen=!0;let t=this.getElement(A(`dropdown`)),n=this.getElement(A(`menu-trigger`));if(t&&n){t.classList.add(`is-open`);let r=()=>{(0,e.computePosition)(n,t,{placement:`bottom-end`,middleware:[(0,e.offset)(4),(0,e.flip)(),(0,e.shift)({padding:8})],strategy:`fixed`}).then(({x:e,y:n})=>{Object.assign(t.style,{left:`${e}px`,top:`${n}px`,position:`fixed`})})};this._floatingCleanup=(0,e.autoUpdate)(n,t,r),document.addEventListener(`mousedown`,this._onOutsideClick)}}closeDropdown(){this._dropdownOpen=!1;let e=this.getElement(A(`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(A(`menu-trigger`))){e.stopPropagation(),this.toggleDropdown();return}let n=t.closest(A(`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(A(`dropdown`))){e.stopPropagation();return}if(!this.authStore.currentUser.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(A(`text`));if(!this._expanded&&e){let t=e.offsetHeight;this._expanded=!0,this.render();let n=this.getElement(A(`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(A(`timestamp`));e&&(e.textContent=Y(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(()=>{this.setAttribute(`data-size`,this.gridStore.commentSize.value)}),this.addEffect(()=>{let e=this.getAttribute(`comment-id`),t=this.authStore.currentUser.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 r=t.status===`deleted`,i=t.authorDeleted===!0,a=r||i,o=a?``:t.author?.image?`<img src="${t.author.image}" alt="${t.author.name??`User avatar`}" />`:n(t.author?.name),s=this.gridStore.replyingTo.value,c=e!==null&&s===e,l=this.size,u=this.authStore.currentUser.value,d=u&&t.author&&u.id===t.author.id,f=u&&!r?`<div class="comment__menu">
+`),X=class extends k{constructor(...e){super(...e),this.events={click:`onClick`},this._expanded=!1,this._dropdownOpen=!1,this._onOutsideClick=e=>{let t=e.composedPath(),n=this.getElement(A(`dropdown`)),r=this.getElement(A(`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[Xe]}toggleDropdown(){this._dropdownOpen?this.closeDropdown():this.openDropdown()}openDropdown(){this._dropdownOpen=!0;let t=this.getElement(A(`dropdown`)),n=this.getElement(A(`menu-trigger`));if(t&&n){t.classList.add(`is-open`);let r=()=>{(0,e.computePosition)(n,t,{placement:`bottom-end`,middleware:[(0,e.offset)(4),(0,e.flip)(),(0,e.shift)({padding:8})],strategy:`fixed`}).then(({x:e,y:n})=>{Object.assign(t.style,{left:`${e}px`,top:`${n}px`,position:`fixed`})})};this._floatingCleanup=(0,e.autoUpdate)(n,t,r),document.addEventListener(`mousedown`,this._onOutsideClick)}}closeDropdown(){this._dropdownOpen=!1;let e=this.getElement(A(`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(A(`menu-trigger`))){e.stopPropagation(),this.toggleDropdown();return}let n=t.closest(A(`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(A(`dropdown`))){e.stopPropagation();return}if(!this.authStore.currentUser.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(A(`text`));if(!this._expanded&&e){let t=e.offsetHeight;this._expanded=!0,this.render();let n=this.getElement(A(`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(A(`timestamp`));e&&(e.textContent=Y(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(()=>{this.setAttribute(`data-size`,this.gridStore.commentSize.value)}),this.addEffect(()=>{let e=this.getAttribute(`comment-id`),t=this.authStore.currentUser.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 r=t.status===`deleted`,i=t.authorDeleted===!0,a=r||i,o=a?``:t.author?.image?`<img src="${t.author.image}" alt="${t.author.name??`User avatar`}" loading="lazy" />`:n(t.author?.name),s=this.gridStore.replyingTo.value,c=e!==null&&s===e,l=this.size,u=this.authStore.currentUser.value,d=u&&t.author&&u.id===t.author.id,f=u&&!r?`<div class="comment__menu">
             <button class="comment__menu-trigger" data-ref="menu-trigger" type="button">
               <svg
                 width="18"
@@ -2206,7 +2212,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
   .grid--align-end {
     justify-content: flex-end;
   }
-`),_t=class extends k{constructor(...e){super(...e),this._initialized=!1}get demo(){return this._demo}set demo(e){this._demo=e,this._store?.demo&&this._store.showDemo(e)}get open(){return this._store?.open.value??!1}set open(e){this._store&&(this._store.open.value=e)}get styleSheets(){return[gt]}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`)??ft,n=this.getAttribute(`data-page-url`)??this.getAttribute(`page-url`)??location.href,r=this.getAttribute(`data-id`),i=this.hasAttribute(`data-demo`);if(this._authStore=new y({apiUrl:t,publicKey:e,demo:i}),le(this,this._authStore),this._store=new W({apiUrl:t,publicKey:e,pageUrl:n,externalId:r,demo:i,authStore:this._authStore}),le(this,this._store),super.connectedCallback(),this._store.setOverrides(this._readOverridesFromAttributes()),this._store.demo){this._demo&&this._store.showDemo(this._demo);return}this._store.load()}_readOverridesFromAttributes(){let e={},t=this.getAttribute(`data-align`);t&&pt.has(t)&&(e.align=t);let n=this.getAttribute(`data-layout`);n&&mt.has(n)&&(e.layout=n);let r=this.getAttribute(`data-position`);r&&ht.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(),this._authStore.destroy(),ue(this),super.disconnectedCallback()}setupEffects(){this.addEffect(()=>{let e=this._store.grid.value,t=this.getElement(A(`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 t=this.getElement(`pop-widget`),n=this.getElement(`pop-feed`);if(!t||!n)return;let r=this._store.grid.value;r&&(this._floatingCleanup=dt(t,n,r.position))})}getTemplate(){return`
+`),_t=class extends k{constructor(...e){super(...e),this._initialized=!1}get demo(){return this._demo}set demo(e){this._demo=e,this._store?.demo&&this._store.showDemo(e)}get open(){return this._store?.open.value??!1}set open(e){this._store&&(this._store.open.value=e)}get styleSheets(){return[gt]}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`)??ft,n=this.getAttribute(`data-page-url`)??this.getAttribute(`page-url`)??location.href,r=this.getAttribute(`data-id`),i=this.hasAttribute(`data-demo`);if(this._authStore=new y({apiUrl:t,publicKey:e,demo:i}),le(this,this._authStore),this._store=new W({apiUrl:t,publicKey:e,pageUrl:n,externalId:r,demo:i,authStore:this._authStore}),le(this,this._store),super.connectedCallback(),this._store.setOverrides(this._readOverridesFromAttributes()),this._store.demo){this._demo&&this._store.showDemo(this._demo);return}this._store.load()}_readOverridesFromAttributes(){let e={},t=this.getAttribute(`data-align`);t&&pt.has(t)&&(e.align=t);let n=this.getAttribute(`data-layout`);n&&mt.has(n)&&(e.layout=n);let r=this.getAttribute(`data-position`);r&&ht.has(r)&&(e.position=r);let i=this.getAttribute(`data-icon`);i&&(e.iconUrl=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(),this._authStore.destroy(),ue(this),super.disconnectedCallback()}setupEffects(){this.addEffect(()=>{let e=this._store.grid.value,t=this.getElement(A(`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.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 t=this.getElement(`pop-widget`),n=this.getElement(`pop-feed`);if(!t||!n)return;let r=this._store.grid.value;r&&(this._floatingCleanup=dt(t,n,r.position))})}getTemplate(){return`
       <div class="grid" data-ref="grid">
         <pop-widget></pop-widget>
         <pop-feed></pop-feed>
@@ -2353,7 +2359,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
     z-index: 20;
     top: 1px;
   }
-`),yt=class extends k{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[vt]}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,r=this.gridStore.grid.value?.icon===`brand`?`brand`:`neutral`;return`
+`),yt=class extends k{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[vt]}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(),this.setAttr(`pop-comment-icon`,`icon-url`,this.gridStore.grid.value?.iconUrl??null)})}getTemplate(){if(this.gridStore.loading.value)return`<div class="widget"><div class="skeleton mask mask-squircle"></div></div>`;if(this.gridStore.error.value)return`<div class="error-badge">Error: there was a problem loading the PopGrid</div>`;let e=this.gridStore.previewAvatars.value,t=this.gridStore.comments.value.length;return`
       <div class="widget">
         ${e.map((t,r)=>{let i=e.length+r,a=t?.id??t?.name??``;return t?.image?`<pop-comment-avatar size="xs" style="z-index: ${i}" data-color-key="${a}">
             <img src="${t.image}" alt="${t.name??`User`}" />
@@ -2368,7 +2374,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
             </div>
           </span>
         </div>
-        <pop-comment-icon variant="add" theme="${r}" size="xs"></pop-comment-icon>
+        <pop-comment-icon variant="add" theme="neutral" size="xs"></pop-comment-icon>
       </div>
     `}};if(j([x(W)],yt.prototype,`gridStore`,void 0),customElements.get(`pop-widget`)||customElements.define(`pop-widget`,yt),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