@nuraly/lumenui 0.3.4 → 0.3.6

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

@@ -18,52 +18,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { html, LitElement } from 'lit';
+import { html, LitElement, render, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './popconfirm.style.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 /**
  * # Popconfirm Component
  *
- * A pop-up confirmation dialog triggered by user interaction. It provides a simple and
- * compact way to ask for user confirmation before performing an action.
- *
- * ## Features
- * - Customizable title and description
- * - Configurable OK and Cancel buttons
- * - Multiple placement options (12 positions)
- * - Custom icons with predefined options
- * - Async confirmation support
- * - Multiple trigger modes (click, hover, focus)
- * - Theme-aware styling
- * - Keyboard accessibility
- *
- * ## Usage
- * ```html
- * <!-- Basic popconfirm -->
- * <nr-popconfirm
- *   title="Are you sure delete this task?"
- *   ok-text="Yes"
- *   cancel-text="No">
- *   <button slot="trigger">Delete</button>
- * </nr-popconfirm>
- *
- * <!-- With description -->
- * <nr-popconfirm
- *   title="Delete the task"
- *   description="Are you sure you want to delete this task? This action cannot be undone."
- *   ok-type="danger">
- *   <button slot="trigger">Delete</button>
- * </nr-popconfirm>
- *
- * <!-- Custom icon -->
- * <nr-popconfirm
- *   title="Change status?"
- *   icon="question-circle"
- *   icon-color="#1890ff">
- *   <button slot="trigger">Change Status</button>
- * </nr-popconfirm>
- * ```
+ * A pop-up confirmation dialog triggered by user interaction. The panel is rendered
+ * into a body-level portal so it escapes ancestor stacking contexts and is not
+ * hidden when the trigger's ancestors are toggled with `display: none`.
  *
  * @element nr-popconfirm
  * @fires nr-confirm - Fired when user confirms the action
@@ -77,71 +42,26 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
-        this.requiredComponents = ['nr-dropdown', 'nr-icon', 'nr-button', 'nr-label'];
-        /**
-         * Title of the confirmation box
-         */
+        this.requiredComponents = ['nr-icon', 'nr-button', 'nr-label'];
         this.title = '';
-        /**
-         * Description of the confirmation box (optional)
-         */
         this.description = '';
-        /**
-         * Text of the OK button
-         */
         this.okText = 'OK';
-        /**
-         * Text of the Cancel button
-         */
         this.cancelText = 'Cancel';
-        /**
-         * Button type of the OK button
-         */
         this.okType = "primary" /* PopconfirmButtonType.Primary */;
-        /**
-         * Show cancel button
-         */
         this.showCancel = true;
-        /**
-         * Icon name for the confirmation box
-         */
         this.icon = "exclamation-circle" /* PopconfirmIcon.Warning */;
-        /**
-         * Custom icon color
-         */
         this.iconColor = '';
-        /**
-         * Placement of the popconfirm
-         */
         this.placement = "top" /* PopconfirmPlacement.Top */;
-        /**
-         * Trigger mode
-         */
         this.trigger = "click" /* PopconfirmTrigger.Click */;
-        /**
-         * Whether the popconfirm is disabled
-         */
         this.disabled = false;
-        /**
-         * Whether to show arrow
-         */
         this.arrow = true;
-        /**
-         * Whether the popconfirm is open
-         */
         this.open = false;
-        /**
-         * Loading state for OK button (for async operations)
-         */
         this.okLoading = false;
-        /**
-         * Bound event handlers for cleanup
-         */
+        this._portalHost = null;
+        this._portalRoot = null;
         this._boundHandleOutsideClick = null;
         this._boundHandleKeydown = null;
-        /**
-         * Handle trigger click to toggle popconfirm
-         */
+        this._boundReposition = null;
         this.handleTriggerClick = (e) => {
             if (this.disabled)
                 return;
@@ -153,9 +73,6 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
                 this.openPopconfirm();
             }
         };
