@nuraly/lumenui 0.2.2 → 0.3.2

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

@@ -18,17 +18,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html, nothing, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { styles } from './presence.style.js';
 import './presence-avatars.component.js';
 import './presence-chat.component.js';
+const GROUP_CHAT_KEY = '__group__';
 /**
  * Top-level presence orchestrator.
  *
- * Owns the socket connection, viewer list, and chat panel manager.
- * Renders `nr-presence-avatars` + one `nr-presence-chat` per open chat.
+ * Owns the resource socket for viewer tracking, and uses the global messages
+ * socket (`.globalSocket`) for real-time chat.
+ *
+ * Two chat modes:
+ * - **Group chat**: One conversation per resource. Opened via the chat button.
+ * - **DM**: Private 1-on-1 conversation. Opened by clicking a viewer's avatar.
  *
  * @example
  * ```html
@@ -36,9 +41,11 @@ import './presence-chat.component.js';
  *   namespace="/nk/apps/workflows/socket"
  *   socket-path="/__nk_socketio/"
  *   resource-id="workflow-abc123"
+ *   resource-type="workflow"
+ *   resource-name="My Workflow"
  *   user-id="user-xyz"
  *   .currentUser=${{ displayName, initials, color, avatarUrl }}
- *   .extraUsers=${[...mockUsers]}
+ *   .globalSocket=${globalSocket}
  * ></nr-presence>
  * ```
  *
@@ -47,31 +54,43 @@ import './presence-chat.component.js';
 let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
-        /** Socket.io namespace */
+        /** Socket.io namespace for presence tracking */
         this.namespace = '';
         /** Socket.io path */
         this.socketPath = '/__nk_socketio/';
         /** The resource being viewed (workflow id, doc id, etc.) */
         this.resourceId = '';
+        /** Resource type for group conversation (e.g. 'workflow', 'whiteboard') */
+        this.resourceType = '';
+        /** Resource name (used as group conversation name) */
+        this.resourceName = '';
         /** Current user's id */
         this.userId = '';
         /** Current user object (shown first in avatar strip) */
         this.currentUser = null;
         /** Additional users to show (e.g. mocks for demo) */
         this.extraUsers = [];
+        /** Global messages socket (from layout's /nk/messages connection) for real-time chat */
+        this.globalSocket = null;
         this._viewers = [];
+        this._hasUnreadGroup = false;
         this._socket = null;
+        this._connecting = false;
         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);
+        this._boundOnMessage = (data) => this._onSocketMessage(data);
+        // ── Group chat ──
+        this._groupConversationId = null;
     }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('keydown', this._boundEscape);
         this._connect();
+        this._attachGlobalSocket();
     }
     disconnectedCallback() {
         var _a;
@@ -81,11 +100,66 @@ let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitEle
         document.removeEventListener('mouseup', this._boundDragEnd);
         (_a = this._socket) === null || _a === void 0 ? void 0 : _a.disconnect();
         this._socket = null;
+        this._detachGlobalSocket();
+    }
+    updated(changed) {
+        if (changed.has('globalSocket')) {
+            this._detachGlobalSocket(changed.get('globalSocket'));
+            this._attachGlobalSocket();
+        }
+        // Resource socket may not have connected during connectedCallback if userId/
+        // resourceId/namespace were still empty (common during hydration). Retry when
+        // any of them becomes available.
+        if (!this._socket && (changed.has('userId') || changed.has('resourceId') || changed.has('namespace'))) {
+            if (this.userId && this.resourceId && this.namespace) {
+                this._connect();
+            }
+        }
     }
