@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/presence/bundle.js

@@ -0,0 +1,555 @@
+import{css as t,html as e,nothing as i,LitElement as s}from"lit";import{property as n,customElement as r,state as o}from"lit/decorators.js";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const a=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},c=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!c())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},d=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},l=new Set,p=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const u=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=f(i);t&&function(t,e,i){var s;if(!p.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),p.set(t,i)}const n=p.get(t),r=`doc:${t}`;if(l.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],l.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;l.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,n],l.add(r)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e},v=t=>h(a(d(u(t))));function f(t){return Array.isArray(t)?t.map(t=>f(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const m=t`
+  :host {
+    display: contents;
+  }
+`
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,g=t`
+  :host { display: flex; align-items: center; }
+
+  .presence {
+    display: flex;
+    align-items: center;
+    padding: 0 2px;
+  }
+
+  .pa {
+    position: relative;
+    margin-left: -7px;
+  }
+
+  .pa:first-child {
+    margin-left: 0;
+  }
+
+  .pa-avatar {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: 700;
+    color: #fff;
+    border: 2px solid var(--nr-presence-bg, #fff);
+    cursor: pointer;
+    overflow: hidden;
+    flex-shrink: 0;
+    transition: transform 120ms;
+  }
+
+  .pa-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .pa:hover .pa-avatar {
+    transform: scale(1.12);
+    z-index: 2;
+  }
+
+  .pa-dot {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #22c55e;
+    border: 2px solid var(--nr-presence-bg, #fff);
+  }
+
+  .pa-tip {
+    position: absolute;
+    top: calc(100% + 7px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1a1a2e;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 3px 8px;
+    border-radius: 6px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 120ms;
+    z-index: 100;
+  }
+
+  .pa-tip::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-bottom-color: #1a1a2e;
+  }
+
+  .pa:hover .pa-tip {
+    opacity: 1;
+  }
+
+  .pa-extra .pa-avatar {
+    background: var(--nr-presence-extra-bg, #e0e0e8);
+    color: var(--nr-presence-extra-color, #5c5c7c);
+    font-size: 9px;
+    font-weight: 700;
+    cursor: default;
+  }
+`
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;var b=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};let x=class extends(v(s)){constructor(){super(...arguments),this.users=[],this.max=5}_handleClick(t){this.dispatchEvent(new CustomEvent("user-click",{detail:{user:t},bubbles:!0,composed:!0}))}render(){const t=this.users.slice(0,this.max),s=Math.max(0,this.users.length-this.max);return e`
+      <div class="presence">
+        ${t.map(t=>e`
+          <div class="pa" @click=${()=>this._handleClick(t)}>
+            <div class="pa-avatar" style="background:${t.color}">
+              ${t.avatarUrl?e`<img src="${t.avatarUrl}" alt="${t.displayName}">`:t.initials||(t.displayName||"?")[0].toUpperCase()}
+            </div>
+            <span class="pa-dot"></span>
+            <span class="pa-tip">${t.displayName}</span>
+          </div>
+        `)}
+        ${s>0?e`
+          <div class="pa pa-extra">
+            <div class="pa-avatar" title="${s} more">+${s}</div>
+          </div>
+        `:i}
+      </div>
+    `}};x.styles=g,x.useShadowDom=!0,b([n({type:Array})],x.prototype,"users",void 0),b([n({type:Number})],x.prototype,"max",void 0),x=b([r("nr-presence-avatars")],x);
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const y=t`
+  :host {
+    position: fixed;
+    display: block;
+    width: 300px;
+  }
+
+  .chat-panel {
+    width: 300px;
+    height: 420px;
+    background: #fff;
+    border: 1px solid var(--nr-presence-border, #e0e0e8);
+    border-radius: 14px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: chatIn 0.18s ease;
+  }
+
+  @keyframes chatIn {
+    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
+    to   { opacity: 1; transform: none; }
+  }
+
+  .chat-panel.minimized {
+    height: auto;
+    width: 200px;
+  }
+
+  .chat-panel.minimized .chat-messages,
+  .chat-panel.minimized .chat-input-row {
+    display: none;
+  }
+
+  .chat-panel.minimized .chat-header {
+    border-bottom: none;
+    border-radius: 14px;
+    cursor: pointer;
+  }
+
+  .chat-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--nr-presence-border, #e0e0e8);
+    flex-shrink: 0;
+    cursor: grab;
+    user-select: none;
+  }
+
+  .chat-header:active {
+    cursor: grabbing;
+  }
+
+  .chat-header-avatar {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 700;
+    color: #fff;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .chat-header-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .chat-header-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .chat-header-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--nr-presence-text, #0f0f3c);
+  }
+
+  .chat-header-status {
+    font-size: 11px;
+    color: #22c55e;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .chat-header-status::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #22c55e;
+    display: inline-block;
+  }
+
+  .chat-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: none;
+    background: var(--nr-presence-input-bg, #f5f5f8);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #8c8ca8;
+    transition: background 150ms;
+    flex-shrink: 0;
+  }
+
+  .chat-btn:hover {
+    background: var(--nr-presence-border, #e0e0e8);
+    color: var(--nr-presence-text, #0f0f3c);
+  }
+
+  .chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .chat-msg {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-width: 80%;
+  }
+
+  .chat-msg.me {
+    align-self: flex-end;
+    align-items: flex-end;
+  }
+
+  .chat-msg.other {
+    align-self: flex-start;
+    align-items: flex-start;
+  }
+
+  .chat-bubble {
+    padding: 7px 11px;
+    border-radius: 12px;
+    font-size: 12px;
+    line-height: 1.4;
+    word-break: break-word;
+  }
+
+  .chat-msg.me .chat-bubble {
+    background: var(--nr-presence-accent, #7c3aed);
+    color: #fff;
+    border-bottom-right-radius: 3px;
+  }
+
+  .chat-msg.other .chat-bubble {
+    background: var(--nr-presence-input-bg, #f5f5f8);
+    color: var(--nr-presence-text, #0f0f3c);
+    border-bottom-left-radius: 3px;
+  }
+
+  .chat-time {
+    font-size: 10px;
+    color: var(--nr-presence-text-secondary, #8c8ca8);
+    padding: 0 2px;
+  }
+
+  .chat-empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 6px;
+    color: var(--nr-presence-text-secondary, #8c8ca8);
+    font-size: 12px;
+  }
+
+  .chat-empty svg {
+    opacity: 0.35;
+  }
+
+  .chat-input-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 10px;
+    border-top: 1px solid var(--nr-presence-border, #e0e0e8);
+    flex-shrink: 0;
+  }
+
+  .chat-input {
+    flex: 1;
+    border: 1px solid var(--nr-presence-border, #e0e0e8);
+    border-radius: 20px;
+    padding: 6px 12px;
+    font-size: 12px;
+    outline: none;
+    background: var(--nr-presence-input-bg, #f5f5f8);
+    color: var(--nr-presence-text, #0f0f3c);
+    transition: border-color 150ms;
+  }
+
+  .chat-input:focus {
+    border-color: var(--nr-presence-accent, #7c3aed);
+  }
+
+  .chat-send {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: none;
+    background: var(--nr-presence-accent, #7c3aed);
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: background 150ms;
+  }
+
+  .chat-send:hover {
+    background: #6d28d9;
+  }
+
+  .chat-send:disabled {
+    background: var(--nr-presence-border, #e0e0e8);
+    cursor: default;
+  }
+`
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;var w=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};let k=class extends(v(s)){constructor(){super(...arguments),this.user={displayName:"",color:"#7c3aed"},this.x=300,this.y=200,this.z=100,this.minimized=!1,this.minimizedIndex=0,this.messages=[],this.loading=!1,this._draft=""}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}_onHeaderMousedown(t){if(this.minimized)return;const e=this.getBoundingClientRect();this._emit("drag-start",{offsetX:t.clientX-e.left,offsetY:t.clientY-e.top}),t.preventDefault()}_onHeaderClick(){this.minimized&&this._emit("restore")}_onSend(){const t=this._draft.trim();t&&(this._emit("send",{text:t}),this._draft="")}_onInputKeydown(t){"Enter"===t.key&&this._onSend(),"Escape"===t.key&&this._emit("close")}updated(){this.style.position="fixed",this.style.display="block",this.style.width="300px",this.minimized?(this.style.right=12+212*this.minimizedIndex+"px",this.style.bottom="0",this.style.top="auto",this.style.left="auto"):(this.style.left=`${this.x}px`,this.style.top=`${this.y}px`,this.style.right="auto",this.style.bottom="auto"),this.style.zIndex=String(this.z)}render(){return e`
+      <div
+        class="chat-panel${this.minimized?" minimized":""}"
+        @mousedown=${()=>this._emit("focus")}
+      >
+        <div
+          class="chat-header"
+          @mousedown=${this._onHeaderMousedown}
+          @click=${this._onHeaderClick}
+        >
+          <div class="chat-header-avatar" style="background:${this.user.color}">
+            ${this.user.avatarUrl?e`<img src="${this.user.avatarUrl}" alt="${this.user.displayName}">`:this.user.initials||(this.user.displayName||"?")[0].toUpperCase()}
+          </div>
+          <div class="chat-header-info">
+            <div class="chat-header-name">${this.user.displayName}</div>
+            ${this.minimized?i:e`<div class="chat-header-status">Online</div>`}
+          </div>
+
+          ${this.minimized?e`
+            <button
+              class="chat-btn"
+              title="Float"
+              @mousedown=${t=>t.stopPropagation()}
+              @click=${t=>{t.stopPropagation(),this._emit("float")}}
+            >
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <polyline points="15 3 21 3 21 9"/>
+                <polyline points="9 21 3 21 3 15"/>
+                <line x1="21" y1="3" x2="14" y2="10"/>
+                <line x1="3" y1="21" x2="10" y2="14"/>
+              </svg>
+            </button>
+          `:e`
+            <button
+              class="chat-btn"
+              title="Minimize"
+              @mousedown=${t=>t.stopPropagation()}
+              @click=${t=>{t.stopPropagation(),this._emit("minimize")}}
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <line x1="5" y1="12" x2="19" y2="12"/>
+              </svg>
+            </button>
+          `}
+
+          <button
+            class="chat-btn"
+            title="Close"
+            @mousedown=${t=>t.stopPropagation()}
+            @click=${t=>{t.stopPropagation(),this._emit("close")}}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <path d="M18 6 6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="chat-messages">
+          ${this.loading?e`
+            <div class="chat-empty">
+              <span>Loading...</span>
+            </div>
+          `:0===this.messages.length?e`
+            <div class="chat-empty">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              </svg>
+              <span>No messages yet</span>
+              <span style="font-size:11px">Say hi to ${this.user.displayName}!</span>
+            </div>
+          `:this.messages.map(t=>e`
+            <div class="chat-msg ${t.me?"me":"other"}">
+              <div class="chat-bubble">${t.text}</div>
+              <span class="chat-time">${new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}</span>
+            </div>
+          `)}
+        </div>
+
+        <div class="chat-input-row">
+          <input
+            part="input-container"
+            class="chat-input"
+            placeholder="Type a message..."
+            .value=${this._draft}
+            ?disabled=${this.loading}
+            @input=${t=>{this._draft=t.target.value}}
+            @keydown=${this._onInputKeydown}
+          >
+          <button
+            class="chat-send"
+            ?disabled=${!this._draft.trim()||this.loading}
+            @click=${this._onSend}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <path d="m22 2-7 20-4-9-9-4Z"/>
+              <path d="M22 2 11 13"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    `}};k.styles=y,k.useShadowDom=!0,w([n({type:Object})],k.prototype,"user",void 0),w([n({type:Number})],k.prototype,"x",void 0),w([n({type:Number})],k.prototype,"y",void 0),w([n({type:Number})],k.prototype,"z",void 0),w([n({type:Boolean})],k.prototype,"minimized",void 0),w([n({type:Number})],k.prototype,"minimizedIndex",void 0),w([n({type:Array})],k.prototype,"messages",void 0),w([n({type:Boolean})],k.prototype,"loading",void 0),w([o()],k.prototype,"_draft",void 0),k=w([r("nr-presence-chat")],k);
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var $=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o},z=function(t,e,i,s){return new(i||(i=Promise))(function(n,r){function o(t){try{c(s.next(t))}catch(t){r(t)}}function a(t){try{c(s.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i(function(t){t(e)})).then(o,a)}c((s=s.apply(t,e||[])).next())})};const S="__group__";let C=class extends(v(s)){constructor(){super(...arguments),this.namespace="",this.socketPath="/__nk_socketio/",this.resourceId="",this.resourceType="",this.resourceName="",this.userId="",this.currentUser=null,this.extraUsers=[],this.globalSocket=null,this._viewers=[],this._hasUnreadGroup=!1,this._socket=null,this._connecting=!1,this._chats=new Map,this._chatZ=100,this._drag=null,this._boundDragMove=t=>this._onDragMove(t),this._boundDragEnd=()=>this._onDragEnd(),this._boundEscape=t=>this._onEscape(t),this._boundOnMessage=t=>this._onSocketMessage(t),this._groupConversationId=null}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._boundEscape),this._connect(),this._attachGlobalSocket()}disconnectedCallback(){var t;super.disconnectedCallback(),document.removeEventListener("keydown",this._boundEscape),document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd),null===(t=this._socket)||void 0===t||t.disconnect(),this._socket=null,this._detachGlobalSocket()}updated(t){t.has("globalSocket")&&(this._detachGlobalSocket(t.get("globalSocket")),this._attachGlobalSocket()),!this._socket&&(t.has("userId")||t.has("resourceId")||t.has("namespace"))&&this.userId&&this.resourceId&&this.namespace&&this._connect()}_attachGlobalSocket(){this.globalSocket&&this.globalSocket.on("nk:data",this._boundOnMessage)}_detachGlobalSocket(t){const e=t||this.globalSocket;e&&e.off("nk:data",this._boundOnMessage)}_onSocketMessage(t){if("message:new"!==t.event)return;const e=t.data;if((null==e?void 0:e.conversationId)&&e.senderId!==this.userId){for(const[,t]of this._chats)if(t.conversationId===e.conversationId)return t.messages=[...t.messages,{id:String(e.id),senderId:e.senderId,text:e.content,timestamp:new Date(e.createdAt).getTime(),me:!1}],void this.requestUpdate();this._groupConversationId&&e.conversationId===this._groupConversationId&&(this._hasUnreadGroup=!0)}}_connect(){return z(this,void 0,void 0,function*(){if(!this._socket&&!this._connecting&&this.userId&&this.resourceId&&this.namespace){this._connecting=!0;try{const{io:t}=yield import("socket.io-client");this._socket=t(this.namespace,{path:this.socketPath,query:{i:JSON.stringify({userId:this.userId,resourceId:this.resourceId})}}),this._socket.on("nk:data",t=>{var e;const i=t.event;"presence:viewers"!==i&&"presence:joined"!==i&&"presence:left"!==i||(this._viewers=(null===(e=t.data)||void 0===e?void 0:e.viewers)||[],this.dispatchEvent(new CustomEvent("presence-changed",{detail:{viewers:this._viewers},bubbles:!0,composed:!0})))})}catch(t){console.error("[nr-presence] Connection failed:",t)}finally{this._connecting=!1}}})}_openGroupChat(){return z(this,void 0,void 0,function*(){var t;if(this._chats.has(S)){const t=this._chats.get(S);return t.minimized=!1,t.z=++this._chatZ,this._hasUnreadGroup=!1,void this.requestUpdate()}const e=window.innerWidth-324;this._chats.set(S,{user:{displayName:this.resourceName||`${this.resourceType} chat`,color:"#7c3aed",initials:"#"},conversationId:null,loading:!0,x:e,y:56,savedX:e,savedY:56,z:++this._chatZ,minimized:!1,messages:[],draftText:""}),this._hasUnreadGroup=!1,this.requestUpdate();try{const e=yield fetch("/api/conversations/resource",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({resourceType:this.resourceType,resourceId:this.resourceId,resourceName:this.resourceName})}),i=yield e.json(),s=this._chats.get(S);if(!s||!i.conversationId)return s&&(s.loading=!1),void this.requestUpdate();s.conversationId=i.conversationId,this._groupConversationId=i.conversationId,(null===(t=this.globalSocket)||void 0===t?void 0:t.connected)&&this.globalSocket.emit("nk:conversation:join",{conversationId:i.conversationId}),yield this._loadMessages(s)}catch(t){console.error("[nr-presence] Failed to open group chat:",t);const e=this._chats.get(S);e&&(e.loading=!1)}this.requestUpdate()})}_openDm(t){return z(this,void 0,void 0,function*(){var e;const i=t.userId||t.displayName;if(i===this.userId)return void this._openGroupChat();if(this._chats.has(i))return this._chats.get(i).z=++this._chatZ,void this.requestUpdate();const s=[...this._chats.keys()].filter(t=>t!==S).length,n=window.innerWidth-324-24*(s+1),r=56+24*(s+1);if(this._chats.set(i,{user:t,conversationId:null,loading:!0,x:n,y:r,savedX:n,savedY:r,z:++this._chatZ,minimized:!1,messages:[],draftText:""}),this.requestUpdate(),t.userId){try{const s=yield fetch("/api/conversations/dm",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({targetUserId:t.userId})}),n=yield s.json(),r=this._chats.get(i);if(!r||!n.conversationId)return r&&(r.loading=!1),void this.requestUpdate();r.conversationId=n.conversationId,(null===(e=this.globalSocket)||void 0===e?void 0:e.connected)&&this.globalSocket.emit("nk:conversation:join",{conversationId:n.conversationId}),yield this._loadMessages(r)}catch(t){console.error("[nr-presence] Failed to open DM:",t);const e=this._chats.get(i);e&&(e.loading=!1)}this.requestUpdate()}})}_loadMessages(t){return z(this,void 0,void 0,function*(){var e;if(t.conversationId){try{const i=yield fetch(`/api/conversations/${t.conversationId}/messages`),s=yield i.json();(null===(e=s.messages)||void 0===e?void 0:e.length)&&(t.messages=s.messages.map(t=>({id:String(t.id),senderId:t.sender_id,text:t.content,timestamp:new Date(t.created_at).getTime(),me:t.sender_id===this.userId})))}catch(t){console.error("[nr-presence] Failed to load messages:",t)}t.loading=!1}})}_sendMessage(t,e){var i;const s=this._chats.get(t);(null==s?void 0:s.conversationId)&&(s.messages=[...s.messages,{id:crypto.randomUUID(),senderId:this.userId,text:e,timestamp:Date.now(),me:!0}],this.requestUpdate(),(null===(i=this.globalSocket)||void 0===i?void 0:i.connected)&&this.globalSocket.emit("nk:message:send",{conversationId:s.conversationId,content:e,type:"text"}))}_closeChat(t){this._chats.delete(t),this.requestUpdate()}_onEscape(t){if("Escape"!==t.key||0===this._chats.size)return;let e="",i=-1;for(const[t,s]of this._chats)s.z>i&&(i=s.z,e=t);if(!e)return;const s=this._chats.get(e);s.minimized?this._closeChat(e):(s.savedX=s.x,s.savedY=s.y,s.minimized=!0,this.requestUpdate())}_onDragStart(t,e,i){const s=this._chats.get(t);s&&(s.z=++this._chatZ,this._drag={userId:t,ox:e,oy:i},document.addEventListener("mousemove",this._boundDragMove),document.addEventListener("mouseup",this._boundDragEnd))}_onDragMove(t){if(!this._drag)return;const e=this._chats.get(this._drag.userId);e&&(e.x=Math.max(0,Math.min(window.innerWidth-300,t.clientX-this._drag.ox)),e.y=Math.max(0,Math.min(window.innerHeight-60,t.clientY-this._drag.oy)),this.requestUpdate())}_onDragEnd(){this._drag=null,document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd)}render(){const t=this.currentUser,s=[...t?[t]:[],...this._viewers.filter(e=>!t||e.userId!==t.userId),...this.extraUsers],n=[...this._chats.entries()].filter(([,t])=>t.minimized);return e`
+      <nr-presence-avatars
+        .users=${s}
+        @user-click=${t=>this._openDm(t.detail.user)}
+      ></nr-presence-avatars>
+
+      ${this.resourceType?e`
+        <button class="group-chat-btn" title="Team chat" @click=${()=>this._openGroupChat()}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+          </svg>
+          ${this._hasUnreadGroup?e`<span class="unread-dot"></span>`:i}
+        </button>
+      `:i}
+
+      ${[...this._chats.entries()].map(([t,i])=>{const s=n.findIndex(([e])=>e===t);return e`
+          <nr-presence-chat
+            .user=${i.user}
+            .x=${i.x}
+            .y=${i.y}
+            .z=${i.z}
+            .minimized=${i.minimized}
+            .minimizedIndex=${s>=0?s:0}
+            .messages=${i.messages}
+            .loading=${i.loading}
+            @focus=${()=>{i.z=++this._chatZ,this.requestUpdate()}}
+            @drag-start=${e=>this._onDragStart(t,e.detail.offsetX,e.detail.offsetY)}
+            @minimize=${()=>{i.savedX=i.x,i.savedY=i.y,i.minimized=!0,this.requestUpdate()}}
+            @restore=${()=>{i.x=Math.max(0,window.innerWidth-(12+212*s)-300),i.y=Math.max(0,window.innerHeight-420-56),i.minimized=!1,i.z=++this._chatZ,this.requestUpdate()}}
+            @float=${()=>{i.minimized=!1,i.x=i.savedX,i.y=i.savedY,i.z=++this._chatZ,this.requestUpdate()}}
+            @close=${()=>this._closeChat(t)}
+            @send=${e=>this._sendMessage(t,e.detail.text)}
+          ></nr-presence-chat>
+        `})}
+    `}};C.styles=[m,t`
+    .group-chat-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg, #fff);
+      background: var(--accent, #7c3aed); color: #fff; cursor: pointer;
+      margin-left: 4px; transition: transform 120ms, background 120ms;
+      position: relative;
+    }
+    .group-chat-btn:hover { transform: scale(1.1); background: var(--accent-hover, #6d28d9); }
+    .group-chat-btn svg { width: 14px; height: 14px; }
+    .unread-dot {
+      position: absolute; top: -2px; right: -2px; width: 8px; height: 8px;
+      border-radius: 50%; background: #ef4444; border: 2px solid var(--bg, #fff);
+    }
+  `],C.useShadowDom=!0,$([n({type:String})],C.prototype,"namespace",void 0),$([n({type:String,attribute:"socket-path"})],C.prototype,"socketPath",void 0),$([n({type:String,attribute:"resource-id"})],C.prototype,"resourceId",void 0),$([n({type:String,attribute:"resource-type"})],C.prototype,"resourceType",void 0),$([n({type:String,attribute:"resource-name"})],C.prototype,"resourceName",void 0),$([n({type:String,attribute:"user-id"})],C.prototype,"userId",void 0),$([n({type:Object})],C.prototype,"currentUser",void 0),$([n({type:Array})],C.prototype,"extraUsers",void 0),$([n({type:Object})],C.prototype,"globalSocket",void 0),$([o()],C.prototype,"_viewers",void 0),$([o()],C.prototype,"_hasUnreadGroup",void 0),C=$([r("nr-presence")],C);export{x as NrPresenceAvatarsElement,k as NrPresenceChatElement,C as NrPresenceElement};