-        /**
-         * Handle confirm button click
-         */
         this.handleConfirm = (e) => __awaiter(this, void 0, void 0, function* () {
             e.stopPropagation();
             const confirmEvent = new CustomEvent('nr-confirm', {
@@ -165,9 +82,7 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
                 detail: { originalEvent: e },
             });
             const dispatched = this.dispatchEvent(confirmEvent);
-            // If event is not prevented, close the popconfirm
             if (dispatched && !confirmEvent.defaultPrevented) {
-                // Check if the event handler returns a promise
                 const handler = this.onConfirm;
                 if (handler && typeof handler === 'function') {
                     const result = handler(e);
@@ -189,9 +104,6 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
                 this.closePopconfirm();
             }
         });
-        /**
-         * Handle cancel button click
-         */
         this.handleCancel = (e) => {
             e.stopPropagation();
             this.dispatchEvent(new CustomEvent('nr-cancel', {
@@ -202,17 +114,11 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
             this.closePopconfirm();
         };
     }
-    /**
-     * Reference to the dropdown element
-     */
-    get dropdownElement() {
-        var _a;
-        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-dropdown');
-    }
     connectedCallback() {
         super.connectedCallback();
         this._boundHandleOutsideClick = this.handleOutsideClick.bind(this);
         this._boundHandleKeydown = this.handleKeydown.bind(this);
+        this._boundReposition = () => this.reposition();
         document.addEventListener('click', this._boundHandleOutsideClick, true);
         document.addEventListener('keydown', this._boundHandleKeydown);
     }
@@ -224,67 +130,171 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
         if (this._boundHandleKeydown) {
             document.removeEventListener('keydown', this._boundHandleKeydown);
         }
+        this._detachViewportListeners();
+        this._teardownPortal();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            if (this.open) {
+                this._attachViewportListeners();
+            }
+            else {
+                this._detachViewportListeners();
+            }
+        }
+        this._renderPortal();
+    }
+    _ensurePortal() {
+        if (this._portalRoot)
+            return this._portalRoot;
+        const host = document.createElement('div');
+        host.setAttribute('data-nr-popconfirm-portal', '');
+        host.style.position = 'fixed';
+        host.style.top = '0';
+        host.style.left = '0';
+        host.style.width = '0';
+        host.style.height = '0';
+        host.style.zIndex = '2147483000';
+        document.body.appendChild(host);
+        this._portalHost = host;
+        this._portalRoot = host.attachShadow({ mode: 'open' });
+        return this._portalRoot;
+    }
+    _teardownPortal() {
+        if (this._portalRoot) {
+            render(nothing, this._portalRoot);
+        }
+        if (this._portalHost && this._portalHost.parentNode) {
+            this._portalHost.parentNode.removeChild(this._portalHost);
+        }
+        this._portalHost = null;
+        this._portalRoot = null;
+    }
+    _attachViewportListeners() {
+        if (!this._boundReposition)
+            return;
+        window.addEventListener('scroll', this._boundReposition, true);
+        window.addEventListener('resize', this._boundReposition);
+    }
+    _detachViewportListeners() {
+        if (!this._boundReposition)
+            return;
+        window.removeEventListener('scroll', this._boundReposition, true);
+        window.removeEventListener('resize', this._boundReposition);
+    }
+    _renderPortal() {
+        if (!this.open) {
+            if (this._portalRoot) {
+                render(nothing, this._portalRoot);
+            }
+            return;
+        }
+        const root = this._ensurePortal();
+        render(this._renderPortalTemplate(), root);
+        requestAnimationFrame(() => this.reposition());
+    }
+    _renderPortalTemplate() {
+        const placementClass = `popconfirm-panel--${this.placement}`;
+        return html `
+      <style>${styles.cssText}</style>
+      <div
+        class="popconfirm-panel ${classMap({ [placementClass]: true, 'popconfirm-panel--with-arrow': this.arrow })}"
+        part="panel"
+        role="dialog"
+        @click=${(e) => e.stopPropagation()}>
+        ${this.arrow ? html `<div class="popconfirm-arrow" part="arrow"></div>` : nothing}
+        ${this.renderContent()}
+      </div>
+    `;
+    }
+    reposition() {
+        if (!this.open || !this._portalRoot)
+            return;
+        const panel = this._portalRoot.querySelector('.popconfirm-panel');
+        if (!panel)
+            return;
+        const triggerRect = this.getBoundingClientRect();
+        const panelRect = panel.getBoundingClientRect();
+        const offset = 8;
+        const placement = this.placement || "top" /* PopconfirmPlacement.Top */;
+        let top = 0;
+        let left = 0;
+        if (placement.startsWith('top')) {
+            top = triggerRect.top - panelRect.height - offset;
+        }
+        else if (placement.startsWith('bottom')) {
+            top = triggerRect.bottom + offset;
+        }
+        else if (placement.startsWith('left')) {
+            left = triggerRect.left - panelRect.width - offset;
+        }
+        else if (placement.startsWith('right')) {
+            left = triggerRect.right + offset;
+        }
+        if (placement === "top" /* PopconfirmPlacement.Top */ || placement === "bottom" /* PopconfirmPlacement.Bottom */) {
+            left = triggerRect.left + (triggerRect.width - panelRect.width) / 2;
+        }
+        else if (placement === "left" /* PopconfirmPlacement.Left */ || placement === "right" /* PopconfirmPlacement.Right */) {
+            top = triggerRect.top + (triggerRect.height - panelRect.height) / 2;
+        }
+        else if (placement.endsWith('-start')) {
+            if (placement.startsWith('top') || placement.startsWith('bottom')) {
+                left = triggerRect.left;
+            }
+            else {
+                top = triggerRect.top;
+            }
+        }
+        else if (placement.endsWith('-end')) {
+            if (placement.startsWith('top') || placement.startsWith('bottom')) {
+                left = triggerRect.right - panelRect.width;
+            }
+            else {
+                top = triggerRect.bottom - panelRect.height;
+            }
+        }
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        left = Math.max(8, Math.min(left, vw - panelRect.width - 8));
+        top = Math.max(8, Math.min(top, vh - panelRect.height - 8));
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
     }
-    /**
-     * Open the popconfirm
-     */
     openPopconfirm() {
         this.open = true;
-        if (this.dropdownElement) {
-            this.dropdownElement.show();
-        }
         this.dispatchEvent(new CustomEvent('nr-open-change', {
             bubbles: true,
             composed: true,
             detail: { open: true },
         }));
     }
-    /**
-     * Handle clicks outside the popconfirm to close it
-     */
+    closePopconfirm() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('nr-open-change', {
+            bubbles: true,
+            composed: true,
+            detail: { open: false },
+        }));
+    }
     handleOutsideClick(e) {
         if (!this.open)
             return;
         const path = e.composedPath();
-        if (!path.includes(this)) {
-            this.closePopconfirm();
-        }
+        if (path.includes(this))
+            return;
+        if (this._portalHost && path.includes(this._portalHost))
+            return;
+        this.closePopconfirm();
     }