+    _attachGlobalSocket() {
+        if (this.globalSocket) {
+            this.globalSocket.on('nk:data', this._boundOnMessage);
+        }
+    }
+    _detachGlobalSocket(old) {
+        const sock = old || this.globalSocket;
+        if (sock) {
+            sock.off('nk:data', this._boundOnMessage);
+        }
+    }
+    /** Handle incoming messages from the global /nk/messages socket */
+    _onSocketMessage(data) {
+        if (data.event !== 'message:new')
+            return;
+        const msg = data.data;
+        if (!(msg === null || msg === void 0 ? void 0 : msg.conversationId) || msg.senderId === this.userId)
+            return;
+        for (const [, chat] of this._chats) {
+            if (chat.conversationId === msg.conversationId) {
+                chat.messages = [...chat.messages, {
+                        id: String(msg.id),
+                        senderId: msg.senderId,
+                        text: msg.content,
+                        timestamp: new Date(msg.createdAt).getTime(),
+                        me: false,
+                    }];
+                this.requestUpdate();
+                return;
+            }
+        }
+        // If message is for our group conversation but panel is closed, show unread dot
+        if (this._groupConversationId && msg.conversationId === this._groupConversationId) {
+            this._hasUnreadGroup = true;
+        }
+    }
+    // ── Resource presence socket ──
     _connect() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this._socket || this._connecting)
+                return;
             if (!this.userId || !this.resourceId || !this.namespace)
                 return;
+            this._connecting = true;
             try {
                 const { io } = yield import('socket.io-client');
                 this._socket = io(this.namespace, {
@@ -108,24 +182,172 @@ let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitEle
             catch (e) {
                 console.error('[nr-presence] Connection failed:', e);
             }
+            finally {
+                this._connecting = false;
+            }
         });
     }
-    _openChat(user) {
-        const key = user.userId || user.displayName;
-        if (this._chats.has(key)) {
-            this._chats.get(key).z = ++this._chatZ;
-        }
-        else {
-            const offset = this._chats.size * 24;
-            const ix = window.innerWidth - 324 - offset;
-            const iy = 56 + offset;
+    _openGroupChat() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (this._chats.has(GROUP_CHAT_KEY)) {
+                const c = this._chats.get(GROUP_CHAT_KEY);
+                c.minimized = false;
+                c.z = ++this._chatZ;
+                this._hasUnreadGroup = false;
+                this.requestUpdate();
+                return;
+            }
+            const ix = window.innerWidth - 324;
+            const iy = 56;
+            this._chats.set(GROUP_CHAT_KEY, {
+                user: { displayName: this.resourceName || `${this.resourceType} chat`, color: '#7c3aed', initials: '#' },
+                conversationId: null, loading: true,
+                x: ix, y: iy, savedX: ix, savedY: iy,
+                z: ++this._chatZ, minimized: false, messages: [], draftText: '',
+            });
+            this._hasUnreadGroup = false;
+            this.requestUpdate();
+            try {
+                const res = yield fetch('/api/conversations/resource', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        resourceType: this.resourceType,
+                        resourceId: this.resourceId,
+                        resourceName: this.resourceName,
+                    }),
+                });
+                const data = yield res.json();
+                const chat = this._chats.get(GROUP_CHAT_KEY);
+                if (!chat || !data.conversationId) {
+                    if (chat)
+                        chat.loading = false;
+                    this.requestUpdate();
+                    return;
+                }
+                chat.conversationId = data.conversationId;
+                this._groupConversationId = data.conversationId;
+                // Join the conversation room on the global socket
+                if ((_a = this.globalSocket) === null || _a === void 0 ? void 0 : _a.connected) {
+                    this.globalSocket.emit('nk:conversation:join', { conversationId: data.conversationId });
+                }
+                // Load existing messages
+                yield this._loadMessages(chat);
+            }
+            catch (e) {
+                console.error('[nr-presence] Failed to open group chat:', e);
+                const chat = this._chats.get(GROUP_CHAT_KEY);
+                if (chat)
+                    chat.loading = false;
+            }
+            this.requestUpdate();
+        });
+    }
+    // ── DM chat ──
+    _openDm(user) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const key = user.userId || user.displayName;
+            // Clicking your own avatar opens the group chat (notes to self in context)
+            if (key === this.userId) {
+                this._openGroupChat();
+                return;
+            }
+            if (this._chats.has(key)) {
+                this._chats.get(key).z = ++this._chatZ;
+                this.requestUpdate();
+                return;
+            }
+            const offset = [...this._chats.keys()].filter(k => k !== GROUP_CHAT_KEY).length;
+            const ix = window.innerWidth - 324 - (offset + 1) * 24;
+            const iy = 56 + (offset + 1) * 24;
             this._chats.set(key, {
-                user, x: ix, y: iy, savedX: ix, savedY: iy,
+                user, conversationId: null, loading: true,
+                x: ix, y: iy, savedX: ix, savedY: iy,
                 z: ++this._chatZ, minimized: false, messages: [], draftText: '',
             });
