@nuraly/lumenui 0.2.1 → 0.3.2

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

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=presence-avatars.style.d.ts.map

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

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :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;
+  }
+`;
+//# sourceMappingURL=presence-avatars.style.js.map

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

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import type { PresenceUser, PresenceChatMessage } from './presence.types.js';
+declare const NrPresenceChatElement_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;
+/**
+ * A floating, draggable, minimizable chat panel.
+ * Pure UI — all state owned by parent (`nr-presence`).
+ *
+ * @fires drag-start - User started dragging header. Detail: `{ offsetX, offsetY }`
+ * @fires minimize   - Minimize button clicked
+ * @fires restore    - Minimized header clicked (open above slot)
+ * @fires float      - Float/detach button clicked (restore to saved pos)
+ * @fires close      - Close button clicked
+ * @fires send       - Message sent. Detail: `{ text: string }`
+ * @fires focus      - Panel mousedown (bring to front)
+ */
+export declare class NrPresenceChatElement extends NrPresenceChatElement_base {
+    static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
+    /** User this chat is with */
+    user: PresenceUser;
+    /** Panel left position (px) */
+    x: number;
+    /** Panel top position (px) */
+    y: number;
+    /** z-index */
+    z: number;
+    /** Minimized state */
+    minimized: boolean;
+    /** Position index in bottom minimized strip (0, 1, 2…) */
+    minimizedIndex: number;
+    /** Chat messages array */
+    messages: PresenceChatMessage[];
+    /** Loading state (while DM is being created/loaded) */
+    loading: boolean;
+    private _draft;
+    private _emit;
+    private _onHeaderMousedown;
+    private _onHeaderClick;
+    private _onSend;
+    private _onInputKeydown;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-presence-chat': NrPresenceChatElement;
+    }
+}
+export {};
+//# sourceMappingURL=presence-chat.component.d.ts.map

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

@@ -0,0 +1,238 @@
+/**
+ * @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, state } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { styles } from './presence-chat.style.js';
+/**
+ * A floating, draggable, minimizable chat panel.
+ * Pure UI — all state owned by parent (`nr-presence`).
+ *
+ * @fires drag-start - User started dragging header. Detail: `{ offsetX, offsetY }`
+ * @fires minimize   - Minimize button clicked
+ * @fires restore    - Minimized header clicked (open above slot)
+ * @fires float      - Float/detach button clicked (restore to saved pos)
+ * @fires close      - Close button clicked
+ * @fires send       - Message sent. Detail: `{ text: string }`
+ * @fires focus      - Panel mousedown (bring to front)
+ */
+let NrPresenceChatElement = class NrPresenceChatElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** User this chat is with */
+        this.user = { displayName: '', color: '#7c3aed' };
+        /** Panel left position (px) */
+        this.x = 300;
+        /** Panel top position (px) */
+        this.y = 200;
+        /** z-index */
+        this.z = 100;
+        /** Minimized state */
+        this.minimized = false;
+        /** Position index in bottom minimized strip (0, 1, 2…) */
+        this.minimizedIndex = 0;
+        /** Chat messages array */
+        this.messages = [];
+        /** Loading state (while DM is being created/loaded) */
+        this.loading = false;
+        this._draft = '';
+    }
+    _emit(type, detail) {
+        this.dispatchEvent(new CustomEvent(type, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _onHeaderMousedown(e) {
+        if (this.minimized)
+            return;
+        const rect = this.getBoundingClientRect();
+        this._emit('drag-start', { offsetX: e.clientX - rect.left, offsetY: e.clientY - rect.top });
+        e.preventDefault();
+    }
+    _onHeaderClick() {
+        if (this.minimized)
+            this._emit('restore');
+    }
+    _onSend() {
+        const text = this._draft.trim();
+        if (!text)
+            return;
+        this._emit('send', { text });
+        this._draft = '';
+    }
+    _onInputKeydown(e) {
+        if (e.key === 'Enter')
+            this._onSend();
+        if (e.key === 'Escape')
+            this._emit('close');
+    }
+    updated() {
+        // Light DOM component — apply layout directly to host element
+        this.style.position = 'fixed';
+        this.style.display = 'block';
+        this.style.width = '300px';
+        if (this.minimized) {
+            this.style.right = `${12 + this.minimizedIndex * 212}px`;
+            this.style.bottom = '0';
+            this.style.top = 'auto';
+            this.style.left = 'auto';
+        }
+        else {
+            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 html `
+      <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
+            ? html `<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 ? html `<div class="chat-header-status">Online</div>` : nothing}
+          </div>
+
+          ${this.minimized ? html `
+            <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>
+          ` : html `
+            <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">
+          ${this.loading ? html `
+            <div class="chat-empty">
+              <span>Loading...</span>
+            </div>
+          ` : this.messages.length === 0 ? html `
+            <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(m => html `
+            <div class="chat-msg ${m.me ? 'me' : 'other'}">
+              <div class="chat-bubble">${m.text}</div>
+              <span class="chat-time">${new Date(m.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=${(e) => { this._draft = e.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>
+    `;
+    }
+};
+NrPresenceChatElement.styles = styles;
+NrPresenceChatElement.useShadowDom = true;
+__decorate([
+    property({ type: Object })
+], NrPresenceChatElement.prototype, "user", void 0);
+__decorate([
+    property({ type: Number })
+], NrPresenceChatElement.prototype, "x", void 0);
+__decorate([
+    property({ type: Number })
+], NrPresenceChatElement.prototype, "y", void 0);
+__decorate([
+    property({ type: Number })
+], NrPresenceChatElement.prototype, "z", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrPresenceChatElement.prototype, "minimized", void 0);
+__decorate([
+    property({ type: Number })
+], NrPresenceChatElement.prototype, "minimizedIndex", void 0);
+__decorate([
+    property({ type: Array })
+], NrPresenceChatElement.prototype, "messages", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrPresenceChatElement.prototype, "loading", void 0);
+__decorate([
+    state()
+], NrPresenceChatElement.prototype, "_draft", void 0);
+NrPresenceChatElement = __decorate([
+    customElement('nr-presence-chat')
+], NrPresenceChatElement);
+export { NrPresenceChatElement };
+//# sourceMappingURL=presence-chat.component.js.map

package/dist/src/components/presence/presence-chat.style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=presence-chat.style.d.ts.map