-    /**
-     * Handle escape key to close popconfirm
-     */
     handleKeydown(e) {
         if (e.key === 'Escape' && this.open) {
             this.closePopconfirm();
         }
     }
-    /**
-     * Close the popconfirm
-     */
-    closePopconfirm() {
-        this.open = false;
-        if (this.dropdownElement) {
-            this.dropdownElement.hide();
-        }
-        this.dispatchEvent(new CustomEvent('nr-open-change', {
-            bubbles: true,
-            composed: true,
-            detail: { open: false },
-        }));
-    }
-    /**
-     * Get icon color based on icon type
-     */
     getIconColor() {
-        if (this.iconColor) {
-            return this.iconColor;
-        }
-        // Return empty string to use CSS class colors
-        return '';
+        return this.iconColor || '';
     }
-    /**
-     * Get icon class based on icon type
-     */
     getIconClass() {
         const iconColorMap = {
             ["exclamation-circle" /* PopconfirmIcon.Warning */]: 'warning',
@@ -293,14 +303,10 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
             ["close-circle" /* PopconfirmIcon.Error */]: 'error',
             ["check-circle" /* PopconfirmIcon.Success */]: 'success',
         };
-        if (this.iconColor) {
+        if (this.iconColor)
             return 'custom';
-        }
         return iconColorMap[this.icon] || 'warning';
     }
