@nuraly/lumenui 0.2.1 → 0.2.2

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,53 @@
+/**
+ * @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[];
+    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,228 @@
+/**
+ * @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 = [];
+        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.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}
+            @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>
+    `;
+    }
+};
+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([
+    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

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

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