-        }
+            this.requestUpdate();
+            if (!user.userId)
+                return;
+            try {
+                const dmRes = yield fetch('/api/conversations/dm', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ targetUserId: user.userId }),
+                });
+                const dm = yield dmRes.json();
+                const chat = this._chats.get(key);
+                if (!chat || !dm.conversationId) {
+                    if (chat)
+                        chat.loading = false;
+                    this.requestUpdate();
+                    return;
+                }
+                chat.conversationId = dm.conversationId;
+                if ((_a = this.globalSocket) === null || _a === void 0 ? void 0 : _a.connected) {
+                    this.globalSocket.emit('nk:conversation:join', { conversationId: dm.conversationId });
+                }
+                yield this._loadMessages(chat);
+            }
+            catch (e) {
+                console.error('[nr-presence] Failed to open DM:', e);
+                const chat = this._chats.get(key);
+                if (chat)
+                    chat.loading = false;
+            }
+            this.requestUpdate();
+        });
+    }
+    // ── Shared helpers ──
+    _loadMessages(chat) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!chat.conversationId)
+                return;
+            try {
+                const res = yield fetch(`/api/conversations/${chat.conversationId}/messages`);
+                const data = yield res.json();
+                if ((_a = data.messages) === null || _a === void 0 ? void 0 : _a.length) {
+                    chat.messages = data.messages.map((m) => ({
+                        id: String(m.id),
+                        senderId: m.sender_id,
+                        text: m.content,
+                        timestamp: new Date(m.created_at).getTime(),
+                        me: m.sender_id === this.userId,
+                    }));
+                }
+            }
+            catch (e) {
+                console.error('[nr-presence] Failed to load messages:', e);
+            }
+            chat.loading = false;
+        });
+    }
+    _sendMessage(key, text) {
+        var _a;
+        const chat = this._chats.get(key);
+        if (!(chat === null || chat === void 0 ? void 0 : chat.conversationId))
+            return;
+        // Optimistic local update
+        chat.messages = [...chat.messages, {
+                id: crypto.randomUUID(),
+                senderId: this.userId,
+                text,
+                timestamp: Date.now(),
+                me: true,
+            }];
         this.requestUpdate();
+        // Send via global socket
+        if ((_a = this.globalSocket) === null || _a === void 0 ? void 0 : _a.connected) {
+            this.globalSocket.emit('nk:message:send', {
+                conversationId: chat.conversationId,
+                content: text,
+                type: 'text',
+            });
+        }
     }
+    // ── Chat panel UI management ──
     _closeChat(key) {
         this._chats.delete(key);
         this.requestUpdate();
@@ -189,9 +411,18 @@ let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitEle
         return html `
       <nr-presence-avatars
         .users=${allUsers}
-        @user-click=${(e) => this._openChat(e.detail.user)}
+        @user-click=${(e) => this._openDm(e.detail.user)}
       ></nr-presence-avatars>
 
+      ${this.resourceType ? html `
+        <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 ? html `<span class="unread-dot"></span>` : nothing}
+        </button>
+      ` : nothing}
+
       ${[...this._chats.entries()].map(([key, c]) => {
             const minIdx = minimizedList.findIndex(([k]) => k === key);
             return html `
@@ -203,6 +434,7 @@ let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitEle
             .minimized=${c.minimized}
             .minimizedIndex=${minIdx >= 0 ? minIdx : 0}
             .messages=${c.messages}
+            .loading=${c.loading}
             @focus=${() => { c.z = ++this._chatZ; this.requestUpdate(); }}
             @drag-start=${(e) => this._onDragStart(key, e.detail.offsetX, e.detail.offsetY)}
             @minimize=${() => { c.savedX = c.x; c.savedY = c.y; c.minimized = true; this.requestUpdate(); }}
@@ -215,25 +447,28 @@ let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitEle
             }}
             @float=${() => { c.minimized = false; c.x = c.savedX; c.y = c.savedY; c.z = ++this._chatZ; this.requestUpdate(); }}
             @close=${() => this._closeChat(key)}