-    /**
-     * Render the popconfirm content
-     */
     renderContent() {
         const iconClass = this.getIconClass();
         const iconColor = this.getIconColor();
@@ -346,19 +352,9 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
     }
     render() {
         return html `
-      <nr-dropdown
-        .open=${this.open}
-        .placement=${this.placement}
-        trigger="manual"
-        ?disabled=${this.disabled}
-        ?arrow=${this.arrow}
-        .closeOnOutsideClick=${false}
-        .closeOnEscape=${false}>
-        <div slot="trigger" part="trigger" @click=${this.handleTriggerClick}>
-          <slot name="trigger"></slot>
-        </div>
-        <div slot="content">${this.renderContent()}</div>
-      </nr-dropdown>
+      <div class="popconfirm-trigger" part="trigger" @click=${this.handleTriggerClick}>
+        <slot name="trigger"></slot>
+      </div>
     `;
     }
 };

package/dist/src/components/popconfirm/popconfirm.style.js

@@ -4,6 +4,100 @@ export const styles = css `
     display: inline-block;
   }
 
+  .popconfirm-trigger {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .popconfirm-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2147483000;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    box-sizing: border-box;
+    min-width: 200px;
+    max-width: 400px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  .popconfirm-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  .popconfirm-panel--top .popconfirm-arrow,
+  .popconfirm-panel--top-start .popconfirm-arrow,
+  .popconfirm-panel--top-end .popconfirm-arrow {
+    bottom: -5px;
+    border-top: none;
+    border-left: none;
+  }
+
+  .popconfirm-panel--bottom .popconfirm-arrow,
+  .popconfirm-panel--bottom-start .popconfirm-arrow,
+  .popconfirm-panel--bottom-end .popconfirm-arrow {
+    top: -5px;
+    border-bottom: none;
+    border-right: none;
+  }
+
+  .popconfirm-panel--left .popconfirm-arrow,
+  .popconfirm-panel--left-start .popconfirm-arrow,
+  .popconfirm-panel--left-end .popconfirm-arrow {
+    right: -5px;
+    border-bottom: none;
+    border-left: none;
+  }
+
+  .popconfirm-panel--right .popconfirm-arrow,
+  .popconfirm-panel--right-start .popconfirm-arrow,
+  .popconfirm-panel--right-end .popconfirm-arrow {
+    left: -5px;
+    border-top: none;
+    border-right: none;
+  }
+
+  .popconfirm-panel--top .popconfirm-arrow,
+  .popconfirm-panel--bottom .popconfirm-arrow {
+    left: 50%;
+    margin-left: -4px;
+  }
+
+  .popconfirm-panel--top-start .popconfirm-arrow,
+  .popconfirm-panel--bottom-start .popconfirm-arrow {
+    left: 12px;
+  }
+
+  .popconfirm-panel--top-end .popconfirm-arrow,
+  .popconfirm-panel--bottom-end .popconfirm-arrow {
+    right: 12px;
+  }
+
+  .popconfirm-panel--left .popconfirm-arrow,
+  .popconfirm-panel--right .popconfirm-arrow {
+    top: 50%;
+    margin-top: -4px;
+  }
+
+  .popconfirm-panel--left-start .popconfirm-arrow,
+  .popconfirm-panel--right-start .popconfirm-arrow {
+    top: 12px;
+  }
+
+  .popconfirm-panel--left-end .popconfirm-arrow,
+  .popconfirm-panel--right-end .popconfirm-arrow {
+    bottom: 12px;
+  }
+
   .popconfirm-content {
     display: flex;
     flex-direction: column;

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

@@ -507,11 +507,12 @@ const y=t`
 var $=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o},z=function(t,e,i,s){return new(i||(i=Promise))(function(n,r){function o(t){try{c(s.next(t))}catch(t){r(t)}}function a(t){try{c(s.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i(function(t){t(e)})).then(o,a)}c((s=s.apply(t,e||[])).next())})};const S="__group__";let C=class extends(v(s)){constructor(){super(...arguments),this.namespace="",this.socketPath="/__nk_socketio/",this.resourceId="",this.resourceType="",this.resourceName="",this.userId="",this.currentUser=null,this.extraUsers=[],this.globalSocket=null,this._viewers=[],this._hasUnreadGroup=!1,this._socket=null,this._connecting=!1,this._chats=new Map,this._chatZ=100,this._drag=null,this._boundDragMove=t=>this._onDragMove(t),this._boundDragEnd=()=>this._onDragEnd(),this._boundEscape=t=>this._onEscape(t),this._boundOnMessage=t=>this._onSocketMessage(t),this._groupConversationId=null}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._boundEscape),this._connect(),this._attachGlobalSocket()}disconnectedCallback(){var t;super.disconnectedCallback(),document.removeEventListener("keydown",this._boundEscape),document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd),null===(t=this._socket)||void 0===t||t.disconnect(),this._socket=null,this._detachGlobalSocket()}updated(t){t.has("globalSocket")&&(this._detachGlobalSocket(t.get("globalSocket")),this._attachGlobalSocket()),!this._socket&&(t.has("userId")||t.has("resourceId")||t.has("namespace"))&&this.userId&&this.resourceId&&this.namespace&&this._connect()}_attachGlobalSocket(){this.globalSocket&&this.globalSocket.on("nk:data",this._boundOnMessage)}_detachGlobalSocket(t){const e=t||this.globalSocket;e&&e.off("nk:data",this._boundOnMessage)}_onSocketMessage(t){if("message:new"!==t.event)return;const e=t.data;if((null==e?void 0:e.conversationId)&&e.senderId!==this.userId){for(const[,t]of this._chats)if(t.conversationId===e.conversationId)return t.messages=[...t.messages,{id:String(e.id),senderId:e.senderId,text:e.content,timestamp:new Date(e.createdAt).getTime(),me:!1}],void this.requestUpdate();this._groupConversationId&&e.conversationId===this._groupConversationId&&(this._hasUnreadGroup=!0)}}_connect(){return z(this,void 0,void 0,function*(){if(!this._socket&&!this._connecting&&this.userId&&this.resourceId&&this.namespace){this._connecting=!0;try{const{io:t}=yield import("socket.io-client");this._socket=t(this.namespace,{path:this.socketPath,query:{i:JSON.stringify({userId:this.userId,resourceId:this.resourceId})}}),this._socket.on("nk:data",t=>{var e;const i=t.event;"presence:viewers"!==i&&"presence:joined"!==i&&"presence:left"!==i||(this._viewers=(null===(e=t.data)||void 0===e?void 0:e.viewers)||[],this.dispatchEvent(new CustomEvent("presence-changed",{detail:{viewers:this._viewers},bubbles:!0,composed:!0})))})}catch(t){console.error("[nr-presence] Connection failed:",t)}finally{this._connecting=!1}}})}_openGroupChat(){return z(this,void 0,void 0,function*(){var t;if(this._chats.has(S)){const t=this._chats.get(S);return t.minimized=!1,t.z=++this._chatZ,this._hasUnreadGroup=!1,void this.requestUpdate()}const e=window.innerWidth-324;this._chats.set(S,{user:{displayName:this.resourceName||`${this.resourceType} chat`,color:"#7c3aed",initials:"#"},conversationId:null,loading:!0,x:e,y:56,savedX:e,savedY:56,z:++this._chatZ,minimized:!1,messages:[],draftText:""}),this._hasUnreadGroup=!1,this.requestUpdate();try{const e=yield fetch("/api/conversations/resource",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({resourceType:this.resourceType,resourceId:this.resourceId,resourceName:this.resourceName})}),i=yield e.json(),s=this._chats.get(S);if(!s||!i.conversationId)return s&&(s.loading=!1),void this.requestUpdate();s.conversationId=i.conversationId,this._groupConversationId=i.conversationId,(null===(t=this.globalSocket)||void 0===t?void 0:t.connected)&&this.globalSocket.emit("nk:conversation:join",{conversationId:i.conversationId}),yield this._loadMessages(s)}catch(t){console.error("[nr-presence] Failed to open group chat:",t);const e=this._chats.get(S);e&&(e.loading=!1)}this.requestUpdate()})}_openDm(t){return z(this,void 0,void 0,function*(){var e;const i=t.userId||t.displayName;if(i===this.userId)return void this._openGroupChat();if(this._chats.has(i))return this._chats.get(i).z=++this._chatZ,void this.requestUpdate();const s=[...this._chats.keys()].filter(t=>t!==S).length,n=window.innerWidth-324-24*(s+1),r=56+24*(s+1);if(this._chats.set(i,{user:t,conversationId:null,loading:!0,x:n,y:r,savedX:n,savedY:r,z:++this._chatZ,minimized:!1,messages:[],draftText:""}),this.requestUpdate(),t.userId){try{const s=yield fetch("/api/conversations/dm",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({targetUserId:t.userId})}),n=yield s.json(),r=this._chats.get(i);if(!r||!n.conversationId)return r&&(r.loading=!1),void this.requestUpdate();r.conversationId=n.conversationId,(null===(e=this.globalSocket)||void 0===e?void 0:e.connected)&&this.globalSocket.emit("nk:conversation:join",{conversationId:n.conversationId}),yield this._loadMessages(r)}catch(t){console.error("[nr-presence] Failed to open DM:",t);const e=this._chats.get(i);e&&(e.loading=!1)}this.requestUpdate()}})}_loadMessages(t){return z(this,void 0,void 0,function*(){var e;if(t.conversationId){try{const i=yield fetch(`/api/conversations/${t.conversationId}/messages`),s=yield i.json();(null===(e=s.messages)||void 0===e?void 0:e.length)&&(t.messages=s.messages.map(t=>({id:String(t.id),senderId:t.sender_id,text:t.content,timestamp:new Date(t.created_at).getTime(),me:t.sender_id===this.userId})))}catch(t){console.error("[nr-presence] Failed to load messages:",t)}t.loading=!1}})}_sendMessage(t,e){var i;const s=this._chats.get(t);(null==s?void 0:s.conversationId)&&(s.messages=[...s.messages,{id:crypto.randomUUID(),senderId:this.userId,text:e,timestamp:Date.now(),me:!0}],this.requestUpdate(),(null===(i=this.globalSocket)||void 0===i?void 0:i.connected)&&this.globalSocket.emit("nk:message:send",{conversationId:s.conversationId,content:e,type:"text"}))}_closeChat(t){this._chats.delete(t),this.requestUpdate()}_onEscape(t){if("Escape"!==t.key||0===this._chats.size)return;let e="",i=-1;for(const[t,s]of this._chats)s.z>i&&(i=s.z,e=t);if(!e)return;const s=this._chats.get(e);s.minimized?this._closeChat(e):(s.savedX=s.x,s.savedY=s.y,s.minimized=!0,this.requestUpdate())}_onDragStart(t,e,i){const s=this._chats.get(t);s&&(s.z=++this._chatZ,this._drag={userId:t,ox:e,oy:i},document.addEventListener("mousemove",this._boundDragMove),document.addEventListener("mouseup",this._boundDragEnd))}_onDragMove(t){if(!this._drag)return;const e=this._chats.get(this._drag.userId);e&&(e.x=Math.max(0,Math.min(window.innerWidth-300,t.clientX-this._drag.ox)),e.y=Math.max(0,Math.min(window.innerHeight-60,t.clientY-this._drag.oy)),this.requestUpdate())}_onDragEnd(){this._drag=null,document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd)}render(){const t=this.currentUser,s=[...t?[t]:[],...this._viewers.filter(e=>!t||e.userId!==t.userId),...this.extraUsers],n=[...this._chats.entries()].filter(([,t])=>t.minimized);return e`
       <nr-presence-avatars
         .users=${s}
+        part="avatars"
         @user-click=${t=>this._openDm(t.detail.user)}
       ></nr-presence-avatars>
 
       ${this.resourceType?e`
-        <button class="group-chat-btn" title="Team chat" @click=${()=>this._openGroupChat()}>
+        <button class="group-chat-btn" part="group-chat-button" 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>

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

@@ -411,11 +411,12 @@ let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitEle
         return html `
       <nr-presence-avatars
         .users=${allUsers}
+        part="avatars"
         @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()}>
+        <button class="group-chat-btn" part="group-chat-button" 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>

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

@@ -939,7 +939,7 @@ var E=function(t,e,i,n){for(var o,s=arguments.length,r=s<3?e:null===n?n=Object.g
       <button @click=${d.onCancelSelection}>Cancel</button>
     </div>
   `):this.withFilter?e`
-            <div class="filter-container">
+            <div class="filter-container" part="filter">
               ${function(t){return e`
     <div class="filter-container">
       ${t.showInput?e`
@@ -960,7 +960,8 @@ var E=function(t,e,i,n){for(var o,s=arguments.length,r=s<3?e:null===n?n=Object.g
             </div>
           `:i}
 
