@nuraly/lumenui 0.3.5 → 0.3.7

package/dist/src/components/canvas/controllers/collaboration.controller.d.ts

@@ -4,36 +4,49 @@
  * SPDX-License-Identifier: MIT
  */
 import { BaseCanvasController } from './base.controller.js';
-import type { CanvasOperationType, CollaborationState, CollaborationUser, RemoteCursor } from '../interfaces/collaboration.interface.js';
+import type { CanvasOperationType, CollaborationState, CollaborationUser, NodeLock, RemoteCursor } from '../interfaces/collaboration.interface.js';
 /**
  * CollaborationController manages real-time collaboration via Socket.IO.
- * Connects to the existing Canvas Gateway at /socket.io/presence.
+ * Uses the LumenJS page socket (path `/__nk_socketio/`, namespace
+ * `/nk<pathname>`). Wire format: all server→client traffic arrives on the
+ * single `nk:data` event carrying `{ event, data }`; client→server uses
+ * `nk:<event>` which the server binds via `on('<event>', …)`.
  */
 export declare class CollaborationController extends BaseCanvasController {
     private socket;
     private staleCursorInterval;
+    private keepaliveInterval;
     private lastCursorBroadcast;
     private cursorThrottleTimer;
+    private myUserId;
     private state;
     private opCounter;
-    connect(canvasId: string, canvasType?: 'WORKFLOW' | 'WHITEBOARD'): void;
+    private myHeldLocks;
+    /**
+     * Connect via the LumenJS page socket.
+     * @param canvasId  workflow/whiteboard id (for local state tracking only)
+     * @param namespace LumenJS namespace, e.g. `/nk/apps/workflows/<id>`
+     * @param userId    current user id (used to identify ownership of locks)
+     */
+    connect(canvasId: string, namespace: string, userId: string): void;
     disconnect(): void;
     hostDisconnected(): void;
-    private registerEventHandlers;
+    private handleWireMessage;
     broadcastCursorMove(x: number, y: number): void;
     private emitCursorMove;
     broadcastSelectionChange(elementIds: string[]): void;
     broadcastTypingStart(elementId: string): void;
     broadcastTypingStop(elementId: string): void;
     broadcastOperation(type: CanvasOperationType, elementId: string, data: Record<string, unknown>): void;
-    private handleUsersSync;
-    private handleUserJoined;
-    private handleUserLeft;
-    private handleCursorUpdate;
-    private handleSelectionUpdate;
-    private handleTypingIndicator;
+    /** Acquire an edit lock for a node. Server broadcasts lock:state on grant. */
+    acquireLock(nodeId: string): void;
+    /** Release a lock this user holds. */
+    releaseLock(nodeId: string): void;
+    /** Whether a remote user is currently editing this node. */
+    getRemoteLock(nodeId: string): NodeLock | null;
+    private ensureKeepalive;
+    private handleLockState;
     private handleOperationReceived;
-    private handleOperationAck;
     private applyRemoteOperation;
     getState(): CollaborationState;
     isConnected(): boolean;

package/dist/src/components/canvas/controllers/collaboration.controller.js

@@ -8,17 +8,23 @@ import { BaseCanvasController } from './base.controller.js';
 const CURSOR_THROTTLE_MS = 33;
 const STALE_CURSOR_MS = 10000;
 const STALE_CURSOR_CHECK_MS = 5000;
+const LOCK_KEEPALIVE_MS = 10000;
 /**
  * CollaborationController manages real-time collaboration via Socket.IO.
- * Connects to the existing Canvas Gateway at /socket.io/presence.
+ * Uses the LumenJS page socket (path `/__nk_socketio/`, namespace
+ * `/nk<pathname>`). Wire format: all server→client traffic arrives on the
+ * single `nk:data` event carrying `{ event, data }`; client→server uses
+ * `nk:<event>` which the server binds via `on('<event>', …)`.
  */
 export class CollaborationController extends BaseCanvasController {
     constructor() {
         super(...arguments);
         this.socket = null;
         this.staleCursorInterval = null;
+        this.keepaliveInterval = null;
         this.lastCursorBroadcast = 0;
         this.cursorThrottleTimer = null;
+        this.myUserId = '';
         this.state = {
             connected: false,
             canvasId: null,
@@ -26,42 +32,101 @@ export class CollaborationController extends BaseCanvasController {
             cursors: new Map(),
             selections: new Map(),
             typingIndicators: new Map(),
+            lockedNodes: new Map(),
             serverVersion: 0,
             pendingOps: new Map(),
         };
         this.opCounter = 0;
+        this.myHeldLocks = new Set();
     }
     // ==================== Lifecycle ====================
-    connect(canvasId, canvasType = 'WHITEBOARD') {
-        var _a;
+    /**
+     * Connect via the LumenJS page socket.
+     * @param canvasId  workflow/whiteboard id (for local state tracking only)
+     * @param namespace LumenJS namespace, e.g. `/nk/apps/workflows/<id>`
+     * @param userId    current user id (used to identify ownership of locks)
+     */
+    connect(canvasId, namespace, userId) {
+        var _a, _b, _c;
         if (((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) && this.state.canvasId === canvasId)
             return;
+        console.log('[collab] connect()', { canvasId, namespace, userId });
         this.disconnect();
         this.state.canvasId = canvasId;
+        this.myUserId = userId;
+        if (!namespace || !userId)
+            return;
         try {
-            const origin = globalThis.location.origin;
-            this.socket = io(origin, {
-                path: '/socket.io/presence',
+            this.socket = io(namespace, {
+                path: '/__nk_socketio/',
+                query: {
+                    __params: JSON.stringify({
+                        workflowId: canvasId,
+                        resourceId: canvasId,
+                        userId,
+                        source: 'canvas',
+                    }),
+                },
+                // Force a dedicated connection — the LumenJS router already opens a
+                // socket to this same namespace; without forceNew, Socket.IO would
+                // hand us a cached instance whose `connect` event has already fired
+                // (we'd never hear it) and whose handshake query is from the router,
+                // not ours (server would treat this socket as not a canvas source).
+                forceNew: true,
                 transports: ['websocket', 'polling'],
                 reconnection: true,
                 reconnectionAttempts: Infinity,
                 reconnectionDelay: 1000,
             });
-            this.socket.on('connect', () => {
+            const onConnected = () => {
+                console.log('[collab] socket connected', { canvasId });
                 this.state.connected = true;
-                this.safeExecute(() => this.socket.emit('canvas:join', { canvasId, canvasType }), 'connect: canvas:join');
+                this.safeExecute(() => this.socket.emit('nk:canvas:lock:request'), 'connect: lock:request');
                 this._host.requestUpdate();
-            });
-            this.socket.on('disconnect', () => {
+            };
+            this.socket.on('connect', onConnected);
+            // If somehow the socket is already connected by the time we attach
+            // (Socket.IO reuse edge case), fire the handler manually.
+            if (this.socket.connected) {
+                console.log('[collab] socket already connected at attach time');
+                onConnected();
+            }
+            this.socket.on('disconnect', (reason) => {
+                console.log('[collab] socket disconnected', reason);
                 this.state.connected = false;
                 this._host.requestUpdate();
             });
-            this.socket.on('reconnect', () => {
-                this.safeExecute(() => this.socket.emit('canvas:join', { canvasId, canvasType }), 'reconnect: canvas:join');
+            this.socket.on('connect_error', (err) => {
+                console.warn('[collab] connect_error', err === null || err === void 0 ? void 0 : err.message);
+            });
+            this.socket.on('nk:data', (payload) => {
+                console.log('[collab] nk:data', payload === null || payload === void 0 ? void 0 : payload.event, payload === null || payload === void 0 ? void 0 : payload.data);
+                this.safeExecute(() => this.handleWireMessage(payload), 'handleWireMessage');
+            });
+            // Diagnostic probes — remove once the connection works.
+            console.log('[collab] post-io()', {
+                connected: this.socket.connected,
+                id: this.socket.id,
+                active: (_c = (_b = this.socket.io) === null || _b === void 0 ? void 0 : _b.engine) === null || _c === void 0 ? void 0 : _c.readyState,
             });
-            // Register inbound event handlers
-            this.registerEventHandlers();
-            // Start stale cursor cleanup
+            setTimeout(() => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                console.log('[collab] 1s probe', {
+                    connected: (_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected,
+                    id: (_b = this.socket) === null || _b === void 0 ? void 0 : _b.id,
+                    active: (_e = (_d = (_c = this.socket) === null || _c === void 0 ? void 0 : _c.io) === null || _d === void 0 ? void 0 : _d.engine) === null || _e === void 0 ? void 0 : _e.readyState,
+                    transport: (_j = (_h = (_g = (_f = this.socket) === null || _f === void 0 ? void 0 : _f.io) === null || _g === void 0 ? void 0 : _g.engine) === null || _h === void 0 ? void 0 : _h.transport) === null || _j === void 0 ? void 0 : _j.name,
+                });
+            }, 1000);
+            setTimeout(() => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                console.log('[collab] 3s probe', {
+                    connected: (_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected,
+                    id: (_b = this.socket) === null || _b === void 0 ? void 0 : _b.id,
+                    active: (_e = (_d = (_c = this.socket) === null || _c === void 0 ? void 0 : _c.io) === null || _d === void 0 ? void 0 : _d.engine) === null || _e === void 0 ? void 0 : _e.readyState,
+                    transport: (_j = (_h = (_g = (_f = this.socket) === null || _f === void 0 ? void 0 : _f.io) === null || _g === void 0 ? void 0 : _g.engine) === null || _h === void 0 ? void 0 : _h.transport) === null || _j === void 0 ? void 0 : _j.name,
+                });
+            }, 3000);
             this.staleCursorInterval = setInterval(() => this.cleanStaleCursors(), STALE_CURSOR_CHECK_MS);
         }
         catch (error) {
@@ -71,9 +136,6 @@ export class CollaborationController extends BaseCanvasController {
     disconnect() {
         if (this.socket) {
             this.safeExecute(() => {
-                if (this.state.canvasId) {
-                    this.socket.emit('canvas:leave', { canvasId: this.state.canvasId });
-                }
                 this.socket.removeAllListeners();
                 this.socket.disconnect();
             }, 'disconnect');
@@ -83,6 +145,10 @@ export class CollaborationController extends BaseCanvasController {
             clearInterval(this.staleCursorInterval);
             this.staleCursorInterval = null;
         }
+        if (this.keepaliveInterval) {
+            clearInterval(this.keepaliveInterval);
+            this.keepaliveInterval = null;
+        }
         if (this.cursorThrottleTimer) {
             clearTimeout(this.cursorThrottleTimer);
             this.cursorThrottleTimer = null;
@@ -94,41 +160,35 @@ export class CollaborationController extends BaseCanvasController {
             cursors: new Map(),
             selections: new Map(),
             typingIndicators: new Map(),
+            lockedNodes: new Map(),
             serverVersion: 0,
             pendingOps: new Map(),
         };
+        this.myHeldLocks.clear();
     }
     hostDisconnected() {
         this.disconnect();
     }
-    // ==================== Event Registration ====================
-    registerEventHandlers() {
-        if (!this.socket)
+    // ==================== Inbound routing ====================
+    handleWireMessage(payload) {
+        if (!(payload === null || payload === void 0 ? void 0 : payload.event))
             return;
-        this.socket.on('canvas:users:sync', (data) => {
-            this.safeExecute(() => this.handleUsersSync(data), 'handleUsersSync');
-        });
-        this.socket.on('canvas:user:joined', (data) => {
-            this.safeExecute(() => this.handleUserJoined(data), 'handleUserJoined');
-        });
-        this.socket.on('canvas:user:left', (data) => {
-            this.safeExecute(() => this.handleUserLeft(data), 'handleUserLeft');
-        });
-        this.socket.on('cursor:update', (data) => {
-            this.safeExecute(() => this.handleCursorUpdate(data), 'handleCursorUpdate');
-        });
-        this.socket.on('selection:update', (data) => {
-            this.safeExecute(() => this.handleSelectionUpdate(data), 'handleSelectionUpdate');
-        });
-        this.socket.on('typing:indicator', (data) => {
-            this.safeExecute(() => this.handleTypingIndicator(data), 'handleTypingIndicator');
-        });
-        this.socket.on('operation:received', (data) => {
-            this.safeExecute(() => this.handleOperationReceived(data), 'handleOperationReceived');
-        });
-        this.socket.on('operation:ack', (data) => {
-            this.safeExecute(() => this.handleOperationAck(data), 'handleOperationAck');
-        });
+        switch (payload.event) {
+            case 'canvas:op':
+                this.handleOperationReceived(payload.data);
+                break;
+            case 'canvas:lock:state':
+                this.handleLockState(payload.data);
+                break;
+            case 'canvas:lock:ack':
+                // Server-authoritative reply to an acquire attempt; lock:state follows,
+                // so no state change needed here — left as an extension point.
+                break;
+            default:
+                // Non-collaboration events (presence:*, execution:*) are handled by
+                // other listeners/components on the page; ignore here.
+                break;
+        }
     }
     // ==================== Outbound Methods ====================
     broadcastCursorMove(x, y) {
@@ -153,125 +213,121 @@ export class CollaborationController extends BaseCanvasController {
         if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
             return;
         this.lastCursorBroadcast = Date.now();
-        this.safeExecute(() => this.socket.emit('cursor:move', { canvasId: this.state.canvasId, x, y }), 'emitCursorMove');
+        this.safeExecute(() => this.socket.emit('nk:cursor:move', { x, y }), 'emitCursorMove');
     }
     broadcastSelectionChange(elementIds) {
         var _a;
         if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
             return;
-        this.safeExecute(() => this.socket.emit('selection:change', { canvasId: this.state.canvasId, elementIds }), 'broadcastSelectionChange');
+        this.safeExecute(() => this.socket.emit('nk:selection:change', { elementIds }), 'broadcastSelectionChange');
     }
     broadcastTypingStart(elementId) {
         var _a;
         if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
             return;
-        this.safeExecute(() => this.socket.emit('typing:start', { canvasId: this.state.canvasId, elementId }), 'broadcastTypingStart');
+        this.safeExecute(() => this.socket.emit('nk:typing:start', { elementId }), 'broadcastTypingStart');
     }
     broadcastTypingStop(elementId) {
         var _a;
         if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
             return;
-        this.safeExecute(() => this.socket.emit('typing:stop', { canvasId: this.state.canvasId, elementId }), 'broadcastTypingStop');
+        this.safeExecute(() => this.socket.emit('nk:typing:stop', { elementId }), 'broadcastTypingStop');
     }
     broadcastOperation(type, elementId, data) {
         var _a;
         if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
             return;
         const opId = `op_${Date.now()}_${++this.opCounter}`;
-        const operation = {
+        this.state.pendingOps.set(opId, {
             id: opId,
             type,
             elementId,
             data,
-            userId: '', // server fills this
+            userId: this.myUserId,
             timestamp: Date.now(),
             version: this.state.serverVersion,
-        };
-        this.state.pendingOps.set(opId, operation);
-        this.safeExecute(() => this.socket.emit('operation:apply', {
-            canvasId: this.state.canvasId,
-            operationType: type,
+        });
+        this.safeExecute(() => this.socket.emit('nk:canvas:op', {
+            id: opId,
+            type,
             elementId,
             data,
-            baseVersion: this.state.serverVersion,
         }), 'broadcastOperation');
     }
-    // ==================== Inbound Handlers ====================
-    handleUsersSync(data) {
-        if (data.canvasId !== this.state.canvasId)
+    // ==================== Lock methods ====================
+    /** Acquire an edit lock for a node. Server broadcasts lock:state on grant. */
+    acquireLock(nodeId) {
+        var _a, _b;
+        console.log('[collab] acquireLock()', { nodeId, connected: (_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected });
+        if (!((_b = this.socket) === null || _b === void 0 ? void 0 : _b.connected) || !nodeId)
             return;
-        this.state.users.clear();
-        for (const user of data.users) {
-            this.state.users.set(user.userId, user);
-        }
-        this._host.requestUpdate();
+        this.myHeldLocks.add(nodeId);
+        this.safeExecute(() => this.socket.emit('nk:canvas:lock:acquire', { nodeId }), 'acquireLock');
+        this.ensureKeepalive();
     }
-    handleUserJoined(data) {
-        if (data.canvasId !== this.state.canvasId)
+    /** Release a lock this user holds. */
+    releaseLock(nodeId) {
+        var _a, _b;
+        if (!nodeId)
             return;
-        this.state.users.set(data.user.userId, data.user);
-        this._host.requestUpdate();
+        console.log('[collab] releaseLock()', { nodeId, connected: (_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected });
+        const had = this.myHeldLocks.delete(nodeId);
+        if (((_b = this.socket) === null || _b === void 0 ? void 0 : _b.connected) && had) {
+            this.safeExecute(() => this.socket.emit('nk:canvas:lock:release', { nodeId }), 'releaseLock');
+        }
+        if (this.myHeldLocks.size === 0 && this.keepaliveInterval) {
+            clearInterval(this.keepaliveInterval);
+            this.keepaliveInterval = null;
+        }
     }
-    handleUserLeft(data) {
-        if (data.canvasId !== this.state.canvasId)
-            return;
-        this.state.users.delete(data.userId);
-        this.state.cursors.delete(data.userId);
-        this.state.selections.delete(data.userId);
-        this.state.typingIndicators.delete(data.userId);
-        this._host.requestUpdate();
+    /** Whether a remote user is currently editing this node. */
+    getRemoteLock(nodeId) {
+        const lock = this.state.lockedNodes.get(nodeId);
+        if (!lock)
+            return null;
+        if (lock.userId === this.myUserId)
+            return null;
+        return lock;
     }
-    handleCursorUpdate(data) {
-        if (data.canvasId !== this.state.canvasId)
+    ensureKeepalive() {
+        if (this.keepaliveInterval || this.myHeldLocks.size === 0)
             return;
-        this.state.cursors.set(data.userId, {
-            userId: data.userId,
-            username: data.username,
-            color: data.color,
-            x: data.x,
-            y: data.y,
-            lastUpdate: Date.now(),
-        });
-        this._host.requestUpdate();
+        this.keepaliveInterval = setInterval(() => {
+            var _a;
+            if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected))
+                return;
+            for (const nodeId of this.myHeldLocks) {
+                this.safeExecute(() => this.socket.emit('nk:canvas:lock:keepalive', { nodeId }), 'lockKeepalive');
+            }
+        }, LOCK_KEEPALIVE_MS);
     }
-    handleSelectionUpdate(data) {
-        if (data.canvasId !== this.state.canvasId)
+    handleLockState(data) {
+        if (!(data === null || data === void 0 ? void 0 : data.locks))
             return;
-        if (data.elementIds.length === 0) {
-            this.state.selections.delete(data.userId);
-        }
-        else {
-            this.state.selections.set(data.userId, {
-                userId: data.userId,
-                elementIds: data.elementIds,
-            });
+        this.state.lockedNodes.clear();
+        for (const [nodeId, lock] of Object.entries(data.locks)) {
+            this.state.lockedNodes.set(nodeId, lock);
         }
         this._host.requestUpdate();
     }
-    handleTypingIndicator(data) {
-        if (data.canvasId !== this.state.canvasId)
+    // ==================== Inbound Handlers ====================
+    handleOperationReceived(payload) {
+        var _a, _b, _c;
+        if (!payload || !payload.type)
             return;
-        if (data.isTyping) {
-            this.state.typingIndicators.set(data.userId, {
-                userId: data.userId,
-                elementId: data.elementId,
-                isTyping: true,
-            });
-        }
-        else {
-            this.state.typingIndicators.delete(data.userId);
-        }
-        this._host.requestUpdate();
-    }
-    handleOperationReceived(data) {
-        if (data.canvasId !== this.state.canvasId)
+        // Ignore the echo of our own op — we already applied it locally.
+        if (payload.userId && payload.userId === this.myUserId)
             return;
-        this.state.serverVersion = Math.max(this.state.serverVersion, data.operation.version);
-        this.applyRemoteOperation(data.operation);
-    }
-    handleOperationAck(data) {
-        this.state.pendingOps.delete(data.operationId);
-        this.state.serverVersion = Math.max(this.state.serverVersion, data.serverVersion);
+        const op = {
+            id: (_a = payload.id) !== null && _a !== void 0 ? _a : `remote_${Date.now()}`,
+            type: payload.type,
+            elementId: payload.elementId,
+            data: payload.data || {},
+            userId: (_b = payload.userId) !== null && _b !== void 0 ? _b : '',
+            timestamp: (_c = payload.timestamp) !== null && _c !== void 0 ? _c : Date.now(),
+            version: this.state.serverVersion,
+        };
+        this.applyRemoteOperation(op);
     }
     // ==================== Remote Operation Application ====================
     applyRemoteOperation(op) {

package/dist/src/components/canvas/controllers/selection.controller.js

@@ -115,6 +115,26 @@ export class SelectionController extends BaseCanvasController {
         this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: this._host.workflow.nodes.filter(n => !nodeIdsToDelete.has(n.id)), edges: this._host.workflow.edges.filter(e => !edgeIdsToDelete.has(e.id) &&
                 !nodeIdsToDelete.has(e.sourceNodeId) &&
                 !nodeIdsToDelete.has(e.targetNodeId)) }));
+        // Close config panel if the currently configured node is being deleted —
+        // otherwise it lingers pointing at a removed node.
+        if (this._host.configuredNode && nodeIdsToDelete.has(this._host.configuredNode.id)) {
+            this._host.configuredNode = null;
+        }
+        // Broadcast deletions so other collaborators' canvases apply the change.
+        // Node DELETE cascades edges on the receiver, so only broadcast explicit
+        // edges that were selected independently — cascade-deleted edges need no
+        // separate event.
+        const hostAny = this._host;
+        if (hostAny.collaborative && hostAny.collaborationController) {
+            for (const node of nodesToDelete) {
+                hostAny.collaborationController.broadcastOperation('DELETE', node.id, {});
+            }
+            for (const edge of edgesToDelete) {
+                if (edgeIdsToDelete.has(edge.id)) {
+                    hostAny.collaborationController.broadcastOperation('DELETE_CONNECTOR', edge.id, {});
+                }
+            }
+        }
         this.clearSelection();
         this._host.dispatchWorkflowChanged();
     }

package/dist/src/components/canvas/interfaces/collaboration.interface.d.ts

@@ -37,6 +37,13 @@ export interface CollaborationUser {
     isTyping?: boolean;
     typingElementId?: string;
 }
+export interface NodeLock {
+    userId: string;
+    displayName: string;
+    color: string;
+    acquiredAt: number;
+    expiresAt: number;
+}
 export interface CollaborationState {
     connected: boolean;
     canvasId: string | null;
@@ -51,6 +58,7 @@ export interface CollaborationState {
         elementId: string;
         isTyping: boolean;
     }>;
+    lockedNodes: Map<string, NodeLock>;
     serverVersion: number;
     pendingOps: Map<string, CanvasOperation>;
 }

package/dist/src/components/canvas/templates/index.d.ts

@@ -11,6 +11,7 @@ export { renderConfigPanelTemplate, type ConfigPanelTemplateData, type ConfigPan
 export { renderEdgesTemplate, renderEdgeTemplate, renderConnectionLineTemplate, type EdgesTemplateData, type EdgeCallbacks, } from './edges.template.js';
 export { renderWbSidebarTemplate, type WbSidebarTemplateData, } from './wb-sidebar.template.js';
 export { renderRemoteCursorsTemplate, type RemoteCursorsTemplateData, } from './remote-cursors.template.js';
+export { renderLockOverlayTemplate, type LockedNodeEntry, } from './lock-overlay.template.js';
 export { renderPresenceBarTemplate, type PresenceBarTemplateData, } from './presence-bar.template.js';
 export { renderChatbotPanelTemplate, type ChatbotPanelTemplateData, type ChatbotPanelCallbacks, } from './chatbot-panel.template.js';
 export { renderExpandedFrameTemplate, type FrameTemplateData, type FrameTemplateCallbacks, } from './frame.template.js';

package/dist/src/components/canvas/templates/index.js

@@ -19,6 +19,8 @@ export { renderEdgesTemplate, renderEdgeTemplate, renderConnectionLineTemplate,
 export { renderWbSidebarTemplate, } from './wb-sidebar.template.js';
 // Remote cursors template
 export { renderRemoteCursorsTemplate, } from './remote-cursors.template.js';
+// Node lock overlay template
+export { renderLockOverlayTemplate, } from './lock-overlay.template.js';
 // Presence bar template
 export { renderPresenceBarTemplate, } from './presence-bar.template.js';
 // Chatbot panel template

package/dist/src/components/canvas/templates/lock-overlay.template.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing } from 'lit';
+import type { NodeLock } from '../interfaces/collaboration.interface.js';
+export interface LockedNodeEntry {
+    nodeId: string;
+    x: number;
+    y: number;
+    lock: NodeLock;
+}
+/**
+ * Renders "{displayName} is editing" pills above each remotely-locked node.
+ * Rendered inside `.nodes-layer`, which is already viewport-transformed, so
+ * coordinates are in canvas space — no zoom/pan math needed here.
+ */
+export declare function renderLockOverlayTemplate(entries: LockedNodeEntry[]): typeof nothing | import("lit-html").TemplateResult<1>[];
+//# sourceMappingURL=lock-overlay.template.d.ts.map

package/dist/src/components/canvas/templates/lock-overlay.template.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+/**
+ * Renders "{displayName} is editing" pills above each remotely-locked node.
+ * Rendered inside `.nodes-layer`, which is already viewport-transformed, so
+ * coordinates are in canvas space — no zoom/pan math needed here.
+ */
+export function renderLockOverlayTemplate(entries) {
+    if (entries.length === 0)
+        return nothing;
+    return entries.map(({ nodeId, x, y, lock }) => {
+        const pillStyles = {
+            left: `${x}px`,
+            top: `${y - 28}px`,
+            background: lock.color,
+        };
+        return html `
+      <div class="node-lock-pill" data-for-node-id=${nodeId} style=${styleMap(pillStyles)}>
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+          <rect x="3" y="11" width="18" height="11" rx="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </svg>
+        <span>${lock.displayName} is editing</span>
+      </div>
+    `;
+    });
+}
+//# sourceMappingURL=lock-overlay.template.js.map