@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -0,0 +1,528 @@
+import{css as e,html as t,nothing as i,LitElement as s}from"lit";import{property as r,customElement as n,state as o}from"lit/decorators.js";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const a=e=>class extends e{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 e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"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 e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!c())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,s):console.error(s.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},d=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const s=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,s)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const s=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,s)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.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=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=m(i);e&&function(e,t,i){var s;if(!p.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),p.set(e,i)}const r=p.get(e),n=`doc:${e}`;if(l.has(n)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,r],l.add(n)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const n=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${e}`;l.has(n)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,r],l.add(n)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t},f=e=>h(a(d(u(e))));function m(e){return Array.isArray(e)?e.map(e=>m(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const v=e`
+  :host {
+    display: contents;
+  }
+`
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,b=e`
+  :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 g=function(e,t,i,s){for(var r,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o};let x=class extends(f(s)){constructor(){super(...arguments),this.users=[],this.max=5}_handleClick(e){this.dispatchEvent(new CustomEvent("user-click",{detail:{user:e},bubbles:!0,composed:!0}))}render(){const e=this.users.slice(0,this.max),s=Math.max(0,this.users.length-this.max);return t`
+      <div class="presence">
+        ${e.map(e=>t`
+          <div class="pa" @click=${()=>this._handleClick(e)}>
+            <div class="pa-avatar" style="background:${e.color}">
+              ${e.avatarUrl?t`<img src="${e.avatarUrl}" alt="${e.displayName}">`:e.initials||(e.displayName||"?")[0].toUpperCase()}
+            </div>
+            <span class="pa-dot"></span>
+            <span class="pa-tip">${e.displayName}</span>
+          </div>
+        `)}
+        ${s>0?t`
+          <div class="pa pa-extra">
+            <div class="pa-avatar" title="${s} more">+${s}</div>
+          </div>
+        `:i}
+      </div>
+    `}};x.styles=b,x.useShadowDom=!0,g([r({type:Array})],x.prototype,"users",void 0),g([r({type:Number})],x.prototype,"max",void 0),x=g([n("nr-presence-avatars")],x);
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const w=e`
+  :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 y=function(e,t,i,s){for(var r,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o};let k=class extends(f(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._draft=""}_emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}_onHeaderMousedown(e){if(this.minimized)return;const t=this.getBoundingClientRect();this._emit("drag-start",{offsetX:e.clientX-t.left,offsetY:e.clientY-t.top}),e.preventDefault()}_onHeaderClick(){this.minimized&&this._emit("restore")}_onSend(){const e=this._draft.trim();e&&(this._emit("send",{text:e}),this._draft="")}_onInputKeydown(e){"Enter"===e.key&&this._onSend(),"Escape"===e.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 t`
+      <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?t`<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:t`<div class="chat-header-status">Online</div>`}
+          </div>
+
+          ${this.minimized?t`
+            <button
+              class="chat-btn"
+              title="Float"
+              @mousedown=${e=>e.stopPropagation()}
+              @click=${e=>{e.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>
+          `:t`
+            <button
+              class="chat-btn"
+              title="Minimize"
+              @mousedown=${e=>e.stopPropagation()}
+              @click=${e=>{e.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=${e=>e.stopPropagation()}
+            @click=${e=>{e.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">
+          ${0===this.messages.length?t`
+            <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(e=>t`
+            <div class="chat-msg ${e.me?"me":"other"}">
+              <div class="chat-bubble">${e.text}</div>
+              <span class="chat-time">${new Date(e.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}
+            @input=${e=>{this._draft=e.target.value}}
+            @keydown=${this._onInputKeydown}
+          >
+          <button
+            class="chat-send"
+            ?disabled=${!this._draft.trim()}
+            @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=w,k.useShadowDom=!0,y([r({type:Object})],k.prototype,"user",void 0),y([r({type:Number})],k.prototype,"x",void 0),y([r({type:Number})],k.prototype,"y",void 0),y([r({type:Number})],k.prototype,"z",void 0),y([r({type:Boolean})],k.prototype,"minimized",void 0),y([r({type:Number})],k.prototype,"minimizedIndex",void 0),y([r({type:Array})],k.prototype,"messages",void 0),y([o()],k.prototype,"_draft",void 0),k=y([n("nr-presence-chat")],k);
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var $=function(e,t,i,s){for(var r,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o},z=function(e,t,i,s){return new(i||(i=Promise))(function(r,n){function o(e){try{c(s.next(e))}catch(e){n(e)}}function a(e){try{c(s.throw(e))}catch(e){n(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(o,a)}c((s=s.apply(e,t||[])).next())})};let C=class extends(f(s)){constructor(){super(...arguments),this.namespace="",this.socketPath="/__nk_socketio/",this.resourceId="",this.userId="",this.currentUser=null,this.extraUsers=[],this._viewers=[],this._socket=null,this._chats=new Map,this._chatZ=100,this._drag=null,this._boundDragMove=e=>this._onDragMove(e),this._boundDragEnd=()=>this._onDragEnd(),this._boundEscape=e=>this._onEscape(e)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._boundEscape),this._connect()}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this._boundEscape),document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd),null===(e=this._socket)||void 0===e||e.disconnect(),this._socket=null}_connect(){return z(this,void 0,void 0,function*(){if(this.userId&&this.resourceId&&this.namespace)try{const{io:e}=yield import("socket.io-client");this._socket=e(this.namespace,{path:this.socketPath,query:{i:JSON.stringify({userId:this.userId,resourceId:this.resourceId})}}),this._socket.on("nk:data",e=>{var t;const i=e.event;"presence:viewers"!==i&&"presence:joined"!==i&&"presence:left"!==i||(this._viewers=(null===(t=e.data)||void 0===t?void 0:t.viewers)||[],this.dispatchEvent(new CustomEvent("presence-changed",{detail:{viewers:this._viewers},bubbles:!0,composed:!0})))})}catch(e){console.error("[nr-presence] Connection failed:",e)}})}_openChat(e){const t=e.userId||e.displayName;if(this._chats.has(t))this._chats.get(t).z=++this._chatZ;else{const i=24*this._chats.size,s=window.innerWidth-324-i,r=56+i;this._chats.set(t,{user:e,x:s,y:r,savedX:s,savedY:r,z:++this._chatZ,minimized:!1,messages:[],draftText:""})}this.requestUpdate()}_closeChat(e){this._chats.delete(e),this.requestUpdate()}_onEscape(e){if("Escape"!==e.key||0===this._chats.size)return;let t="",i=-1;for(const[e,s]of this._chats)s.z>i&&(i=s.z,t=e);if(!t)return;const s=this._chats.get(t);s.minimized?this._closeChat(t):(s.savedX=s.x,s.savedY=s.y,s.minimized=!0,this.requestUpdate())}_onDragStart(e,t,i){const s=this._chats.get(e);s&&(s.z=++this._chatZ,this._drag={userId:e,ox:t,oy:i},document.addEventListener("mousemove",this._boundDragMove),document.addEventListener("mouseup",this._boundDragEnd))}_onDragMove(e){if(!this._drag)return;const t=this._chats.get(this._drag.userId);t&&(t.x=Math.max(0,Math.min(window.innerWidth-300,e.clientX-this._drag.ox)),t.y=Math.max(0,Math.min(window.innerHeight-60,e.clientY-this._drag.oy)),this.requestUpdate())}_onDragEnd(){this._drag=null,document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd)}render(){const e=this.currentUser,s=[...e?[e]:[],...this._viewers.filter(t=>!e||t.userId!==e.userId),...this.extraUsers],r=[...this._chats.entries()].filter(([,e])=>e.minimized);return t`
+      <nr-presence-avatars
+        .users=${s}
+        @user-click=${e=>this._openChat(e.detail.user)}
+      ></nr-presence-avatars>
+
+      ${[...this._chats.entries()].map(([e,i])=>{const s=r.findIndex(([t])=>t===e);return t`
+          <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}
+            @focus=${()=>{i.z=++this._chatZ,this.requestUpdate()}}
+            @drag-start=${t=>this._onDragStart(e,t.detail.offsetX,t.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(e)}
+            @send=${e=>{i.messages=[...i.messages,{id:crypto.randomUUID(),senderId:this.userId,text:e.detail.text,timestamp:Date.now(),me:!0}],this.requestUpdate()}}
+          ></nr-presence-chat>
+        `})}
+
+      ${this._chats.size,i}
+    `}};C.styles=v,C.useShadowDom=!0,$([r({type:String})],C.prototype,"namespace",void 0),$([r({type:String,attribute:"socket-path"})],C.prototype,"socketPath",void 0),$([r({type:String,attribute:"resource-id"})],C.prototype,"resourceId",void 0),$([r({type:String,attribute:"user-id"})],C.prototype,"userId",void 0),$([r({type:Object})],C.prototype,"currentUser",void 0),$([r({type:Array})],C.prototype,"extraUsers",void 0),$([o()],C.prototype,"_viewers",void 0),C=$([n("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

package/dist/src/components/presence/presence-avatars.component.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { styles } from './presence-avatars.style.js';
+/**
+ * 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 }`
+ */
+let NrPresenceAvatarsElement = class NrPresenceAvatarsElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** List of users to display */
+        this.users = [];
+        /** Max visible avatars before +N overflow badge */
+        this.max = 5;
+    }
+    _handleClick(user) {
+        this.dispatchEvent(new CustomEvent('user-click', {
+            detail: { user },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const visible = this.users.slice(0, this.max);
+        const extra = Math.max(0, this.users.length - this.max);
+        return html `
+      <div class="presence">
+        ${visible.map(u => html `
+          <div class="pa" @click=${() => this._handleClick(u)}>
+            <div class="pa-avatar" style="background:${u.color}">
+              ${u.avatarUrl
+            ? html `<img src="${u.avatarUrl}" alt="${u.displayName}">`
+            : (u.initials || (u.displayName || '?')[0].toUpperCase())}
+            </div>
+            <span class="pa-dot"></span>
+            <span class="pa-tip">${u.displayName}</span>
+          </div>
+        `)}
+        ${extra > 0 ? html `
+          <div class="pa pa-extra">
+            <div class="pa-avatar" title="${extra} more">+${extra}</div>
+          </div>
+        ` : nothing}
+      </div>
+    `;
+    }
+};
+NrPresenceAvatarsElement.styles = styles;
+NrPresenceAvatarsElement.useShadowDom = true;
+__decorate([
+    property({ type: Array })
+], NrPresenceAvatarsElement.prototype, "users", void 0);
+__decorate([
+    property({ type: Number })
+], NrPresenceAvatarsElement.prototype, "max", void 0);
+NrPresenceAvatarsElement = __decorate([
+    customElement('nr-presence-avatars')
+], NrPresenceAvatarsElement);
+export { NrPresenceAvatarsElement };
+//# sourceMappingURL=presence-avatars.component.js.map