@nuraly/lumenui 0.2.1 → 0.2.2

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

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import type { PresenceUser } from './presence.types.js';
+import './presence-avatars.component.js';
+import './presence-chat.component.js';
+declare const NrPresenceElement_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;
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <nr-presence
+ *   namespace="/nk/apps/workflows/socket"
+ *   socket-path="/__nk_socketio/"
+ *   resource-id="workflow-abc123"
+ *   user-id="user-xyz"
+ *   .currentUser=${{ displayName, initials, color, avatarUrl }}
+ *   .extraUsers=${[...mockUsers]}
+ * ></nr-presence>
+ * ```
+ *
+ * @fires presence-changed - Fires when viewer list updates. Detail: `{ viewers: PresenceUser[] }`
+ */
+export declare class NrPresenceElement extends NrPresenceElement_base {
+    static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
+    /** Socket.io namespace */
+    namespace: string;
+    /** Socket.io path */
+    socketPath: string;
+    /** The resource being viewed (workflow id, doc id, etc.) */
+    resourceId: string;
+    /** Current user's id */
+    userId: string;
+    /** Current user object (shown first in avatar strip) */
+    currentUser: PresenceUser | null;
+    /** Additional users to show (e.g. mocks for demo) */
+    extraUsers: PresenceUser[];
+    private _viewers;
+    private _socket;
+    private _chats;
+    private _chatZ;
+    private _drag;
+    private _boundDragMove;
+    private _boundDragEnd;
+    private _boundEscape;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _connect;
+    private _openChat;
+    private _closeChat;
+    private _onEscape;
+    private _onDragStart;
+    private _onDragMove;
+    private _onDragEnd;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-presence': NrPresenceElement;
+    }
+}
+export {};
+//# sourceMappingURL=presence.component.d.ts.map

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

@@ -0,0 +1,263 @@
+/**
+ * @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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html, nothing } 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';
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <nr-presence
+ *   namespace="/nk/apps/workflows/socket"
+ *   socket-path="/__nk_socketio/"
+ *   resource-id="workflow-abc123"
+ *   user-id="user-xyz"
+ *   .currentUser=${{ displayName, initials, color, avatarUrl }}
+ *   .extraUsers=${[...mockUsers]}
+ * ></nr-presence>
+ * ```
+ *
+ * @fires presence-changed - Fires when viewer list updates. Detail: `{ viewers: PresenceUser[] }`
+ */
+let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Socket.io namespace */
+        this.namespace = '';
+        /** Socket.io path */
+        this.socketPath = '/__nk_socketio/';
+        /** The resource being viewed (workflow id, doc id, etc.) */
+        this.resourceId = '';
+        /** 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 = [];
+        this._viewers = [];
+        this._socket = null;
+        this._chats = new Map();
+        this._chatZ = 100;
+        this._drag = null;
+        this._boundDragMove = (e) => this._onDragMove(e);
+        this._boundDragEnd = () => this._onDragEnd();
+        this._boundEscape = (e) => this._onEscape(e);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this._boundEscape);
+        this._connect();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._boundEscape);
+        document.removeEventListener('mousemove', this._boundDragMove);
+        document.removeEventListener('mouseup', this._boundDragEnd);
+        (_a = this._socket) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._socket = null;
+    }
+    _connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.userId || !this.resourceId || !this.namespace)
+                return;
+            try {
+                const { io } = yield import('socket.io-client');
+                this._socket = io(this.namespace, {
+                    path: this.socketPath,
+                    query: { __params: JSON.stringify({ userId: this.userId, resourceId: this.resourceId }) },
+                });
+                this._socket.on('nk:data', (data) => {
+                    var _a;
+                    const ev = data.event;
+                    if (ev === 'presence:viewers' || ev === 'presence:joined' || ev === 'presence:left') {
+                        this._viewers = ((_a = data.data) === null || _a === void 0 ? void 0 : _a.viewers) || [];
+                        this.dispatchEvent(new CustomEvent('presence-changed', {
+                            detail: { viewers: this._viewers },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    }
+                });
+            }
+            catch (e) {
+                console.error('[nr-presence] Connection failed:', e);
+            }
+        });
+    }
+    _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;
+            this._chats.set(key, {
+                user, x: ix, y: iy, savedX: ix, savedY: iy,
+                z: ++this._chatZ, minimized: false, messages: [], draftText: '',
+            });
+        }
+        this.requestUpdate();
+    }
+    _closeChat(key) {
+        this._chats.delete(key);
+        this.requestUpdate();
+    }
+    _onEscape(e) {
+        if (e.key !== 'Escape' || this._chats.size === 0)
+            return;
+        let topKey = '';
+        let topZ = -1;
+        for (const [k, c] of this._chats) {
+            if (c.z > topZ) {
+                topZ = c.z;
+                topKey = k;
+            }
+        }
+        if (!topKey)
+            return;
+        const c = this._chats.get(topKey);
+        if (!c.minimized) {
+            c.savedX = c.x;
+            c.savedY = c.y;
+            c.minimized = true;
+            this.requestUpdate();
+        }
+        else {
+            this._closeChat(topKey);
+        }
+    }
+    _onDragStart(key, offsetX, offsetY) {
+        const c = this._chats.get(key);
+        if (!c)
+            return;
+        c.z = ++this._chatZ;
+        this._drag = { userId: key, ox: offsetX, oy: offsetY };
+        document.addEventListener('mousemove', this._boundDragMove);
+        document.addEventListener('mouseup', this._boundDragEnd);
+    }
+    _onDragMove(e) {
+        if (!this._drag)
+            return;
+        const c = this._chats.get(this._drag.userId);
+        if (!c)
+            return;
+        c.x = Math.max(0, Math.min(window.innerWidth - 300, e.clientX - this._drag.ox));
+        c.y = Math.max(0, Math.min(window.innerHeight - 60, e.clientY - this._drag.oy));
+        this.requestUpdate();
+    }
+    _onDragEnd() {
+        this._drag = null;
+        document.removeEventListener('mousemove', this._boundDragMove);
+        document.removeEventListener('mouseup', this._boundDragEnd);
+    }
+    render() {
+        const cu = this.currentUser;
+        const allUsers = [
+            ...(cu ? [cu] : []),
+            ...this._viewers.filter(v => !cu || v.userId !== cu.userId),
+            ...this.extraUsers,
+        ];
+        const minimizedList = [...this._chats.entries()].filter(([, c]) => c.minimized);
+        return html `
+      <nr-presence-avatars
+        .users=${allUsers}
+        @user-click=${(e) => this._openChat(e.detail.user)}
+      ></nr-presence-avatars>
+
+      ${[...this._chats.entries()].map(([key, c]) => {
+            const minIdx = minimizedList.findIndex(([k]) => k === key);
+            return html `
+          <nr-presence-chat
+            .user=${c.user}
+            .x=${c.x}
+            .y=${c.y}
+            .z=${c.z}
+            .minimized=${c.minimized}
+            .minimizedIndex=${minIdx >= 0 ? minIdx : 0}
+            .messages=${c.messages}
+            @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(); }}
+            @restore=${() => {
+                c.x = Math.max(0, window.innerWidth - (12 + minIdx * 212) - 300);
+                c.y = Math.max(0, window.innerHeight - 420 - 56);
+                c.minimized = false;
+                c.z = ++this._chatZ;
+                this.requestUpdate();
+            }}
+            @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();
+            }}
+          ></nr-presence-chat>
+        `;
+        })}
+
+      ${this._chats.size === 0 ? nothing : nothing}
+    `;
+    }
+};
+NrPresenceElement.styles = styles;
+NrPresenceElement.useShadowDom = true;
+__decorate([
+    property({ type: String })
+], NrPresenceElement.prototype, "namespace", void 0);
+__decorate([
+    property({ type: String, attribute: 'socket-path' })
+], NrPresenceElement.prototype, "socketPath", void 0);
+__decorate([
+    property({ type: String, attribute: 'resource-id' })
+], NrPresenceElement.prototype, "resourceId", void 0);
+__decorate([
+    property({ type: String, attribute: 'user-id' })
+], NrPresenceElement.prototype, "userId", void 0);
+__decorate([
+    property({ type: Object })
+], NrPresenceElement.prototype, "currentUser", void 0);
+__decorate([
+    property({ type: Array })
+], NrPresenceElement.prototype, "extraUsers", void 0);
+__decorate([
+    state()
+], NrPresenceElement.prototype, "_viewers", void 0);
+NrPresenceElement = __decorate([
+    customElement('nr-presence')
+], NrPresenceElement);
+export { NrPresenceElement };
+//# sourceMappingURL=presence.component.js.map

package/dist/src/components/presence/presence.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.style.d.ts.map

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+//# sourceMappingURL=presence.style.js.map

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

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export interface PresenceUser {
+    userId?: string;
+    displayName: string;
+    initials?: string;
+    color: string;
+    avatarUrl?: string | null;
+}
+export interface PresenceChatMessage {
+    id: string;
+    senderId: string;
+    text: string;
+    timestamp: number;
+    me: boolean;
+}
+export interface PresenceChatState {
+    user: PresenceUser;
+    x: number;
+    y: number;
+    savedX: number;
+    savedY: number;
+    z: number;
+    minimized: boolean;
+    messages: PresenceChatMessage[];
+    draftText: string;
+}
+//# sourceMappingURL=presence.types.d.ts.map

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=presence.types.js.map

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

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { NrPresenceElement } from './presence.component.js';
+import { NrPresenceAvatarsElement } from './presence-avatars.component.js';
+import { NrPresenceChatElement } from './presence-chat.component.js';
+export declare const NrPresence: import("@lit-labs/react").ReactWebComponent<NrPresenceElement, {
+    'presence-changed': string;
+}>;
+export declare const NrPresenceAvatars: import("@lit-labs/react").ReactWebComponent<NrPresenceAvatarsElement, {
+    'user-click': string;
+}>;
+export declare const NrPresenceChat: import("@lit-labs/react").ReactWebComponent<NrPresenceChatElement, {
+    'drag-start': string;
+    minimize: string;
+    restore: string;
+    float: string;
+    close: string;
+    send: string;
+    focus: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrPresenceElement } from './presence.component.js';
+import { NrPresenceAvatarsElement } from './presence-avatars.component.js';
+import { NrPresenceChatElement } from './presence-chat.component.js';
+export const NrPresence = createComponent({
+    tagName: 'nr-presence',
+    elementClass: NrPresenceElement,
+    react: React,
+    events: {
+        'presence-changed': 'presence-changed',
+    },
+});
+export const NrPresenceAvatars = createComponent({
+    tagName: 'nr-presence-avatars',
+    elementClass: NrPresenceAvatarsElement,
+    react: React,
+    events: {
+        'user-click': 'user-click',
+    },
+});
+export const NrPresenceChat = createComponent({
+    tagName: 'nr-presence-chat',
+    elementClass: NrPresenceChatElement,
+    react: React,
+    events: {
+        'drag-start': 'drag-start',
+        'minimize': 'minimize',
+        'restore': 'restore',
+        'float': 'float',
+        'close': 'close',
+        'send': 'send',
+        'focus': 'focus',
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/radio-group/controllers/focus.controller.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { FocusController } from '../interfaces/focus-controller.interface.js';
+/**
+ * Controller that manages focus state and focus handling for radio groups
+ * Implements proper focus management with accessibility compliance
+ *
+ * Features:
+ * - Tracks focused radio option index
+ * - Manages focus state transitions
+ * - Provides focus/blur methods for programmatic control
+ * - Handles roving tabindex for accessibility
+ *
+ * @example
+ * ```typescript
+ * const controller = new RadioFocusController(hostElement);
+ * controller.setFocusedOption(1); // Focus second option
+ * controller.focus(); // Programmatically focus the group
+ * ```
+ */
+export declare class RadioFocusController implements FocusController {
+    private host;
+    private _focusedIndex;
+    private _hasFocus;
+    private boundFocusInHandler;
+    private boundFocusOutHandler;
+    /**
+     * Creates a new RadioFocusController instance
+     * Sets up event handlers for focus management
+     *
+     * @param host - The host radio element
+     */
+    constructor(host: any);
+    /**
+     * Called when the host element is connected to the DOM
+     * Sets up focus event listeners for the radio group
+     */
+    hostConnected(): void;
+    /**
+     * Called when the host element is disconnected from the DOM
+     * Removes focus event listeners to prevent memory leaks
+     */
+    hostDisconnected(): void;
+    /**
+     * Gets the index of the currently focused radio option
+     *
+     * @returns The focused option index, -1 if none focused
+     *
+     * @example
+     * ```typescript
+     * const index = controller.focusedIndex;
+     * console.log(`Option ${index} is focused`);
+     * ```
+     */
+    get focusedIndex(): number;
+    /**
+     * Checks if the radio group currently has focus
+     *
+     * @returns True if any option in the group has focus, false otherwise
+     *
+     * @example
+     * ```typescript
+     * if (controller.hasFocus) {
+     *   console.log('Radio group is focused');
+     * }
+     * ```
+     */
+    get hasFocus(): boolean;
+    /**
+     * Sets the focused option by index
+     * Updates internal state and triggers re-render if needed
+     *
+     * @param index - The index of the option to focus
+     *
+     * @example
+     * ```typescript
+     * controller.setFocusedOption(2); // Focus third option
+     * ```
+     */
+    setFocusedOption(index: number): void;
+    /**
+     * Get the currently focused option index (method version for interface compliance)
+     * @returns The focused option index or -1 if none focused
+     */
+    getFocusedIndex(): number;
+    clearFocus(): void;
+    private handleFocusIn;
+    private handleFocusOut;
+    focus(): void;
+    blur(): void;
+    private focusOptionAtIndex;
+    updateTabIndices(focusedIndex?: number): void;
+    hostUpdated(): void;
+}
+//# sourceMappingURL=focus.controller.d.ts.map