-            @send=${(e) => {
-                c.messages = [...c.messages, {
-                        id: crypto.randomUUID(),
-                        senderId: this.userId,
-                        text: e.detail.text,
-                        timestamp: Date.now(),
-                        me: true,
-                    }];
-                this.requestUpdate();
-            }}
+            @send=${(e) => this._sendMessage(key, e.detail.text)}
           ></nr-presence-chat>
         `;
         })}
-
-      ${this._chats.size === 0 ? nothing : nothing}
     `;
     }
 };
-NrPresenceElement.styles = styles;
+NrPresenceElement.styles = [styles, css `
+    .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);
+    }
+  `];
 NrPresenceElement.useShadowDom = true;
 __decorate([
     property({ type: String })
@@ -244,6 +479,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'resource-id' })
 ], NrPresenceElement.prototype, "resourceId", void 0);
+__decorate([
+    property({ type: String, attribute: 'resource-type' })
+], NrPresenceElement.prototype, "resourceType", void 0);
+__decorate([
+    property({ type: String, attribute: 'resource-name' })
+], NrPresenceElement.prototype, "resourceName", void 0);
 __decorate([
     property({ type: String, attribute: 'user-id' })
 ], NrPresenceElement.prototype, "userId", void 0);
@@ -253,9 +494,15 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], NrPresenceElement.prototype, "extraUsers", void 0);
+__decorate([
+    property({ type: Object })
+], NrPresenceElement.prototype, "globalSocket", void 0);
 __decorate([
     state()
 ], NrPresenceElement.prototype, "_viewers", void 0);
+__decorate([
+    state()
+], NrPresenceElement.prototype, "_hasUnreadGroup", void 0);
 NrPresenceElement = __decorate([
     customElement('nr-presence')
 ], NrPresenceElement);

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