-      <div class="table-content-wrapper ${this.fixedHeader?"fixed-header":""}" 
+      <div class="table-content-wrapper ${this.fixedHeader?"fixed-header":""}"
+           part="wrapper"
            style="${(null===(t=this.scrollConfig)||void 0===t?void 0:t.y)?`${this.fixedHeader?"height":"max-height"}: ${"number"==typeof this.scrollConfig.y?this.scrollConfig.y+"px":this.scrollConfig.y};`:""}
                   ${(null===(n=this.scrollConfig)||void 0===n?void 0:n.x)?`${this.fixedHeader?"width":"max-width"}: ${"number"==typeof this.scrollConfig.x?this.scrollConfig.x+"px":this.scrollConfig.x};`:""}">
         ${P({headers:this.headers,rows:this.displayedRows,expandable:this.expandable&&!this.selectionMode?this.expandable:void 0,expansionRenderer:this.selectionMode?void 0:this.expansionRenderer,selectionMode:this.selectionMode&&!this.withFilter?this.selectionMode:void 0,selectedItems:this.selectedItems,currentPage:this.currentPage,itemPerPage:this.selectedItemPerPage,sortAttribute:this.sortAttribute,expand:this.expand,columnFilters:this.columnFilters,activeFilterColumn:this.activeFilterColumn,loading:this.loading,host:this,clickable:this.clickable,onCheckAll:()=>{const t=(this.currentPage-1)*this.selectedItemPerPage,e=Math.min(t+this.selectedItemPerPage,this.selectedItems.length),i=this.selectedItems.slice(t,e),n=i.every(t=>t)&&i.length>0;this._handleCheckAll({detail:{isEveryItemChecked:n}})},onCheckOne:(t,e)=>this._handleCheckOne({detail:{index:e,value:t.detail.checked}}),onSelectOne:t=>this._handleSelectOne({detail:{index:t}}),onUpdateSort:t=>this._handleSortOrder({detail:{index:t}}),onShowExpandedContent:t=>this._showExpandedContent(t),onToggleColumnFilter:t=>this.filterController.toggleColumnFilterDropdown(t),onApplyColumnFilter:(t,e)=>this.filterController.applyColumnFilter(t,e),onClearColumnFilter:t=>this.filterController.clearColumnFilter(t),onRowClick:(t,e)=>{this.clickable&&this.dispatchEvent(new CustomEvent("nr-row-click",{detail:{row:t,index:e},bubbles:!0,composed:!0}))}})}

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

@@ -255,7 +255,7 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
             })
             : this.withFilter
                 ? html `
-            <div class="filter-container">
+            <div class="filter-container" part="filter">
               ${renderFilterTemplate({
                     showInput: this.showFilterInput,
                     value: this.filterValue,
@@ -266,7 +266,8 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
           `
                 : nothing}
 
-      <div class="table-content-wrapper ${this.fixedHeader ? 'fixed-header' : ''}" 
+      <div class="table-content-wrapper ${this.fixedHeader ? 'fixed-header' : ''}"
+           part="wrapper"
            style="${((_a = this.scrollConfig) === null || _a === void 0 ? void 0 : _a.y) ? `${this.fixedHeader ? 'height' : 'max-height'}: ${typeof this.scrollConfig.y === 'number' ? this.scrollConfig.y + 'px' : this.scrollConfig.y};` : ''}
                   ${((_b = this.scrollConfig) === null || _b === void 0 ? void 0 : _b.x) ? `${this.fixedHeader ? 'width' : 'max-width'}: ${typeof this.scrollConfig.x === 'number' ? this.scrollConfig.x + 'px' : this.scrollConfig.x};` : ''}">
         ${renderContentTemplate({