package/dist/src/components/presence/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './presence.component.js';
+export * from './presence-avatars.component.js';
+export * from './presence-chat.component.js';
+export * from './presence.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/presence/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './presence.component.js';
+export * from './presence-avatars.component.js';
+export * from './presence-chat.component.js';
+export * from './presence.types.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/presence/presence-avatars.component.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import type { PresenceUser } from './presence.types.js';
+declare const NrPresenceAvatarsElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Renders an overlapping avatar bubble strip for presence indicators.
+ * Pure UI — no socket, no state.
+ *
+ * @example
+ * ```html
+ * <nr-presence-avatars
+ *   .users=${viewers}
+ *   max="5"
+ *   @user-click=${e => this._openChat(e.detail.user)}
+ * ></nr-presence-avatars>
+ * ```
+ *
+ * @fires user-click - Fired when an avatar is clicked. Detail: `{ user: PresenceUser }`
+ */
+export declare class NrPresenceAvatarsElement extends NrPresenceAvatarsElement_base {
+    static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
+    /** List of users to display */
+    users: PresenceUser[];
+    /** Max visible avatars before +N overflow badge */
+    max: number;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-presence-avatars': NrPresenceAvatarsElement;
+    }
+}
+export {};
+//# sourceMappingURL=presence-avatars.component.d.ts.map