@@ -19,6 +19,8 @@ export interface PresenceChatMessage {
 }
 export interface PresenceChatState {
     user: PresenceUser;
+    conversationId: string | null;
+    loading: boolean;
     x: number;
     y: number;
     savedX: number;

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

@@ -331,13 +331,13 @@ import{css as t,html as e,nothing as o,LitElement as s}from"lit";import{property
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */,d=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,o;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(o=this.mediaQuery)||void 0===o||o.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const o=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return o||((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))}},h=()=>{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)},u=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())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(!h())return!0;let e=!0;for(const o of this.requiredComponents)if(!this.isComponentAvailable(o)){e=!1;const s=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(o,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)}},m=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var o;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,o)}dispatchFocusEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,o)}dispatchValidationEvent(t,e){var o;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(o=e.isValid)&&void 0!==o&&o,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const o=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,o)}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}},f=new Set,p=new Map;
+ */,d=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,o;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(o=this.mediaQuery)||void 0===o||o.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const o=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return o||((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))}},h=()=>{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)},u=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())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(!h())return!0;let e=!0;for(const o of this.requiredComponents)if(!this.isComponentAvailable(o)){e=!1;const s=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(o,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)}},m=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var o;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,o)}dispatchFocusEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,o)}dispatchValidationEvent(t,e){var o;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(o=e.isValid)&&void 0!==o&&o,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const o=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,o)}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}},p=new Set,f=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-const b=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(),o=t.styles;if(o){const t=v(o);t&&function(t,e,o){var s;if(!p.has(t)){const o=new CSSStyleSheet;o.replaceSync(e),p.set(t,o)}const i=p.get(t),r=`doc:${t}`;if(f.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,i],f.add(r)),o){let e=o;for(;e;){const o=e.getRootNode();if(!(o instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=o.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;f.has(r)||(o.adoptedStyleSheets=[...o.adoptedStyleSheets,i],f.add(r)),e=o.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};function v(t){return Array.isArray(t)?t.map(t=>v(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+const b=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(),o=t.styles;if(o){const t=v(o);t&&function(t,e,o){var s;if(!f.has(t)){const o=new CSSStyleSheet;o.replaceSync(e),f.set(t,o)}const i=f.get(t),r=`doc:${t}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,i],p.add(r)),o){let e=o;for(;e;){const o=e.getRootNode();if(!(o instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=o.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;p.has(r)||(o.adoptedStyleSheets=[...o.adoptedStyleSheets,i],p.add(r)),e=o.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};function v(t){return Array.isArray(t)?t.map(t=>v(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -349,32 +349,34 @@ const b=t=>{class e extends t{constructor(){super(...arguments),this.t=null}crea
  * SPDX-License-Identifier: MIT
  */
 var x=function(t,e,o,s){for(var i,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s,a=t.length-1;a>=0;a--)(i=t[a])&&(n=(r<3?i(n):r>3?i(e,o,n):i(e,o))||n);return r>3&&n&&Object.defineProperty(e,o,n),n};let k=class extends((t=>u(d(m(b(t)))))(s)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button"],this.position="top-right",this.maxToasts=5,this.defaultDuration=5e3,this.animation="fade",this.stack=!0,this.autoDismiss=!0,this.toasts=[],this.timeouts=new Map}show(t){var e,o,s;const i="string"==typeof t?{text:t}:t,r={id:this.generateId(),timestamp:Date.now(),text:i.text,content:i.content,type:i.type||"default",duration:null!==(e=i.duration)&&void 0!==e?e:this.defaultDuration,autoDismiss:null!==(o=i.autoDismiss)&&void 0!==o?o:this.autoDismiss,closable:null===(s=i.closable)||void 0===s||s,icon:i.icon||this.getDefaultIcon(i.type),customClass:i.customClass,button:i.button,onClose:i.onClose,onClick:i.onClick};if(this.stack?this.toasts.length>=this.maxToasts&&this.removeToast(this.toasts[0].id):this.clearAll(),this.toasts=[...this.toasts,r],this.emitToastEvent("nr-toast-show",r,"show"),r.autoDismiss&&r.duration&&r.duration>0){const t=window.setTimeout(()=>{this.removeToast(r.id)},r.duration);this.timeouts.set(r.id,t)}return r.id}success(t,e){return this.show({text:t,type:"success",duration:e})}error(t,e){return this.show({text:t,type:"error",duration:e})}warning(t,e){return this.show({text:t,type:"warning",duration:e})}info(t,e){return this.show({text:t,type:"info",duration:e})}removeToast(t){const e=this.toasts.find(e=>e.id===t);if(!e)return;e.removing=!0,this.requestUpdate();const o=this.timeouts.get(t);o&&(clearTimeout(o),this.timeouts.delete(t)),setTimeout(()=>{var o;this.toasts=this.toasts.filter(e=>e.id!==t),this.emitToastEvent("nr-toast-close",e,"close"),null===(o=e.onClose)||void 0===o||o.call(e)},300)}clearAll(){this.toasts.forEach(t=>{const e=this.timeouts.get(t.id);e&&clearTimeout(e)}),this.timeouts.clear(),this.toasts=[]}handleToastClick(t){var e;this.emitToastEvent("nr-toast-click",t,"click"),null===(e=t.onClick)||void 0===e||e.call(t)}handleCloseClick(t,e){t.stopPropagation(),this.removeToast(e.id)}getDefaultIcon(t){switch(t){case"success":return"check-circle";case"error":return"x-circle";case"warning":return"alert-triangle";case"info":return"info";default:return""}}generateId(){return`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}getAnimationClass(t){const e=t.removing?"out":"in";return`toast--${this.animation}-${e}`}emitToastEvent(t,e,o){this.dispatchEvent(new CustomEvent(t,{detail:{toast:e,action:o},bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.clearAll()}render(){return e`
-      <div class="toast-container">
+      <div class="toast-container" part="container">
         ${a(this.toasts,t=>t.id,t=>this.renderToast(t))}
       </div>
     `}renderToast(t){const s={toast:!0,[`toast--${t.type}`]:!0,[this.getAnimationClass(t)]:!0,[t.customClass||""]:!!t.customClass};return e`
       <div
         class=${c(s)}
+        part="toast toast-${t.type}"
         @click=${()=>this.handleToastClick(t)}
         role="alert"
         aria-live="polite"
       >
         ${t.icon?e`
-          <div class="toast__icon">
+          <div class="toast__icon" part="icon">
             <nr-icon name=${t.icon} size="medium"></nr-icon>
           </div>
         `:o}
-        
-        <div class="toast__content">
+
+        <div class="toast__content" part="content">
           ${t.content?t.content:e`
-              <div class="toast__text">${t.text}</div>
+              <div class="toast__text" part="text">${t.text}</div>
               ${t.button?this.renderButton(t.button):o}
             `}
         </div>
-        
+
         ${t.closable?e`
           <button
             class="toast__close"
+            part="close"
             @click=${e=>this.handleCloseClick(e,t)}
             aria-label="Close notification"
             type="button"
@@ -384,7 +386,7 @@ var x=function(t,e,o,s){for(var i,r=arguments.length,n=r<3?e:null===s?s=Object.g
         `:o}
       </div>
     `}renderButton(t){return e`
-      <div class="toast__button">
+      <div class="toast__button" part="button">
         <nr-button
           type=${t.type||"default"}
           size=${t.size||"small"}

package/dist/src/components/toast/toast.component.d.ts

@@ -69,6 +69,14 @@ declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @cssproperty --nuraly-toast-error-background - Error toast background
  * @cssproperty --nuraly-toast-warning-background - Warning toast background
  * @cssproperty --nuraly-toast-info-background - Info toast background
+ *
+ * @csspart container - The root list wrapper holding all visible toasts
+ * @csspart toast - An individual toast element
+ * @csspart icon - The leading icon container (when an icon is set)
+ * @csspart content - The content area (text or custom html)
+ * @csspart text - The text node (when not using custom content)
+ * @csspart button - The action button wrapper (when a button is configured)
+ * @csspart close - The close (×) button (when closable)
  */
 export declare class NrToastElement extends NrToastElement_base {
     static useShadowDom: boolean;

package/dist/src/components/toast/toast.component.js

@@ -80,6 +80,14 @@ import { DEFAULT_TOAST_DURATION, DEFAULT_MAX_TOASTS, EMPTY_STRING } from './toas
  * @cssproperty --nuraly-toast-error-background - Error toast background
  * @cssproperty --nuraly-toast-warning-background - Warning toast background
  * @cssproperty --nuraly-toast-info-background - Info toast background
+ *
+ * @csspart container - The root list wrapper holding all visible toasts
+ * @csspart toast - An individual toast element
+ * @csspart icon - The leading icon container (when an icon is set)
+ * @csspart content - The content area (text or custom html)
+ * @csspart text - The text node (when not using custom content)
+ * @csspart button - The action button wrapper (when a button is configured)
+ * @csspart close - The close (×) button (when closable)
  */
 let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -272,7 +280,7 @@ let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement)
     }
     render() {
         return html `
-      <div class="toast-container">
+      <div class="toast-container" part="container">
         ${repeat(this.toasts, toast => toast.id, toast => this.renderToast(toast))}
       </div>
     `;
@@ -287,28 +295,30 @@ let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement)
         return html `
       <div
         class=${classMap(classes)}
+        part="toast toast-${toast.type}"
         @click=${() => this.handleToastClick(toast)}
         role="alert"
         aria-live="polite"
       >
         ${toast.icon ? html `
-          <div class="toast__icon">
+          <div class="toast__icon" part="icon">
             <nr-icon name=${toast.icon} size="medium"></nr-icon>
           </div>
         ` : nothing}
-        
-        <div class="toast__content">
+
+        <div class="toast__content" part="content">
           ${toast.content
             ? toast.content
             : html `
-              <div class="toast__text">${toast.text}</div>
+              <div class="toast__text" part="text">${toast.text}</div>
               ${toast.button ? this.renderButton(toast.button) : nothing}
             `}
         </div>
-        
+
         ${toast.closable ? html `
           <button
             class="toast__close"
+            part="close"
             @click=${(e) => this.handleCloseClick(e, toast)}
             aria-label="Close notification"
             type="button"
@@ -325,7 +335,7 @@ let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement)
             button.onClick(e);
         };
         return html `
-      <div class="toast__button">
+      <div class="toast__button" part="button">
         <nr-button
           type=${button.type || 'default'}
           size=${button.size || 'small'}