@popgrids/embed 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1071 @@
+"use strict";var di=Object.create;var Z=Object.defineProperty;var ht=Object.getOwnPropertyDescriptor;var pi=Object.getOwnPropertyNames;var gt=Object.getPrototypeOf,ci=Object.prototype.hasOwnProperty;var mi=Reflect.get;var ui=(n,a)=>{for(var t in a)Z(n,t,{get:a[t],enumerable:!0})},xt=(n,a,t,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of pi(a))!ci.call(n,r)&&r!==t&&Z(n,r,{get:()=>a[r],enumerable:!(e=ht(a,r))||e.enumerable});return n};var Q=(n,a,t)=>(t=n!=null?di(gt(n)):{},xt(a||!n||!n.__esModule?Z(t,"default",{value:n,enumerable:!0}):t,n)),fi=n=>xt(Z({},"__esModule",{value:!0}),n),i=(n,a,t,e)=>{for(var r=e>1?void 0:e?ht(a,t):a,s=n.length-1,o;s>=0;s--)(o=n[s])&&(r=(e?o(a,t,r):o(r))||r);return e&&r&&Z(a,t,r),r};var l=(n,a,t)=>mi(gt(n),t,a);var Di={};ui(Di,{PopApiProvider:()=>li,PopAuthJoin:()=>kt,PopAuthPanel:()=>Vt,PopAuthProvider:()=>zt,PopAuthSignIn:()=>Zt,PopAuthVerifyCode:()=>Ot,PopComment:()=>He,PopCommentBar:()=>se,PopCommentInput:()=>ve,PopCommentThread:()=>je,PopFeed:()=>Re,PopGrid:()=>Ge,PopGridProvider:()=>Ne,PopWidget:()=>ai});module.exports=fi(Di);var bt=require("@popgrids/ui"),Ct=require("lit"),wt=require("lit/decorators.js"),St=require("lit/directives/class-map.js");var X=require("lit");var vt="./swirling-ovals-ZDTHSA3L.gif";var yt=X.css`
+  :host {
+    display: flex;
+    width: 100%;
+  }
+
+  .auth-join {
+    background-image: url("${(0,X.unsafeCSS)(vt)}"), none;
+    background-color: lightgray;
+    background-position: 79% center;
+    background-size:
+      8.215% 59.149%,
+      auto;
+    background-repeat: no-repeat, repeat;
+    background-color: var(--color-surface-bg-default, #fff);
+    border: none;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-sm, 6px);
+    justify-content: flex-end;
+    padding: var(--spacing-xl, 16px) var(--spacing-md, 8px);
+    width: 100%;
+  }
+
+  .auth-join__actions {
+    color: var(--color-text-text-default, #000);
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
+    display: flex;
+    padding: 0px var(--spacing-md, 8px);
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    font-size: var(--text-widget-base);
+    line-height: var(--text-widget-base--line-height);
+    letter-spacing: var(--text-widget-base--letter-spacing);
+    font-weight: 600;
+  }
+
+  .auth-join__logo {
+    display: flex;
+    width: 75px;
+    height: 12px;
+    padding: 0px var(--spacing-none, 0px);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-text-text-default, #000);
+  }
+`;var _=class extends bt.PopElement{handleClick(){this.emit("pop-click")}render(){return Ct.html` <button
+      class=${(0,St.classMap)({"auth-join":!0})}
+      part="base"
+      type="button"
+      @click=${this.handleClick}
+    >
+      <div class="auth-join__actions">
+        Join the Conversation
+        <svg
+          class="auth-join__logo"
+          width="75"
+          height="12"
+          viewBox="0 0 75 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.58333 0.265686C1.0463 0.265686 0 2.5714 0 5.47711C0 6.55283 0.115741 7.6114 0.25 8.67426C0.300926 9.08997 0.282407 9.54854 0.365741 9.96426C0.583333 11.0571 1.69444 11.5628 2.77315 11.5628C4.25 11.5628 5.23148 10.7014 5.23148 9.3214C5.23148 8.52426 4.94907 8.0014 4.13426 7.69283C4.08333 7.67569 4.03241 7.66283 4.03241 7.59854C4.03241 7.4914 4.21759 7.41426 4.33333 7.41426C4.73148 7.41426 5.36111 7.78283 5.91204 7.78283C8.06944 7.78283 9.26389 5.86283 9.26389 4.06283C9.26389 1.44854 7.18518 0.265686 4.58333 0.265686ZM4.56481 5.91854C4.43056 5.91854 4.31481 5.8114 4.31481 5.68711C4.31481 5.51997 4.56481 5.39569 4.64815 5.25854C4.8287 4.94997 4.87963 4.42711 4.87963 4.07569C4.87963 3.65997 4.76389 2.89283 4.48148 2.58426C4.39815 2.49426 4.28241 2.44711 4.28241 2.32283C4.28241 2.19854 4.41667 2.0914 4.5463 2.0914C5.11111 2.0914 5.39352 3.62997 5.39352 4.02854C5.39352 4.45711 5.24537 5.91854 4.56481 5.91854Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14.9259 0.527108C11.4074 0.527108 9.2963 2.83282 9.2963 5.99568C9.2963 9.15854 11.4028 11.4643 14.9259 11.4643C18.4491 11.4643 20.537 9.12854 20.537 5.99568C20.537 2.86282 18.412 0.527108 14.9259 0.527108ZM15.0787 9.89997C15.0232 9.96425 14.912 10.0843 14.7778 10.0843C14.6435 10.0843 14.5139 9.97711 14.5139 9.85282C14.5139 9.80568 14.9445 9.20568 15.0139 9.02139C15.2778 8.29711 15.3287 7.51282 15.3287 6.74568C15.3287 5.71711 15.1296 4.39282 14.4491 3.54854C14.3148 3.39425 13.9028 3.10282 13.9028 2.93568C13.9028 2.81139 14.0185 2.70425 14.1528 2.70425C14.2685 2.70425 14.3843 2.79854 14.4676 2.85854C15.5278 3.67282 15.8472 5.53282 15.8472 6.74568C15.8472 7.69711 15.8056 9.08568 15.0833 9.89568L15.0787 9.89997Z"
+            fill="currentColor"
+          />
+          <path
+            d="M25.375 0.265686C21.838 0.265686 20.7917 2.5714 20.7917 5.47711C20.7917 6.55283 20.9074 7.6114 21.0417 8.67426C21.0926 9.08997 21.0741 9.54854 21.1574 9.96426C21.375 11.0571 22.4861 11.5628 23.5648 11.5628C25.0417 11.5628 26.0231 10.7014 26.0231 9.3214C26.0231 8.52426 25.7407 8.0014 24.9259 7.69283C24.875 7.67569 24.8241 7.66283 24.8241 7.59854C24.8241 7.4914 25.0092 7.41426 25.125 7.41426C25.5231 7.41426 26.1528 7.78283 26.7037 7.78283C28.8611 7.78283 30.0555 5.86283 30.0555 4.06283C30.0555 1.44854 27.9815 0.265686 25.375 0.265686ZM25.3611 5.91854C25.2268 5.91854 25.1111 5.8114 25.1111 5.68711C25.1111 5.51997 25.3611 5.39569 25.4444 5.25854C25.625 4.94997 25.6759 4.42711 25.6759 4.07569C25.6759 3.65997 25.5602 2.89283 25.2778 2.58426C25.1944 2.49426 25.0787 2.44711 25.0787 2.32283C25.0787 2.19854 25.213 2.0914 25.3426 2.0914C25.9074 2.0914 26.1898 3.62997 26.1898 4.02854C26.1898 4.45711 26.0417 5.91854 25.3611 5.91854Z"
+            fill="currentColor"
+          />
+          <path
+            d="M37.3843 4.81284C36.1898 4.81284 34.5278 5.31855 34.5278 6.64284C34.5278 7.39713 35.125 8.5157 36.0741 8.5157C36.6713 8.5157 37.0556 8.08713 37.2546 8.08713C37.3056 8.08713 37.3519 8.11713 37.3519 8.16427C37.3519 8.60998 36.4213 8.81141 36.0556 8.81141C34.7778 8.81141 34.0972 7.7957 34.0972 6.71998C34.0972 5.39998 35.4398 4.38427 36.8009 4.38427C37.1991 4.38427 37.6158 4.49141 38.0139 4.49141C39.1945 4.49141 40.0371 3.50998 40.0371 2.46427C40.0371 0.728554 37.8148 0.329982 36.3333 0.329982C32.3982 0.329982 30.1065 2.6957 30.1065 6.29141C30.1065 9.61284 31.9676 11.73 35.6528 11.73C38.0417 11.73 40.6482 10.7786 40.6482 8.19427C40.6482 6.42855 39.4028 4.81284 37.3796 4.81284H37.3843Z"
+            fill="currentColor"
+          />
+          <path
+            d="M48.3611 7.42711C48.0602 7.42711 47.8148 7.53426 47.5648 7.53426C47.5139 7.53426 47.5 7.48711 47.5 7.45712C47.5 7.34997 47.5509 7.30283 47.6342 7.27283C47.9167 7.18283 48.2176 7.11854 48.4954 6.99426C49.7592 6.4414 50.5046 5.45569 50.5046 4.15283C50.5046 1.79997 48.3287 0.372829 45.9398 0.372829C45.0741 0.372829 44.2315 0.604257 43.5 0.972829C41.5092 1.9714 41.125 3.40283 41.0092 5.35283C40.9583 6.11997 40.9583 6.8914 40.9583 7.65854V9.51854C40.9583 10.6843 41.787 11.6228 43.0972 11.6228C44.0416 11.6228 44.8889 10.9928 45.1065 10.1614C45.2222 9.66854 45.1574 9.08569 45.1574 8.60997C45.1574 8.56283 45.1759 8.54997 45.2222 8.54997C45.2685 8.54997 45.3241 8.57997 45.3565 8.59711C45.9398 9.90426 46.7361 11.5628 48.5417 11.5628C49.787 11.5628 50.8148 10.7485 50.8148 9.56569C50.8148 8.38283 49.6204 7.4314 48.3565 7.4314L48.3611 7.42711ZM45.6574 5.91854C45.5231 5.91854 45.4074 5.8114 45.4074 5.68711C45.4074 5.51997 45.6574 5.39569 45.7407 5.25854C45.9213 4.94997 45.9722 4.42711 45.9722 4.07569C45.9722 3.65997 45.8565 2.89283 45.5741 2.58426C45.4907 2.49426 45.3935 2.44711 45.3935 2.32283C45.3935 2.19854 45.5092 2.0914 45.6435 2.0914C46.2083 2.0914 46.4907 3.62997 46.4907 4.02854C46.4907 4.45711 46.3565 5.91854 45.662 5.91854H45.6574Z"
+            fill="currentColor"
+          />
+          <path
+            d="M54.8056 0.865677C54.4074 0.621391 53.8426 0.497105 53.3611 0.497105C52.3148 0.497105 51.4167 1.26425 51.3009 2.21996C51.2685 2.49853 51.2824 2.75996 51.2824 3.05139V5.66139L51.2315 8.41282V9.77996C51.2315 10.8557 52.2269 11.7 53.375 11.7C54.2222 11.7 55.1528 11.2071 55.4676 10.47C55.6482 10.0542 55.6667 9.47139 55.6667 9.02568V7.82568L55.6852 5.42996V3.03425C55.6852 2.14282 55.6667 1.43568 54.8056 0.865677Z"
+            fill="currentColor"
+          />
+          <path
+            d="M58.9445 0.402828C57.25 0.402828 56.4028 1.13997 56.4028 2.7214V3.3514L56.4213 4.59426V5.22426C56.4213 5.69997 56.4213 6.14568 56.4028 6.6214C56.3704 7.1914 56.287 7.75711 56.287 8.34426C56.287 10.4957 57.4815 11.5414 59.7917 11.5414C63.3426 11.5414 65.75 10.1271 65.75 6.60854C65.75 2.36568 63.5417 0.398542 58.9445 0.398542V0.402828ZM60.537 8.9014C60.4028 8.9014 60.287 8.79426 60.287 8.66997C60.287 8.62283 60.3056 8.59283 60.338 8.54568C60.7685 7.88568 60.8843 6.96426 60.8843 6.20997C60.8843 5.50283 60.8009 4.45711 60.3194 3.90426C60.2361 3.77997 60.0695 3.68997 60.0695 3.53569C60.0695 3.4114 60.1852 3.30426 60.3194 3.30426C60.5694 3.30426 60.9167 3.88711 61.0185 4.08854C61.3333 4.76569 61.3843 5.50283 61.3843 6.22283C61.3843 6.66854 61.1343 8.89711 60.537 8.89711V8.9014Z"
+            fill="currentColor"
+          />
+          <path
+            d="M73.5046 5.85855C72.5417 5.78141 71.162 5.47284 70.4167 4.88998C70.3194 4.81284 70.1528 4.7057 70.1528 4.56855C70.1528 4.52141 70.1713 4.44427 70.2361 4.44427C70.4167 4.44427 71.5787 5.3057 72.5787 5.3057C73.8426 5.3057 75 4.39713 75 3.20141C75 1.23427 72.1806 0.437125 70.4676 0.437125C67.9259 0.437125 66.037 1.95855 66.037 4.37141C66.037 4.89427 66.1204 5.61427 66.537 6.01713C66.7361 6.21855 67.0694 6.21855 67.3333 6.21855C68.3287 6.21855 69.5926 6.50998 70.1204 7.35427C70.1713 7.43141 70.2176 7.5557 70.2176 7.6457C70.2176 7.6757 70.2176 7.72284 70.1852 7.7057C70.088 7.6757 70.0046 7.59855 69.9352 7.53855C69.3519 7.0157 68.5555 6.49284 67.713 6.49284C66.4491 6.49284 66.0046 7.6157 66.0046 8.59713C66.0046 10.5771 67.9306 11.67 69.8889 11.67C72.213 11.67 75 10.2557 75 7.84284C75 6.95141 74.5833 5.95284 73.5046 5.86284V5.85855Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </button>`}};_.styles=[l(_,_,"styles"),yt],_=i([(0,wt.customElement)("pop-auth-join")],_);var kt=_;var _t=require("@lit/context"),Et=require("@popgrids/ui"),J=require("lit"),H=require("lit/decorators.js"),Tt=require("lit/directives/class-map.js"),Mt=require("lit/directives/if-defined.js");var jt=require("@lit/context"),E=(0,jt.createContext)(Symbol("pop-auth-context"));var Dt=require("lit"),At=Dt.css`
+  :host {
+    display: flex;
+    width: 100%;
+  }
+
+  .auth-panel {
+    display: flex;
+    border-top: 1px solid var(--color-surface-alpha-singular-alpha-input-bar, rgba(0, 0, 32, 0.04));
+    flex-direction: column;
+    height: 50px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: height 150ms ease-in-out;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--color-surface-bg-default, #fff);
+    backdrop-filter: blur(var(--blur-2xl));
+  }
+
+  .auth-panel--is-open {
+    /* Dynamic height will be set via JS */
+    /* The max-height provides a constraint */
+    max-height: 340px;
+    transition: height var(--duration-quick) var(--ease-quick);
+  }
+
+  .auth-panel__content {
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+`;var u=class extends Et.PopElement{constructor(){super(...arguments);this._email="";this._open=!1;this._resizeObserver=null;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._authPanel)&&(this._open=!1)}}handleJoinClick(){this._open=!0}async connectedCallback(){super.connectedCallback(),await this.updateComplete,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown),this.setupResizeObserver()}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),this._resizeObserver?.disconnect(),super.disconnectedCallback()}setupResizeObserver(){this._resizeObserver=new ResizeObserver(t=>{requestAnimationFrame(()=>{for(let e of t)if(e.target===this._authPanelContent){let r=this._authPanelContent.offsetHeight;this._open?this._authPanel.style.height=`${r}px`:this._authPanel.style.height="50px"}})}),this._authPanelContent&&this._resizeObserver.observe(this._authPanelContent)}updated(t){super.updated(t),(t.has("_open")||t.has("authContext"))&&(t.has("_open")&&!this._open?this._authPanel.style.height="50px":this._open&&this._authPanelContent&&requestAnimationFrame(()=>{let e=this._authPanelContent.offsetHeight;this._authPanel.style.height=`${e}px`}),!this._resizeObserver&&this._authPanelContent&&this.setupResizeObserver())}handleSignInSuccess(t){t.detail?.email&&(this._email=t.detail.email)}handleCodeVerificationSuccess(){this._open=!1}renderAuthenticated(){return J.html`Authenticated`}renderJoinButton(){return J.html`<pop-auth-join @pop-click=${this.handleJoinClick}></pop-auth-join>`}renderSignInForm(){return J.html`<pop-auth-sign-in @pop-success=${this.handleSignInSuccess}></pop-auth-sign-in>`}renderVerifyCodeForm(){return J.html`
+      <pop-auth-verify-code
+        email=${(0,Mt.ifDefined)(this._email)}
+        @pop-success=${this.handleCodeVerificationSuccess}
+      ></pop-auth-verify-code>
+    `}renderUnauthenticated(){return this._open?this.authContext?.isVerifying?this.renderVerifyCodeForm():this.renderSignInForm():this.renderJoinButton()}render(){return J.html`
+      <div
+        class=${(0,Tt.classMap)({"auth-panel":!0,"auth-panel--is-open":this._open})}
+      >
+        <div class="auth-panel__content">
+          ${this.authContext?.isAuthenticated?this.renderAuthenticated():this.renderUnauthenticated()}
+        </div>
+      </div>
+    `}};u.styles=[l(u,u,"styles"),At],i([(0,_t.consume)({context:E,subscribe:!0})],u.prototype,"authContext",2),i([(0,H.query)(".auth-panel")],u.prototype,"_authPanel",2),i([(0,H.query)(".auth-panel__content")],u.prototype,"_authPanelContent",2),i([(0,H.state)()],u.prototype,"_email",2),i([(0,H.state)()],u.prototype,"_open",2),u=i([(0,H.customElement)("pop-auth-panel")],u);var Vt=u;var O=require("@lit/context"),$t=require("@popgrids/ui"),Bt=require("lit"),j=require("lit/decorators.js");var qt=require("@lit/context"),$=(0,qt.createContext)(Symbol("pop-api-context"));var Lt=require("lit"),Ht=Lt.css`
+  :host {
+    display: block;
+  }
+`;var st="popgrids_token",f=class extends $t.PopElement{constructor(){super(...arguments);this.error=null;this.isAuthenticated=!1;this.currentAccount=null;this.isVerifying=!1;this.token=null;this.verificationExpiresAt=null;this.contextData={currentAccount:null,error:null,isAuthenticated:!1,isVerifying:!1,signIn:this.signIn.bind(this),signOut:this.signOut.bind(this),token:null,verificationExpiresAt:null,verifyCode:this.verifyCode.bind(this)}}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(st);t&&(this.token=t,this.fetchCurrentAccount())}async fetchCurrentAccount(){if(!(!this.token||!this.apiState?.client)){console.log("fetchCurrentAccount",this.token);try{let{data:t,error:e}=await this.apiState.client.GET("/api/v1/users/me",{headers:{Authorization:`Bearer ${this.token}`,"Content-Type":"application/json",Accept:"application/json"}});e&&this.signOut(),t?(this.currentAccount=t,this.isAuthenticated=!0,this.updateContextData()):this.signOut()}catch(t){console.error("Failed to fetch current account:",t),this.signOut()}}}async signIn(t){if(!this.apiState?.client)throw new Error("API client not available");try{let{data:e,error:r}=await this.apiState.client.POST("/api/v1/session",{params:{query:{email:t.email}}});if(r&&(this.error=r,this.updateContextData()),e)return this.isVerifying=!0,this.verificationExpiresAt=e.expires,this.updateContextData(),e;throw new Error("Authentication failed")}catch(e){throw console.error("Sign in failed:",e),e}}async verifyCode(t,e){if(this.apiState?.client)try{let{data:r,error:s}=await this.apiState.client.PUT("/api/v1/session",{params:{query:{code:t,email:e}}});if(s&&(this.error=s,this.updateContextData()),r)this.token=`${r.token}`,localStorage.setItem(st,this.token),this.isVerifying=!1,this.verificationExpiresAt=null,await this.fetchCurrentAccount();else throw new Error("Verification failed")}catch(r){throw console.error("Verification failed:",r),r}}signOut(){this.token=null,this.currentAccount=null,this.isAuthenticated=!1,this.isVerifying=!1,this.verificationExpiresAt=null,localStorage.removeItem(st),this.updateContextData()}updateContextData(){this.contextData={...this.contextData,error:this.error,isAuthenticated:this.isAuthenticated,isVerifying:this.isVerifying,currentAccount:this.currentAccount,token:this.token,verificationExpiresAt:this.verificationExpiresAt}}render(){return Bt.html`<slot part="base"></slot>`}};f.styles=[Ht],i([(0,O.consume)({context:$})],f.prototype,"apiState",2),i([(0,j.state)()],f.prototype,"error",2),i([(0,j.state)()],f.prototype,"isAuthenticated",2),i([(0,j.state)()],f.prototype,"currentAccount",2),i([(0,j.state)()],f.prototype,"isVerifying",2),i([(0,j.state)()],f.prototype,"token",2),i([(0,j.state)()],f.prototype,"verificationExpiresAt",2),i([(0,O.provide)({context:E}),(0,j.property)({attribute:!1})],f.prototype,"contextData",2),f=i([(0,j.customElement)("pop-auth-provider")],f);var zt=f;var Nt=require("@lit/context"),Qt=require("@popgrids/ui"),Jt=require("lit"),I=require("lit/decorators.js"),Ft=require("lit/directives/class-map.js");var It="./apple-IX52EWYN.png";var Rt="./google-Q3MFTU5A.png";var Ut=require("lit"),Kt=Ut.css`
+  :host {
+    display: block;
+  }
+
+  .auth-sign-in {
+    display: flex;
+    padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-xl, 16px);
+  }
+
+  .auth-sign-in__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl, 16px);
+    font-size: var(--text-widget-base);
+    line-height: var(--text-widget-base--line-height);
+    letter-spacing: var(--text-widget-base--letter-spacing);
+    font-weight: 500;
+  }
+
+  .auth-sign-in__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl, 16px);
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  .auth-sign-in__apple-icon,
+  .auth-sign-in__google-icon {
+    border: none;
+    background-color: transparent;
+    display: flex;
+    width: 32px;
+    height: 32px;
+    justify-content: center;
+    align-items: center;
+    transition: transform 300ms ease-out;
+  }
+
+  .auth-sign-in__apple-icon:hover,
+  .auth-sign-in__google-icon:hover {
+    transform: scale(1.125);
+  }
+
+  .auth-sign-in__social-login {
+    display: flex;
+    padding: 0px var(--spacing-2xl, 20px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-4xl, 32px);
+    align-self: stretch;
+  }
+
+  .auth-sign-in__title {
+    font-size: var(--text-widget-base);
+    line-height: var(--text-widget-base--line-height);
+    letter-spacing: var(--text-widget-base--letter-spacing);
+    font-weight: 600;
+  }
+
+  .auth-sign-in__submit-button {
+    width: 100%;
+    height: 40px;
+    color: var(--color-text-text-default);
+  }
+
+  .auth-sign-in__email-input {
+    width: 100%;
+    height: 40px;
+    color: var(--color-text-text-default);
+  }
+`;var vi=Rt,yi=It,h=class extends Qt.PopElement{constructor(){super(...arguments);this.email="";this.emailError="";this.isSubmitting=!1;this.isValid=!1}validateEmail(t){return t?!0:(this.emailError="Please enter an email address",this.isValid=!1,!1)}handleBlur(){this.email&&this.validateEmail(this.email)}handleEmailChange(t){this.email=t.target.value,this.email?this.validateEmail(this.email):(this.emailError="",this.isValid=!1)}handleInvalid(t){let{valid:e,validationMessage:r,validity:s}=t.detail;e||(console.log("Validation failed:",r),s.typeMismatch&&console.log("Invalid email format"),s.patternMismatch&&console.log("Pattern mismatch")),this.isValid=e}async handleSubmit(t){if(t.preventDefault(),!(!this.validateEmail(this.email)||this.isSubmitting)){if(!this.authContext?.signIn)throw new Error("Authentication context not available");this.isSubmitting=!0;try{let e=await this.authContext.signIn({email:this.email});this.onSuccess(e)}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(t){this.emit("pop-success",{email:t.email,expires:t.expires})}onFailure(){console.log("failure"),this.emit("pop-error",{error:"Creating a session failed",success:!1})}render(){return Jt.html`<div
+      class=${(0,Ft.classMap)({"auth-sign-in":!0})}
+      part="base"
+    >
+      <form class="auth-sign-in__form" @submit=${this.handleSubmit}>
+        <pop-logo variant="logo" theme="white" style="width: 100px; height: 16px;"></pop-logo>
+        <h2 class="auth-sign-in__title">Small communities, big connections 👋</h2>
+        <pop-form-input-simple
+          aria-invalid=${this.emailError?"true":"false"}
+          aria-describedby="email-error"
+          autocomplete="off"
+          errorMessage=${this.emailError}
+          name="email"
+          type="email"
+          placeholder="Email"
+          pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+.[a-zA-Z]{2,}"
+          .value=${this.email}
+          .disabled=${this.isSubmitting}
+          ?required=${!0}
+          ?error=${!!this.emailError}
+          @input=${this.handleEmailChange}
+          @blur=${this.handleBlur}
+          @pop-invalid=${this.handleInvalid}
+        ></pop-form-input-simple>
+        <pop-button
+          class="auth-sign-in__submit-button"
+          theme="brand"
+          variant="primary"
+          current
+          ?disabled=${this.isSubmitting||!this.isValid}
+        >
+          ${this.isSubmitting?"Submitting...":"Continue"}
+        </pop-button>
+      </form>
+      <div class="auth-sign-in__social-login">
+        <button class="auth-sign-in__google-icon" type="button">
+          <img src=${vi} alt="Google" />
+        </button>
+        <button class="auth-sign-in__apple-icon" type="button">
+          <img src=${yi} alt="Apple" />
+        </button>
+      </div>
+      <div class="auth-sign-in__footer">
+        <pop-button-link ?primary=${!0} size="sm">What's Popgrids?</pop-button-link>
+      </div>
+    </div>`}};h.styles=[l(h,h,"styles"),Kt],i([(0,Nt.consume)({context:E,subscribe:!0})],h.prototype,"authContext",2),i([(0,I.state)()],h.prototype,"email",2),i([(0,I.state)()],h.prototype,"emailError",2),i([(0,I.state)()],h.prototype,"isSubmitting",2),i([(0,I.state)()],h.prototype,"isValid",2),h=i([(0,I.customElement)("pop-auth-sign-in")],h);var Zt=h;var Pt=require("@lit/context"),Wt=require("@popgrids/ui"),Y=require("lit"),g=require("lit/decorators.js"),Xt=require("lit/directives/class-map.js"),ot=require("lit/directives/when.js");var Yt=require("lit"),Gt=Yt.css`
+  :host {
+    display: block;
+  }
+
+  .auth-verify-code {
+    display: flex;
+    padding: var(--spacing-2xl, 20px) var(--spacing-3xl, 24px);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-xl, 16px);
+    position: relative;
+  }
+
+  .auth-verify-code__toast {
+    position: absolute;
+  }
+
+  .auth-verify-code__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-md, 8px);
+    align-self: stretch;
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    text-align: center;
+  }
+
+  .auth-verify-code__help .auth-verify-code__body {
+    text-align: left;
+  }
+
+  .auth-verify-code__body strong {
+    font-weight: 600;
+  }
+
+  .auth-verify-code__footer {
+    display: flex;
+    color: var(--color-text-text-default);
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-2xl, 20px);
+  }
+
+  .auth-verify-code__form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-xl, 16px);
+  }
+
+  .auth-verify-code__help {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-xl, 16px);
+  }
+
+  .auth-verify-code__title {
+    font-size: var(--text-widget-base);
+    line-height: var(--text-widget-base--line-height);
+    letter-spacing: var(--text-widget-base--letter-spacing);
+    font-weight: 600;
+  }
+
+  .auth-verify-code__code-input-fields {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-xl, 16px);
+    margin-bottom: var(--spacing-xs, 4px);
+  }
+
+  .auth-verify-code__code-input-group {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm, 6px);
+  }
+`;var p=class extends Wt.PopElement{constructor(){super(...arguments);this.email="";this.code="";this.isSubmitting=!1;this.error="";this._showingHelp=!1;this._showingToast=!1;this._toastMessage=""}getCodeInput(t){return this.codeInputs[t]}closeToast(){this._showingToast=!1}handleContactSupport(){console.log("handleContactSupport")}async handleResendCode(){console.log("handleResendCode");try{let t=await this.authContext?.signIn({email:this.email});this._showingHelp=!1}catch(t){console.error(t)}finally{this.isSubmitting=!1}}handleInput(t){let e=t.target,r=/^\d$/.test(e.value);if(r||e.value===""){if(r){let s=Array.from(this.codeInputs).indexOf(t.currentTarget);s<this.codeInputs.length-1&&this.getCodeInput(s+1)?.focus()}this.updateCodeValue()}else e.value=""}handleKeyDown(t){let e=t.target,r=Array.from(this.codeInputs).indexOf(t.currentTarget);if(t.key==="Backspace"&&e.value===""&&r>0){let s=this.getCodeInput(r-1);s?.focus(),s?.select()}if(t.key==="ArrowLeft"&&r>0){let s=this.getCodeInput(r-1);s?.focus(),s?.select()}if(t.key==="ArrowRight"&&r<this.codeInputs.length-1){let s=this.getCodeInput(r+1);s?.focus(),s?.select()}}handleFocus(t){t.target.select()}showToast(t){this._showingToast=!0,this._toastMessage=t}toggleHelp(){this._showingHelp=!this._showingHelp,console.log("handleNeedHelpClick")}handleSubmit(t){t.preventDefault(),this.submitForm()}handlePaste(t){t.preventDefault();let e=t.clipboardData;if(!e)return;e.getData("text").replace(/\D/g,"").substring(0,this.codeInputs.length).split("").forEach((M,d)=>{if(d<this.codeInputs.length){let c=this.getCodeInput(d);c&&(c.value=M)}});let o=Array.from(this.codeInputs).findIndex(M=>!M.value),K=o!==-1?o:this.codeInputs.length-1;this.getCodeInput(K)?.focus(),this.updateCodeValue()}updateCodeValue(){let t=Array.from(this.codeInputs).map(r=>r.value);this.code=t.join(""),this.hiddenInput&&(this.hiddenInput.value=this.code),t.length===6&&t.every(r=>/^\d$/.test(r))&&setTimeout(()=>this.submitForm(),0)}async submitForm(){if(!(!this.authContext?.verifyCode||this.isSubmitting||!this.email||this.code.length!==6)){this.isSubmitting=!0,this.error="";try{await this.authContext.verifyCode(this.code,this.email),this.onSuccess()}catch{this.onFailure()}finally{this.isSubmitting=!1}}}onSuccess(){this.emit("pop-success")}onFailure(){this.showToast("Verification failed. Please try again."),Array.from(this.codeInputs).forEach(t=>{t.value=""}),this.codeInputs.length&&this.getCodeInput(0)?.focus(),this.code=""}render(){return Y.html`<div
+      class=${(0,Xt.classMap)({"auth-verify-code":!0})}
+      part="base"
+    >
+      ${(0,ot.when)(this._showingToast,()=>Y.html`<pop-toast class="auth-verify-code__toast" theme="transparent" @pop-close=${this.closeToast}
+            >${this._toastMessage}</pop-toast
+          >`)}
+      ${(0,ot.when)(!this._showingHelp,()=>Y.html`
+          <form class="auth-verify-code__form" @submit=${this.handleSubmit}>
+            <input type="hidden" name="code" value=${this.code} />
+            <h2 class="auth-verify-code__title">Enter Verification Code</h2>
+            <div class="auth-verify-code__code-input-fields">
+              <div class="auth-verify-code__code-input-group">
+                <pop-code-input-field
+                  name="code_1"
+                  autofocus
+                  .disabled=${this.isSubmitting}
+                  @input=${this.handleInput}
+                  @keydown=${this.handleKeyDown}
+                  @focus=${this.handleFocus}
+                  @paste=${this.handlePaste}
+                ></pop-code-input-field>
+                <pop-code-input-field
+                  name="code_2"
+                  .disabled=${this.isSubmitting}
+                  @input=${this.handleInput}
+                  @keydown=${this.handleKeyDown}
+                  @focus=${this.handleFocus}
+                  @paste=${this.handlePaste}
+                ></pop-code-input-field>
+                <pop-code-input-field
+                  name="code_3"
+                  .disabled=${this.isSubmitting}
+                  @input=${this.handleInput}
+                  @keydown=${this.handleKeyDown}
+                  @focus=${this.handleFocus}
+                  @paste=${this.handlePaste}
+                ></pop-code-input-field>
+              </div>
+              <div class="auth-verify-code__code-input-group">
+                <pop-code-input-field
+                  name="code_4"
+                  .disabled=${this.isSubmitting}
+                  @input=${this.handleInput}
+                  @keydown=${this.handleKeyDown}
+                  @focus=${this.handleFocus}
+                  @paste=${this.handlePaste}
+                ></pop-code-input-field>
+                <pop-code-input-field
+                  name="code_5"
+                  .disabled=${this.isSubmitting}
+                  @input=${this.handleInput}
+                  @keydown=${this.handleKeyDown}
+                  @focus=${this.handleFocus}
+                  @paste=${this.handlePaste}
+                ></pop-code-input-field>
+                <pop-code-input-field
+                  name="code_6"
+                  .disabled=${this.isSubmitting}
+                  @input=${this.handleInput}
+                  @keydown=${this.handleKeyDown}
+                  @focus=${this.handleFocus}
+                  @paste=${this.handlePaste}
+                ></pop-code-input-field>
+              </div>
+            </div>
+
+            <div class="auth-verify-code__body">
+              <p>A verification code has been sent to your email. Enter code to continue.</p>
+              <p>
+                Code expires in
+                <pop-timestamp-countdown>${this.authContext?.verificationExpiresAt}</pop-timestamp-countdown>.
+              </p>
+            </div>
+
+            <div class="auth-verify-code__footer">
+              <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.toggleHelp}>
+                No verification code?
+              </pop-button-link>
+            </div>
+          </form>
+        `,()=>Y.html`
+          <div class="auth-verify-code__help">
+            <h2 class="auth-verify-code__title">Steps to Take</h2>
+            <div class="auth-verify-code__body">
+              <ul>
+                <li><strong>Check spam/junk</strong> – it might be there.</li>
+                <li><strong>Verify email</strong> – check your email for typos.</li>
+                <li><strong>Wait a moment</strong> – emails take a few mins.</li>
+                <li><strong>Whitelist us</strong> – it may be blocked.</li>
+              </ul>
+            </div>
+            <div class="auth-verify-code__footer">
+              <pop-button-link size="sm" theme="default" @click=${this.handleContactSupport}>
+                Contact Support
+              </pop-button-link>
+              <pop-button-link size="sm" theme="default" ?primary=${!0} @click=${this.handleResendCode}>
+                Resend Code
+              </pop-button-link>
+            </div>
+          </div>
+        `)}
+    </div>`}};p.styles=[l(p,p,"styles"),Gt],i([(0,Pt.consume)({context:E,subscribe:!0})],p.prototype,"authContext",2),i([(0,g.property)({type:String})],p.prototype,"email",2),i([(0,g.state)()],p.prototype,"code",2),i([(0,g.state)()],p.prototype,"isSubmitting",2),i([(0,g.state)()],p.prototype,"error",2),i([(0,g.state)()],p.prototype,"_showingHelp",2),i([(0,g.state)()],p.prototype,"_showingToast",2),i([(0,g.state)()],p.prototype,"_toastMessage",2),i([(0,g.query)('input[name="code"]')],p.prototype,"hiddenInput",2),i([(0,g.queryAll)("pop-code-input-field")],p.prototype,"codeInputs",2),p=i([(0,g.customElement)("pop-auth-verify-code")],p);var Ot=p;var ie=require("@popgrids/ui"),re=require("lit"),ae=require("lit/decorators.js"),ne=require("lit/directives/class-map.js");var te=require("lit"),ee=te.css`
+  :host {
+    display: block;
+  }
+
+  .comment-bar {
+    align-items: flex-start;
+    background: var(--color-border-singular-border-island);
+    border-top: 1px solid var(--color-surface-alpha-alpha-input-bar);
+    padding: var(--spacing-sm, 6px) var(--spacing-sm, 6px) var(--spacing-md, 8px) var(--spacing-sm, 6px);
+    position: relative;
+    transition: all var(--duration-quick) var(--ease-quick);
+  }
+
+  .comment-bar__actions {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr 0px;
+    gap: 6px;
+    align-items: start;
+    transition: all var(--duration-quick) var(--ease-quick);
+  }
+  .comment-bar--has-content {
+    grid-template-columns: auto 1fr 32px;
+  }
+
+  .comment-bar__avatars {
+    display: flex;
+    align-items: center;
+    padding-top: 2px;
+  }
+
+  .comment-bar__avatars > *:not(:last-child) {
+    margin-right: -4px;
+  }
+
+  .comment-bar__avatars > pop-comment-avatar {
+    transition: transform var(--duration-pop-hover) var(--ease-pop-hover);
+  }
+  .comment-bar__avatars > pop-comment-avatar:hover {
+    transform: scale(1.1875);
+  }
+
+  .comment-bar__send-icon {
+    position: absolute;
+    right: 0;
+    bottom: 0.5px;
+    transition: opacity var(--duration-150) var(--ease-linear);
+    opacity: 0;
+  }
+  .comment-bar--has-content .comment-bar__send-icon {
+    opacity: 1;
+  }
+`;var T=class extends ie.PopElement{render(){return re.html`
+      <div
+        class=${(0,ne.classMap)({"comment-bar":!0})}
+        part="base"
+      >
+        <div class="comment-bar__actions">
+          <div>
+            <div class="comment-bar__avatars">
+              <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
+                <img src="https://i.pravatar.cc/90" alt="User avatar" />
+              </pop-comment-avatar>
+              <pop-comment-avatar size="xs" style="--comment-avatar-border-size: 2px">
+                <img src="https://i.pravatar.cc/100" alt="User avatar" />
+              </pop-comment-avatar>
+            </div>
+          </div>
+          <pop-comment-input></pop-comment-input>
+          <pop-comment-icon class="comment-bar__send-icon" theme="neutral" variant="send" size="sm"></pop-comment-icon>
+        </div>
+      </div>
+    `}};T.styles=[l(T,T,"styles"),ee],T=i([(0,ae.customElement)("pop-comment-bar")],T);var se=T;var B=require("@floating-ui/dom"),lt=require("@lit/context"),pe=require("@popgrids/ui"),tt=require("@tiptap/core"),ce=Q(require("@tiptap/extension-document"),1),me=require("@tiptap/extension-mention"),ue=Q(require("@tiptap/extension-paragraph"),1),fe=Q(require("@tiptap/extension-placeholder"),1),he=Q(require("@tiptap/extension-text"),1),ge=Q(require("@tiptap/extension-typography"),1),dt=require("lit"),V=require("lit/decorators.js"),xe=require("lit/directives/class-map.js");var oe=require("@lit/context"),w=(0,oe.createContext)(Symbol("pop-grid-context"));var le=require("lit"),de=le.css`
+  :host {
+    display: flex;
+    position: relative;
+  }
+
+  .comment-input {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    max-height: 280px;
+    width: 100%;
+    padding-top: 4px;
+    padding-right: 8px;
+    padding-bottom: 4px;
+    padding-left: 12px;
+    background-color: var(--color-surface-alpha-singular-alpha-input-bar);
+    transition: all var(--duration-quick) var(--ease-quick);
+    border-radius: 18px;
+    min-height: 36px;
+    flex: 1 0 0;
+  }
+
+  .comment-input--has-error {
+    border-color: var(--color-border-conditional-border-error);
+    background-color: var(--color-surface-alpha-alpha-error);
+  }
+
+  .comment-input__input {
+    display: flex;
+    padding: 5px 0;
+    align-items: flex-end;
+    gap: 2px;
+    flex: 1 0 0;
+    font-size: var(--text-widget-base);
+    line-height: var(--text-widget-base--line-height);
+    letter-spacing: var(--text-widget-base--letter-spacing);
+    white-space: pre-wrap;
+  }
+
+  .tiptap__editor {
+    color: var(--color-text-text-default);
+    font-size: var(--text-widget-base);
+    line-height: var(--text-widget-base--line-height);
+    letter-spacing: var(--text-widget-base--letter-spacing);
+    max-height: 264px;
+    outline: none;
+    overflow-y: auto;
+    position: relative;
+    width: 100%;
+  }
+
+  .tiptap__mention {
+    color: var(--color-text-singular-text-link);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .tiptap__mention-popup {
+    background: var(--color-surface-bg-default);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border-border-edge-strong);
+    box-shadow: var(--shadow-lg);
+    position: absolute;
+    z-index: 1000;
+    transition: opacity 0.1s ease-in-out;
+  }
+
+  .tiptap__mention-popup ul {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: var(--spacing-sm);
+  }
+
+  .tiptap__mention-popup li {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    align-items: center;
+    align-self: stretch;
+    background: var(--color-surface-buttons-secondary-bg-blank-resting);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-text-default);
+    cursor: pointer;
+    display: -webkit-box;
+    display: flex;
+    flex: 1 0 0;
+    font-size: var(--text-widget-base);
+    line-height: var(--text-widget-base--line-height);
+    letter-spacing: var(--text-widget-base--letter-spacing);
+    font-weight: 400;
+    gap: 12px;
+    padding: 8px;
+  }
+
+  .tiptap__mention-popup li:hover {
+    background: #f0f0f0;
+  }
+
+  .tiptap__mention-popup li[data-selected] {
+    background: var(--color-surface-buttons-secondary-bg-blank-hover);
+  }
+
+  .is-editor-empty:first-child::before {
+    color: var(--color-text-text-placeholder);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+`;var m=class extends pe.PopElement{constructor(){super(...arguments);this.variant="text";this._content="";this._error=null}createMentionSuggestion(){return{items:async({query:t})=>{if(!t||t.trim().length===0)return[];let e=this.apiState?.client;if(!e)return[];let{data:r,error:s}=await e.GET("/api/v1/accounts",{params:{query:{by_name:t}}});return s?[]:r?r.map(o=>({id:o.id,label:o.name,href:o.url})):[]},render:()=>{let t,e,r,s,o=0,K=()=>{let d=s.querySelectorAll("li");d.forEach((c,k)=>{k===o?c.setAttribute("data-selected","true"):c.removeAttribute("data-selected")}),d.length>0?(e.style.visibility="visible",e.style.opacity="1"):(e.style.visibility="hidden",e.style.opacity="0")},nt=async d=>{if(!e||!d)return;let c={getBoundingClientRect(){return d}},{x:k,y:A}=await(0,B.computePosition)(c,e,{placement:"top-start",middleware:[(0,B.offset)(6),(0,B.flip)(),(0,B.shift)({padding:8})]});Object.assign(e.style,{position:"absolute",left:`${k}px`,top:`${A}px`})},M=()=>{e&&(e.style.opacity="0",e.style.visibility="hidden",setTimeout(()=>{e?.remove(),e=void 0,s=void 0},150))};return{onStart:d=>{t=d.command;let c=this.shadowRoot?.querySelector(".tiptap__mention-popup");if(c&&c.remove(),e=document.createElement("div"),e.className="tiptap__mention-popup",e.style.opacity="0",e.style.transition="opacity 150ms ease-in-out",e.style.visibility="hidden",this.shadowRoot?.appendChild(e),r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,s=document.createElement("ul");for(let A of r){let N=document.createElement("li");N.textContent=A.label,N.addEventListener("click",ft=>{ft.preventDefault(),ft.stopPropagation(),t({id:A.id,label:A.label,href:A.href}),M()}),s.appendChild(N)}e.appendChild(s),K();let k=d.clientRect?.();k&&nt(k)},onUpdate:d=>{if(t=d.command,r=d.items,r.length===0){e.style.visibility="hidden",e.style.opacity="0";return}o=0,s?s.innerHTML="":(s=document.createElement("ul"),e.appendChild(s));for(let k of r){let A=document.createElement("li");A.textContent=k.label,A.addEventListener("click",N=>{N.preventDefault(),N.stopPropagation(),t({id:k.id,label:k.label,href:k.href}),M()}),s.appendChild(A)}K();let c=d.clientRect?.();c&&nt(c)},onKeyDown:d=>{if(d.event?.key==="Escape")return M(),!0;if(d.event?.key==="ArrowDown")return o=(o+1)%r.length,K(),!0;if(d.event?.key==="ArrowUp")return o=(o-1+r.length)%r.length,K(),!0;if(d.event?.key==="Enter"){let c=r[o];if(c)return t({id:c.id,label:c.label,href:c.href}),M(),!0}return!1},onExit:()=>{M()}}}}}async firstUpdated(){await this.updateComplete,this.initializeEditor()}disconnectedCallback(){this.editor?.destroy(),super.disconnectedCallback()}initializeEditor(){if(!this._editor)return;let t=this.createMentionSuggestion();this.editor=new tt.Editor({element:this._editor,content:this._content,editable:!0,editorProps:{attributes:{class:"tiptap__editor"}},extensions:[ce.default,me.Mention.configure({HTMLAttributes:{class:"tiptap__mention"},renderText({options:e,node:r}){return`${e.suggestion.char}${r.attrs.label??r.attrs.id}`},renderHTML({options:e,node:r}){return["a",(0,tt.mergeAttributes)({href:`${r.attrs.href}`},e.HTMLAttributes),`${e.suggestion.char}${r.attrs.label??r.attrs.id}`]},suggestion:t}).extend({addAttributes(){return{id:{default:null,parseHTML:e=>e.getAttribute("data-id"),renderHTML:e=>({"data-id":e.id})},label:{default:null,parseHTML:e=>e.getAttribute("data-label"),renderHTML:e=>({"data-label":e.label})},href:{default:null,parseHTML:e=>e.getAttribute("href"),renderHTML:e=>({href:e.href})}}}}),ue.default,fe.default.configure({placeholder:"Try mentioning someone using @ symbol"}),he.default,ge.default],onUpdate:({editor:e})=>{this._content=e.getHTML(),this.emit("pop-content-change",this._content)}})}render(){return dt.html`<div
+      class=${(0,xe.classMap)({"comment-input":!0,[`comment-input--variant-${this.variant}`]:!0,"comment-input--has-error":!!this._error})}
+      part="base"
+    >
+      <div class="comment-input__input"></div>
+      ${this._error?dt.html`<div class="comment-input__error">${this._error.message}</div>`:""}
+    </div>`}};m.styles=[l(m,m,"styles"),de],i([(0,lt.consume)({context:$,subscribe:!0})],m.prototype,"apiState",2),i([(0,lt.consume)({context:w,subscribe:!0})],m.prototype,"gridContext",2),i([(0,V.property)({type:String})],m.prototype,"variant",2),i([(0,V.query)(".comment-input__input")],m.prototype,"_editor",2),i([(0,V.state)()],m.prototype,"_content",2),i([(0,V.state)()],m.prototype,"_error",2),m=i([(0,V.customElement)("pop-comment-input")],m);var ve=m;var Ce=require("@lit/context"),we=require("@popgrids/ui"),et=require("lit"),it=require("lit/decorators.js"),Se=require("lit/directives/class-map.js"),ke=require("lit/directives/when.js");var ye=require("lit"),be=ye.css`
+  :host {
+    display: block;
+  }
+
+  .comment-thread {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .comment-thread--size-sm {
+  }
+
+  .comment-thread--size-md {
+  }
+
+  .comment-thread__replies {
+    display: flex;
+    padding-left: var(--spacing-3xl, 24px);
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-lg, 12px);
+  }
+`;var S=class extends we.PopElement{get comment(){return this.gridContext?.comments.find(a=>a.id===this.id)}render(){return et.html`
+      <div
+        class=${(0,Se.classMap)({"comment-thread":!0})}
+      >
+        <pop-comment id=${this.id}></pop-comment>
+        ${(0,ke.when)((this.comment?.repliesCount??0)>0,()=>et.html`
+            <div class="comment-thread__replies">
+              ${this.comment?.replies.map(a=>et.html`<pop-comment id=${a.id}></pop-comment>`)}
+            </div>
+          `)}
+      </div>
+    `}};S.styles=[l(S,S,"styles"),be],i([(0,Ce.consume)({context:w,subscribe:!0})],S.prototype,"gridContext",2),i([(0,it.property)({type:String})],S.prototype,"id",2),S=i([(0,it.customElement)("pop-comment-thread")],S);var je=S;var Ee=require("@lit/context"),Te=require("@popgrids/ui"),Me=require("lit"),q=require("lit/decorators.js"),pt=require("lit/directives/class-map.js"),Ve=require("lit/directives/style-map.js"),qe=require("@popgrids/ui");function De(n){let a=(Date.now()-n.getTime())/1e3;return a<60?`${Math.floor(a)}s`:a<3600?`${Math.floor(a/60)}m`:a<86400?`${Math.floor(a/3600)}h`:`${Math.floor(a/86400)}d`}var Le=require("lit/directives/if-defined.js");var Ae=require("lit"),_e=Ae.css`
+  :host {
+    display: block;
+  }
+
+  .comment {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    background-color: transparent;
+
+    border: none;
+    padding: 0;
+    border-radius: var(--radius-md);
+    outline: 6px solid transparent;
+    transition:
+      background-color 0.2s ease,
+      outline-color 0.2s ease;
+  }
+
+  .comment--size-sm {
+    --avatar-size: 32px;
+    --width: 32px;
+
+    gap: 8px;
+  }
+
+  .comment--size-lg {
+    --avatar-size: 56px;
+    --width: 56px;
+
+    gap: 12px;
+  }
+
+  .comment--is-selected {
+    background-color: var(--color-black-alpha-900);
+    outline-color: var(--color-black-alpha-900);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .comment:hover .comment__avatar {
+      transform: translateX(2px);
+    }
+  }
+
+  .comment--is-selected .comment__avatar {
+    transform: translateX(2px);
+  }
+
+  .comment__avatar {
+    --border-size: 0;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+  }
+
+  .comment__user {
+    display: flex;
+    width: var(--width);
+    align-items: flex-start;
+    gap: 10px;
+    flex-shrink: 0;
+    align-self: stretch;
+  }
+
+  .comment__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+
+  .comment__info {
+    display: flex;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .comment__user-name {
+    color: var(--color-text-text-default, #000);
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
+    font-family: Inter;
+    font-size: var(--text-widget-base, 13px);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--text-widget-base--line-height, 18px);
+    letter-spacing: -0.08px;
+  }
+
+  .comment__timestamp {
+    color: var(--color-text-text-default-dim-light, #697586);
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
+    /* Widget/Regular */
+    font-family: Inter;
+    font-size: var(--text-widget-base, 13px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--text-widget-base--line-height, 18px);
+    letter-spacing: -0.08px;
+  }
+
+  .comment__text {
+    /* Base styles */
+    align-self: stretch;
+    color: var(--color-text-text-default-dim);
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
+    font-family: Inter;
+    font-size: var(--text-widget-base, 13px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--text-widget-base--line-height, 18px);
+    letter-spacing: -0.08px;
+    text-align: left;
+
+    /* Clamping when not expanded */
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .comment__text.expanded {
+    /* Remove line clamping */
+    -webkit-line-clamp: initial;
+    display: block;
+  }
+`;var x=class extends Te.PopElement{constructor(){super(...arguments);this._randomColor=(0,qe.sampleColor)();this._expanded=!1}handleClick(){let t=this.selected;if(t?this.gridContext?.selectComment(null):this.gridContext?.selectComment(this.id),this.emit("pop-click",{id:this.id,selected:!t}),!this._expanded&&this._text){let e=this._text.offsetHeight;this._expanded=!0,this.requestUpdate(),this.updateComplete.then(()=>{let r=this._text.scrollHeight;this._text.style.height=`${e}px`,this._text.style.overflow="hidden",this._text.offsetHeight,this._text.style.transition="height var(--duration-quick) var(--ease-quick)",this._text.style.height=`${r}px`,setTimeout(()=>{this._text.style.height="",this._text.style.overflow=""},300)})}}get comment(){return this.findCommentOrReply(this.gridContext?.comments??[],this.id)}get commentAvatarSize(){return this.gridContext?.grid?.layout==="sm"?"xs":"sm"}get selected(){return this.gridContext?.selectedCommentId===this.id}findCommentOrReply(t,e){let r=[...t];for(;r.length>0;){let s=r.pop();if(s){if(s.id===e)return s;s.replies&&s.replies.length>0&&r.push(...s.replies)}}return null}render(){return Me.html`
+      <button
+        class=${(0,pt.classMap)({comment:!0,[`comment--size-${this.gridContext?.grid?.layout??"sm"}`]:!0,"comment--is-selected":this.selected})}
+        part="base"
+        type="button"
+        @click=${this.handleClick}
+      >
+        <div class="comment__user">
+          <pop-comment-avatar
+            class="comment__avatar"
+            size=${this.commentAvatarSize}
+            style="--comment-avatar-border-size: 0;"
+          >
+            <img
+              src=${(0,Le.ifDefined)(this.comment?.account?.avatar?.url)}
+              alt="${this.comment?.account?.name}'s avatar"
+              style=${(0,Ve.styleMap)({backgroundColor:this._randomColor})}
+            />
+          </pop-comment-avatar>
+        </div>
+        <div class="comment__content">
+          <div class="comment__info">
+            <div class="comment__user">
+              <div class="comment__user-name">${this.comment?.account?.name}</div>
+              <div class="comment__timestamp">
+                ${this.comment?De(new Date(this.comment.createdAt??"")):""}
+              </div>
+            </div>
+          </div>
+          <div
+            class=${(0,pt.classMap)({comment__text:!0,expanded:this._expanded})}
+          >
+            ${this.comment?.content}
+          </div>
+        </div>
+      </button>
+    `}};x.styles=[l(x,x,"styles"),_e],i([(0,Ee.consume)({context:w,subscribe:!0})],x.prototype,"gridContext",2),i([(0,q.property)({type:String})],x.prototype,"id",2),i([(0,q.state)()],x.prototype,"_randomColor",2),i([(0,q.state)()],x.prototype,"_expanded",2),i([(0,q.query)(".comment__text")],x.prototype,"_text",2),x=i([(0,q.customElement)("pop-comment")],x);var He=x;var ct=require("@lit/context"),ze=require("@popgrids/ui"),R=require("lit"),G=require("lit/decorators.js"),Ie=require("lit/directives/class-map.js");var $e=require("lit"),Be=$e.css`
+  :host {
+    display: flex;
+  }
+
+  .feed {
+    align-items: flex-start;
+    background: var(--color-border-singular-border-island, #fff);
+    border-radius: var(--border-radius-2xl, 16px);
+    border: 1px solid var(--color-border-singular-border-island, #fff);
+    box-shadow: var(--shadow-3xl);
+    display: grid;
+    grid-template-rows: 1fr 50px;
+    max-height: 400px;
+    max-width: 400px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .feed__footer {
+    position: absolute;
+    bottom: 0;
+    min-height: 50px;
+    width: 100%;
+  }
+
+  .feed__comment-bar {
+  }
+
+  .feed__content {
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    gap: var(--spacing-md, 8px);
+    min-height: 80px;
+    max-height: 290px;
+    overflow: hidden auto;
+    padding: var(--spacing-md, 8px) 20px var(--spacing-xl, 16px) var(--spacing-md, 8px);
+  }
+
+  .feed__main {
+    align-items: stretch;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    gap: var(--spacing-xl, 16px);
+    min-height: 100%;
+  }
+
+  .feed--size-md .feed__main {
+    gap: var(--spacing-lg, 12px);
+  }
+`;var y=class extends ze.PopElement{constructor(){super(...arguments);this.open=!1;this.size="sm"}render(){return this.gridContext?this.gridContext.comments.length===0?R.html`<div class="feed__empty">No comments yet</div>`:R.html`
+      <div
+        class=${(0,Ie.classMap)({feed:!0,"feed--is-open":this.open,[`feed--size-${this.gridContext.grid?.layout??"sm"}`]:!0})}
+        part="base"
+      >
+        <div class="feed__content">
+          <div class="feed__main">
+            ${this.gridContext.comments.map(t=>R.html`<pop-comment-thread id=${t.id}></pop-comment-thread> `)}
+          </div>
+        </div>
+        <div class="feed__footer">
+          ${this.authContext?.isAuthenticated?R.html`<pop-comment-bar class="feed__comment-bar"></pop-comment-bar>`:R.html` <pop-auth-panel class="feed__auth-panel"></pop-auth-panel> `}
+        </div>
+      </div>
+    `:R.html``}};y.styles=[l(y,y,"styles"),Be],i([(0,ct.consume)({context:E,subscribe:!0})],y.prototype,"authContext",2),i([(0,ct.consume)({context:w,subscribe:!0})],y.prototype,"gridContext",2),i([(0,G.property)({type:Boolean,reflect:!0})],y.prototype,"open",2),i([(0,G.property)({type:String})],y.prototype,"size",2),y=i([(0,G.customElement)("pop-feed")],y);var Re=y;var rt=require("@lit/context"),Ue=require("@popgrids/ui"),Ke=require("lit"),L=require("lit/decorators.js");var b=class extends Ue.PopElement{constructor(){super(...arguments);this.grid=null;this.comments=[];this.loading=!1;this.contextData=this.initializeContextData()}initializeContextData(){return{grid:null,comments:[],loading:this.loading,fetchGrid:this.fetchGrid.bind(this),fetchReplies:this.fetchReplies.bind(this),selectedCommentId:null,selectComment:this.selectComment.bind(this)}}updateState(t){this.contextData={...this.contextData,...t},this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.id?this.fetchGrid(this.id):console.error("ID not provided.")}async fetchGrid(t){if(!this.apiState?.client){console.error("No API client provided.");return}this.updateState({loading:!0});let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{id}",{params:{path:{id:t}}});if(e){let s=e;this.grid=s.grid,this.updateState({grid:this.grid,loading:!1}),this.fetchComments(this.id)}if(r){console.error("Failed to fetch grid:",r),this.loading=!1,this.updateState({loading:this.loading});return}}async fetchComments(t){if(!this.apiState?.client)return;let{data:e,error:r}=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments",{params:{path:{grid_id:t}}});if(this.loading=!1,e){let s=e;this.comments=s.comments,this.updateState({comments:this.comments,loading:this.loading})}if(r){console.error("Failed to fetch comments:",r),this.updateState({loading:this.loading});return}}async fetchReplies(t){if(this.apiState?.client)try{let e=await this.apiState.client.GET("/api/v1/grids/{grid_id}/comments/{id}/replies",{params:{path:{grid_id:this.id,id:t}}});if(e.data){let s=e.data.replies||[];this.comments=this.comments.map(o=>o.id===t?{...o,replies:[...o.replies||[],...s]}:o),this.updateState({comments:this.comments})}}catch(e){console.error(`Failed to fetch replies for comment ${t}:`,e)}}selectComment(t){this.updateState({selectedCommentId:t})}render(){return Ke.html`<slot></slot>`}};b.styles=[],i([(0,rt.consume)({context:$})],b.prototype,"apiState",2),i([(0,L.property)({type:String})],b.prototype,"id",2),i([(0,L.state)()],b.prototype,"grid",2),i([(0,L.state)()],b.prototype,"comments",2),i([(0,L.state)()],b.prototype,"loading",2),i([(0,rt.provide)({context:w}),(0,L.property)({attribute:!1})],b.prototype,"contextData",2),b=i([(0,L.customElement)("pop-grid-provider")],b);var Ne=b;var Fe=require("@popgrids/ui"),Ze=require("lit"),P=require("lit/decorators.js");var Qe=require("lit"),Je=Qe.css`
+  :host {
+    display: flex;
+    align-items: center;
+  }
+`;var C=class extends Fe.PopElement{constructor(){super(...arguments);this.apiUrl="https://api.popgrids.com";this.gridId=""}render(){return Ze.html`
+      <pop-api-provider api-url=${this.apiUrl}>
+        <pop-grid-provider id=${this.gridId}>
+          <pop-auth-provider>
+            <pop-widget></pop-widget>
+          </pop-auth-provider>
+        </pop-grid-provider>
+      </pop-api-provider>
+    `}};C.styles=[l(C,C,"styles"),Je],i([(0,P.property)({type:String,attribute:"api-url",reflect:!0})],C.prototype,"apiUrl",2),i([(0,P.property)({type:String,attribute:"data-grid-id"})],C.prototype,"gridId",2),C=i([(0,P.customElement)("pop-grid")],C);var Ge=C;customElements.get("pop-grid")||customElements.define("pop-grid",C);function Ye(){let n=document.querySelectorAll("pop-grid[grid-id]:not([initialized])");for(let a of Array.from(n)){let t=a.getAttribute("grid-id");t&&(a.setAttribute("data-grid-id",t),a.setAttribute("initialized","true"))}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Ye):Ye();var D=require("@floating-ui/dom"),ei=require("@lit/context"),ii=require("@popgrids/ui");function bi(){return typeof window<"u"}function Pe(n){var a;return(n==null||(a=n.ownerDocument)==null?void 0:a.defaultView)||window}function Ci(n){return bi()?n instanceof Element||n instanceof Pe(n).Element:!1}function We(n){let a=wi(),t=Ci(n)?Si(n):n;return["transform","translate","scale","rotate","perspective"].some(e=>t[e]?t[e]!=="none":!1)||(t.containerType?t.containerType!=="normal":!1)||!a&&(t.backdropFilter?t.backdropFilter!=="none":!1)||!a&&(t.filter?t.filter!=="none":!1)||["transform","translate","scale","rotate","perspective","filter"].some(e=>(t.willChange||"").includes(e))||["paint","layout","strict","content"].some(e=>(t.contain||"").includes(e))}function wi(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function Si(n){return Pe(n).getComputedStyle(n)}function Xe(n){return ki(n)}function mt(n){return n.assignedSlot?n.assignedSlot:n.parentNode instanceof ShadowRoot?n.parentNode.host:n.parentNode}function ki(n){for(let a=n;a;a=mt(a))if(a instanceof Element&&getComputedStyle(a).display==="none")return null;for(let a=mt(n);a;a=mt(a)){if(!(a instanceof Element))continue;let t=getComputedStyle(a);if(t.display!=="contents"&&(t.position!=="static"||We(t)||a.tagName==="BODY"))return a}return null}var W=require("lit"),U=require("lit/decorators.js"),ut=require("lit/directives/class-map.js"),ri=require("lit/directives/if-defined.js");var Oe=require("lit"),ti=Oe.css`
+  :host {
+    display: block;
+  }
+
+  .grid-widget {
+    display: flex;
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .grid-widget--align-left {
+    justify-content: flex-start;
+  }
+
+  .grid-widget--align-center {
+    justify-content: center;
+  }
+
+  .grid-widget--align-right {
+    justify-content: flex-end;
+  }
+
+  .grid-widget__feed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2147483647;
+    display: none;
+    opacity: 0;
+    transform: scale(0.94);
+    transition:
+      opacity var(--duration-quick) var(--ease-quick),
+      transform var(--duration-quick) var(--ease-quick),
+      display var(--duration-quick) allow-discrete;
+  }
+
+  .grid-widget__feed[data-current-placement="top-start"] {
+    transform-origin: left bottom;
+  }
+
+  .grid-widget__feed[data-current-placement="bottom-start"] {
+    transform-origin: left top;
+  }
+
+  .grid-widget__feed[data-current-placement="top-end"] {
+    transform-origin: right bottom;
+  }
+
+  .grid-widget__feed[data-current-placement="bottom-end"] {
+    transform-origin: right top;
+  }
+
+  .grid-widget__feed[data-current-placement="top"] {
+    transform-origin: bottom;
+  }
+
+  .grid-widget__feed[data-current-placement="bottom"] {
+    transform-origin: top;
+  }
+
+  .grid-widget__feed--open {
+    display: flex;
+    opacity: 1;
+    transform: scale(1);
+
+    @starting-style {
+      display: flex;
+      opacity: 0;
+      transform: scale(0.94);
+    }
+  }
+
+  .grid-widget__loader {
+    align-items: center;
+    display: flex;
+    min-height: 30px;
+  }
+
+  .grid-widget__previews {
+    display: inline-flex;
+    align-items: flex-start;
+  }
+
+  .grid-widget__previews > :not([hidden]) ~ :not([hidden]) {
+    margin-left: -4px;
+  }
+
+  .grid-widget__preview-avatar,
+  .grid-widget__preview-sum {
+    transition: transform var(--ease-quick) 600ms;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .grid-widget__preview-avatar:hover,
+    .grid-widget__preview-sum:hover {
+      cursor: pointer;
+      transform: scale(1.1875);
+    }
+  }
+
+  .grid-widget__preview-avatar:active,
+  .grid-widget__preview-sum:active {
+    cursor: pointer;
+    transform: scale(0.875);
+  }
+`;var ji={default:1,md:3,lg:5},v=class extends ii.PopElement{constructor(){super(...arguments);this._open=!1;this.handleKeyDown=t=>{t.code==="Escape"&&(this._open=!1)};this.handleDocumentMouseDown=t=>{if(!this._open)return;let e=t.composedPath();this&&!e.includes(this._feed)&&(this._open=!1)};this.reposition=()=>{if(!this._open||!this._previews||!this._feed||!this.gridContext?.grid)return;let t=[];t=[(0,D.offset)({mainAxis:this.gridContext.grid.position==="down"?-16:-48,crossAxis:-13})],(!this.gridContext.grid.position||this.gridContext.grid.position==="smart")&&t.push((0,D.flip)({fallbackPlacements:["bottom-start","top-start"],fallbackStrategy:"bestFit",padding:16}));let e=r=>D.platform.getOffsetParent(r,Xe);(0,D.computePosition)(this._previews,this._feed,{placement:this.gridContext.grid.position==="down"?"bottom-start":"top-start",middleware:t,strategy:"fixed",platform:{...D.platform,getOffsetParent:e}}).then(({x:r,y:s,placement:o})=>{this._feed.setAttribute("data-current-placement",o),Object.assign(this._feed.style,{left:`${r}px`,top:`${s}px`})})}}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.start(),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback(),this.stop()}handlePopClick(){this._open||(this._open=!0)}start(){this._previews&&(this.cleanup=(0,D.autoUpdate)(this._previews,this._feed,()=>{this.reposition()}))}async stop(){return new Promise(t=>{this.cleanup?(this.cleanup(),this.cleanup=void 0,this.removeAttribute("data-current-placement"),this.style.removeProperty("--auto-size-available-width"),this.style.removeProperty("--auto-size-available-height"),requestAnimationFrame(()=>t())):t()})}async updated(t){super.updated(t),t.has("_open")&&(this._open?this.start():this.stop()),t.has("position")&&(this.gridContext?.grid?.position==="smart"&&this._open?this.start():this.stop()),this._open&&(await this.updateComplete,this.reposition())}get previewComments(){return this.gridContext?.comments.filter(t=>t.parentCommentId===null).sort((t,e)=>new Date(e.createdAt??"").getTime()-new Date(t.createdAt??"").getTime()).slice(0,ji[this.gridContext.grid?.preview??"default"])}render(){return this.gridContext?.loading?W.html`<div class="grid-widget">
+        <pop-loader class="grid-widget__loader" variant="spinner"></pop-loader>
+      </div>`:this.gridContext?.grid?W.html`
+      <div
+        class=${(0,ut.classMap)({"grid-widget":!0,[`grid-widget--align-${this.gridContext.grid.align}`]:!0,[`grid-widget--appearance-${this.gridContext.grid.appearance}`]:!0,[`grid-widget--icon-${this.gridContext.grid.icon}`]:!0,[`grid-widget--layout-${this.gridContext.grid.layout}`]:!0,[`grid-widget--position-${this.gridContext.grid.position}`]:!0,[`grid-widget--preview-${this.gridContext.grid.preview}`]:!0})}
+      >
+        <div class="grid-widget__previews">
+          ${(this.previewComments??[]).map(t=>W.html`
+              <pop-comment-avatar class="grid-widget__preview-avatar" size="xs" @click=${this.handlePopClick}>
+                <img src=${(0,ri.ifDefined)(t.account?.avatar?.url)} alt="${t.account?.name}’s avatar" />
+              </pop-comment-avatar>
+            `)}
+          <pop-sum class="grid-widget__preview-sum">${this.gridContext.grid.commentsCount}</pop-sum>
+          <pop-comment-icon
+            size="sm"
+            theme=${this.gridContext.grid?.customAddIcon?"brand":"neutral"}
+            variant="add"
+            .iconUrl=${this.gridContext.grid?.customAddIcon||void 0}
+          ></pop-comment-icon>
+        </div>
+        <div
+          class=${(0,ut.classMap)({"grid-widget__feed":!0,"grid-widget__feed--open":this._open})}
+          part="feed"
+        >
+          <pop-feed ?open=${this._open}></pop-feed>
+        </div>
+      </div>
+    `:W.html`<p>No grid found.</p>`}};v.styles=[l(v,v,"styles"),ti],i([(0,ei.consume)({context:w,subscribe:!0})],v.prototype,"gridContext",2),i([(0,U.state)()],v.prototype,"_open",2),i([(0,U.query)(".grid-widget__previews")],v.prototype,"_previews",2),i([(0,U.query)(".grid-widget__feed")],v.prototype,"_feed",2),v=i([(0,U.customElement)("pop-widget")],v);var ai=v;var oi=require("@lit/context"),at=require("lit"),F=require("lit/decorators.js");var ni=Q(require("openapi-fetch"),1),si=n=>(0,ni.default)({baseUrl:n});var z=class extends at.LitElement{constructor(){super(...arguments);this.apiState={baseUrl:"",client:null}}connectedCallback(){super.connectedCallback(),this.apiUrl?(this.apiState={...this.apiState,baseUrl:this.apiUrl,client:si(this.apiUrl)},this.requestUpdate()):console.error("API URL or ID not provided.")}render(){return at.html`<slot></slot>`}};i([(0,F.property)({type:String,attribute:"api-url"})],z.prototype,"apiUrl",2),i([(0,oi.provide)({context:$}),(0,F.state)()],z.prototype,"apiState",2),z=i([(0,F.customElement)("pop-api-provider")],z);var li=z;0&&(module.exports={PopApiProvider,PopAuthJoin,PopAuthPanel,PopAuthProvider,PopAuthSignIn,PopAuthVerifyCode,PopComment,PopCommentBar,PopCommentInput,PopCommentThread,PopFeed,PopGrid,PopGridProvider,PopWidget});
+//# sourceMappingURL=index.cjs.map