@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/canvas/templates/edges.template.js

@@ -0,0 +1,243 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { svg, nothing } from 'lit';
+import { ExecutionStatus, } from '../workflow-canvas.types.js';
+/**
+ * Check if a node is inside a collapsed frame
+ */
+function isNodeInCollapsedFrame(node, nodes) {
+    var _a;
+    if (!node.parentFrameId)
+        return null;
+    const parentFrame = nodes.find(n => n.id === node.parentFrameId);
+    if (!parentFrame)
+        return null;
+    const isCollapsed = (_a = parentFrame.configuration) === null || _a === void 0 ? void 0 : _a.frameCollapsed;
+    return isCollapsed ? parentFrame : null;
+}
+/**
+ * Get position for a port on a collapsed frame
+ * Ports are vertically centered on the left/right edges of the frame
+ */
+function getCollapsedFramePortPosition(frame, isInput, portIndex = 0, totalPorts = 1) {
+    const frameWidth = 180; // Collapsed frame min-width from CSS
+    // Collapsed frame height: header (~44px) + icons preview (~48px) = ~92px
+    const frameHeight = 92;
+    const portSpacing = 16; // gap: 8px + port height 10px
+    // Calculate vertical center position
+    const centerY = frame.position.y + frameHeight / 2;
+    const offsetY = (portIndex - (totalPorts - 1) / 2) * portSpacing;
+    if (isInput) {
+        // Input ports on left side - port sticks out 5px (margin-left: -5px)
+        return {
+            x: frame.position.x,
+            y: centerY + offsetY,
+        };
+    }
+    else {
+        // Output ports on right side - port sticks out 5px (margin-right: -5px)
+        return {
+            x: frame.position.x + frameWidth,
+            y: centerY + offsetY,
+        };
+    }
+}
+/**
+ * Derive edge execution status from connected nodes
+ * Edge is colored only if data actually flowed through it (both source completed AND target was executed)
+ */
+function deriveEdgeStatus(edge, sourceNode, targetNode) {
+    // If edge has explicit status, use it
+    if (edge.status) {
+        return edge.status;
+    }
+    const sourceStatus = sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.status;
+    const targetStatus = targetNode === null || targetNode === void 0 ? void 0 : targetNode.status;
+    // No status if source hasn't started
+    if (!sourceStatus || sourceStatus === ExecutionStatus.IDLE) {
+        return undefined;
+    }
+    // For completed/failed source, only color edge if target was actually executed
+    // This ensures only the taken path is colored (important for condition branches)
+    if (sourceStatus === ExecutionStatus.COMPLETED || sourceStatus === ExecutionStatus.FAILED) {
+        // Target must have been executed (not IDLE or PENDING) for the edge to be colored
+        if (!targetStatus || targetStatus === ExecutionStatus.IDLE || targetStatus === ExecutionStatus.PENDING) {
+            return undefined;
+        }
+        // If source failed, the entire path after it is the failure path (red)
+        if (sourceStatus === ExecutionStatus.FAILED) {
+            return ExecutionStatus.FAILED;
+        }
+        // If target failed, show failure
+        if (targetStatus === ExecutionStatus.FAILED) {
+            return ExecutionStatus.FAILED;
+        }
+        return ExecutionStatus.COMPLETED;
+    }
+    // If source is running, edge shows data is about to flow (only if target is pending/running)
+    if (sourceStatus === ExecutionStatus.RUNNING) {
+        if (targetStatus === ExecutionStatus.PENDING || targetStatus === ExecutionStatus.RUNNING) {
+            return ExecutionStatus.RUNNING;
+        }
+        return undefined;
+    }
+    // If source is pending/waiting, don't color edges yet
+    return undefined;
+}
+/**
+ * Get edge color based on selection, hover, and execution status
+ */
+function getEdgeColor(isSelected, isHovered, status, currentTheme) {
+    const isLight = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.includes('light')) || currentTheme === 'default';
+    // Execution status colors take priority
+    if (status === ExecutionStatus.COMPLETED) {
+        return '#22c55e'; // Green for completed
+    }
+    if (status === ExecutionStatus.RUNNING) {
+        return '#3b82f6'; // Blue for running
+    }
+    if (status === ExecutionStatus.FAILED) {
+        return '#ef4444'; // Red for failed
+    }
+    if (status === ExecutionStatus.PENDING) {
+        return '#f59e0b'; // Orange for pending
+    }
+    if (isSelected) {
+        return '#3b82f6'; // Blue for selected
+    }
+    if (isHovered) {
+        return '#60a5fa'; // Light blue for hover
+    }
+    return isLight ? '#9ca3af' : '#6b7280';
+}
+/**
+ * Render a single edge with bezier curve
+ */
+export function renderEdgeTemplate(edge, nodes, selectedEdgeIds, hoveredEdgeId, currentTheme, callbacks) {
+    // Check if edge is hidden by a collapsed frame (both ends inside same frame)
+    if (edge._hiddenByFrame) {
+        return nothing;
+    }
+    const sourceNode = nodes.find(n => n.id === edge.sourceNodeId);
+    const targetNode = nodes.find(n => n.id === edge.targetNodeId);
+    if (!sourceNode || !targetNode)
+        return nothing;
+    // Check if source or target is inside a collapsed frame
+    const sourceCollapsedFrame = isNodeInCollapsedFrame(sourceNode, nodes);
+    const targetCollapsedFrame = isNodeInCollapsedFrame(targetNode, nodes);
+    // If both are in the same collapsed frame, don't render (internal edge)
+    if (sourceCollapsedFrame && targetCollapsedFrame && sourceCollapsedFrame.id === targetCollapsedFrame.id) {
+        return nothing;
+    }
+    // Calculate start position - redirect to frame if source is in collapsed frame
+    let start;
+    if (sourceCollapsedFrame) {
+        // For collapsed frame, position ports vertically centered
+        // Use a fixed position since we render one aggregated port per crossing edge
+        start = getCollapsedFramePortPosition(sourceCollapsedFrame, false, 0, 1);
+    }
+    else {
+        start = callbacks.getPortPosition(sourceNode, edge.sourcePortId, false);
+    }
+    // Calculate end position - redirect to frame if target is in collapsed frame
+    let end;
+    if (targetCollapsedFrame) {
+        // For collapsed frame, position ports vertically centered
+        end = getCollapsedFramePortPosition(targetCollapsedFrame, true, 0, 1);
+    }
+    else {
+        end = callbacks.getPortPosition(targetNode, edge.targetPortId, true);
+    }
+    // Calculate bezier curve control points
+    const dx = end.x - start.x;
+    const controlOffset = Math.min(Math.abs(dx) * 0.5, 100);
+    const path = `M ${start.x} ${start.y} C ${start.x + controlOffset} ${start.y}, ${end.x - controlOffset} ${end.y}, ${end.x} ${end.y}`;
+    const isSelected = selectedEdgeIds.has(edge.id);
+    const isHovered = hoveredEdgeId === edge.id;
+    // Derive edge status from connected nodes if not explicitly set
+    const edgeStatus = deriveEdgeStatus(edge, sourceNode, targetNode);
+    const strokeColor = getEdgeColor(isSelected, isHovered, edgeStatus, currentTheme);
+    const strokeWidth = isSelected || isHovered || edgeStatus ? 3 : 2;
+    // Calculate arrow position at middle of the curve
+    const arrowLength = 12;
+    const arrowWidth = 8;
+    // Position arrow at t=0.5 (middle of curve)
+    const tArrow = 0.5;
+    const arrowX = Math.pow(1 - tArrow, 3) * start.x + 3 * Math.pow(1 - tArrow, 2) * tArrow * (start.x + controlOffset) + 3 * (1 - tArrow) * Math.pow(tArrow, 2) * (end.x - controlOffset) + Math.pow(tArrow, 3) * end.x;
+    const arrowY = Math.pow(1 - tArrow, 3) * start.y + 3 * Math.pow(1 - tArrow, 2) * tArrow * start.y + 3 * (1 - tArrow) * Math.pow(tArrow, 2) * end.y + Math.pow(tArrow, 3) * end.y;
+    // Calculate tangent direction at arrow position for proper rotation
+    const tTangent = tArrow + 0.05;
+    const tangentX = Math.pow(1 - tTangent, 3) * start.x + 3 * Math.pow(1 - tTangent, 2) * tTangent * (start.x + controlOffset) + 3 * (1 - tTangent) * Math.pow(tTangent, 2) * (end.x - controlOffset) + Math.pow(tTangent, 3) * end.x;
+    const tangentY = Math.pow(1 - tTangent, 3) * start.y + 3 * Math.pow(1 - tTangent, 2) * tTangent * start.y + 3 * (1 - tTangent) * Math.pow(tTangent, 2) * end.y + Math.pow(tTangent, 3) * end.y;
+    // Calculate angle from current position toward next point on curve
+    const angle = Math.atan2(tangentY - arrowY, tangentX - arrowX) * 180 / Math.PI;
+    return svg `
+    <g class="edge-group" data-edge-id=${edge.id}>
+      <!-- Invisible wider path for easier clicking -->
+      <path
+        d=${path}
+        stroke="transparent"
+        stroke-width="14"
+        fill="none"
+        style="cursor: pointer; pointer-events: stroke;"
+        @click=${(e) => callbacks.onEdgeClick(e, edge)}
+        @mouseenter=${() => callbacks.onEdgeHover(edge.id)}
+        @mouseleave=${() => callbacks.onEdgeHover(null)}
+      />
+      <!-- Visible edge path -->
+      <path
+        class="edge-path"
+        d=${path}
+        fill="none"
+        style="pointer-events: none; stroke: ${strokeColor}; stroke-width: ${strokeWidth}px; transition: stroke 0.15s ease, stroke-width 0.15s ease;"
+      />
+      <polygon
+        class="edge-arrow"
+        points="${arrowX + arrowLength / 2},${arrowY} ${arrowX - arrowLength / 2},${arrowY - arrowWidth / 2} ${arrowX - arrowLength / 2},${arrowY + arrowWidth / 2}"
+        transform="rotate(${angle}, ${arrowX}, ${arrowY})"
+        style="pointer-events: none; fill: ${strokeColor}; transition: fill 0.15s ease;"
+      />
+      ${edge.label ? svg `
+        <text
+          class="edge-label"
+          x=${(start.x + end.x) / 2}
+          y=${(start.y + end.y) / 2 - 8}
+          text-anchor="middle"
+          fill="#666"
+        >${edge.label}</text>
+      ` : nothing}
+    </g>
+  `;
+}
+/**
+ * Render the in-progress connection line
+ */
+export function renderConnectionLineTemplate(connectionState, nodes, getPortPosition) {
+    if (!connectionState)
+        return nothing;
+    const sourceNode = nodes.find(n => n.id === connectionState.sourceNodeId);
+    if (!sourceNode)
+        return nothing;
+    const start = getPortPosition(sourceNode, connectionState.sourcePortId, connectionState.sourceIsInput);
+    const end = { x: connectionState.mouseX, y: connectionState.mouseY };
+    const dx = end.x - start.x;
+    const controlOffset = Math.min(Math.abs(dx) * 0.5, 100);
+    const path = connectionState.sourceIsInput
+        ? `M ${end.x} ${end.y} C ${end.x + controlOffset} ${end.y}, ${start.x - controlOffset} ${start.y}, ${start.x} ${start.y}`
+        : `M ${start.x} ${start.y} C ${start.x + controlOffset} ${start.y}, ${end.x - controlOffset} ${end.y}, ${end.x} ${end.y}`;
+    return svg `<path class="connection-line" d=${path} stroke="#3b82f6" stroke-width="2" stroke-dasharray="5" fill="none" />`;
+}
+/**
+ * Render all edges and connection line
+ */
+export function renderEdgesTemplate(data) {
+    const { edges, nodes, selectedEdgeIds, hoveredEdgeId, connectionState, currentTheme, callbacks } = data;
+    return svg `
+    ${edges.map(edge => renderEdgeTemplate(edge, nodes, selectedEdgeIds, hoveredEdgeId, currentTheme, callbacks))}
+    ${renderConnectionLineTemplate(connectionState, nodes, callbacks.getPortPosition)}
+  `;
+}
+//# sourceMappingURL=edges.template.js.map

package/dist/src/components/canvas/templates/empty-state.template.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, TemplateResult } from 'lit';
+/**
+ * Data required for rendering the empty state
+ */
+export interface EmptyStateTemplateData {
+    hasNodes: boolean;
+}
+/**
+ * Render the empty state when no nodes exist
+ */
+export declare function renderEmptyStateTemplate(data: EmptyStateTemplateData): TemplateResult | typeof nothing;
+//# sourceMappingURL=empty-state.template.d.ts.map

package/dist/src/components/canvas/templates/empty-state.template.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+/**
+ * Render the empty state when no nodes exist
+ */
+export function renderEmptyStateTemplate(data) {
+    if (data.hasNodes)
+        return nothing;
+    return html `
+    <div class="empty-state">
+      <div class="empty-state-icon">
+        <nr-icon name="git-branch" size="xlarge"></nr-icon>
+      </div>
+      <div class="empty-state-text">No nodes yet</div>
+      <div class="empty-state-hint">
+        Click the + button or right-click to add nodes
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=empty-state.template.js.map

package/dist/src/components/canvas/templates/frame.template.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { TemplateResult } from 'lit';
+import type { WorkflowNode } from '../workflow-canvas.types.js';
+export interface FrameTemplateCallbacks {
+    onFrameMouseDown: (e: MouseEvent, frame: WorkflowNode) => void;
+    onFrameDblClick: (e: MouseEvent, frame: WorkflowNode) => void;
+    onFrameResize: (e: MouseEvent, frame: WorkflowNode, handle: string) => void;
+    onStartEditingLabel: (e: MouseEvent, frame: WorkflowNode) => void;
+    onLabelBlur: (e: FocusEvent, frame: WorkflowNode) => void;
+    onLabelKeydown: (e: KeyboardEvent, frame: WorkflowNode) => void;
+}
+export interface FrameTemplateData {
+    frame: WorkflowNode;
+    isSelected: boolean;
+    editingFrameLabelId: string | null;
+    readonly: boolean;
+    callbacks: FrameTemplateCallbacks;
+}
+export declare function renderExpandedFrameTemplate(data: FrameTemplateData): TemplateResult | null;
+//# sourceMappingURL=frame.template.d.ts.map

package/dist/src/components/canvas/templates/frame.template.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { FRAME_DEFAULT_WIDTH, FRAME_DEFAULT_HEIGHT, FRAME_DEFAULT_BG_COLOR, FRAME_DEFAULT_BORDER_COLOR, FRAME_DEFAULT_LABEL, FRAME_DEFAULT_LABEL_POSITION, FRAME_DEFAULT_LABEL_PLACEMENT, } from '../canvas.constants.js';
+function renderFrameLabel(frame, label, editingFrameLabelId, labelPosition, labelPlacement, callbacks) {
+    const isEditing = editingFrameLabelId === frame.id;
+    const labelContent = isEditing ? html `
+    <input
+      type="text"
+      class="frame-label-input"
+      .value=${label}
+      @blur=${(e) => callbacks.onLabelBlur(e, frame)}
+      @keydown=${(e) => callbacks.onLabelKeydown(e, frame)}
+      @click=${(e) => e.stopPropagation()}
+      @mousedown=${(e) => e.stopPropagation()}
+    />
+  ` : html `
+    <span class="frame-label-text">
+      ${label}
+      <nr-icon
+        name="edit-2"
+        size="small"
+        class="frame-label-edit-icon"
+        @click=${(e) => callbacks.onStartEditingLabel(e, frame)}
+      ></nr-icon>
+    </span>
+  `;
+    return html `<div class="frame-label ${labelPosition} ${labelPlacement}">${labelContent}</div>`;
+}
+export function renderExpandedFrameTemplate(data) {
+    const { frame, isSelected, editingFrameLabelId, callbacks } = data;
+    const config = frame.configuration || {};
+    const collapsed = config.frameCollapsed;
+    if (collapsed)
+        return null;
+    const width = config.frameWidth || FRAME_DEFAULT_WIDTH;
+    const height = config.frameHeight || FRAME_DEFAULT_HEIGHT;
+    const bgColor = config.frameBackgroundColor || FRAME_DEFAULT_BG_COLOR;
+    const borderColor = config.frameBorderColor || FRAME_DEFAULT_BORDER_COLOR;
+    const label = config.frameLabel || FRAME_DEFAULT_LABEL;
+    const labelPosition = config.frameLabelPosition || FRAME_DEFAULT_LABEL_POSITION;
+    const labelPlacement = config.frameLabelPlacement || FRAME_DEFAULT_LABEL_PLACEMENT;
+    const showLabel = config.frameShowLabel !== false;
+    const frameStyles = {
+        left: `${frame.position.x}px`,
+        top: `${frame.position.y}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        backgroundColor: bgColor,
+        borderColor: borderColor,
+    };
+    return html `
+    <div
+      class="frame-node ${isSelected ? 'selected' : ''}"
+      style=${styleMap(frameStyles)}
+      data-frame-id=${frame.id}
+      @mousedown=${(e) => callbacks.onFrameMouseDown(e, frame)}
+      @dblclick=${(e) => callbacks.onFrameDblClick(e, frame)}
+    >
+      ${showLabel ? renderFrameLabel(frame, label, editingFrameLabelId, labelPosition, labelPlacement, callbacks) : null}
+      ${isSelected ? html `
+        <div class="resize-handle corner se" @mousedown=${(e) => callbacks.onFrameResize(e, frame, 'se')}></div>
+        <div class="resize-handle corner sw" @mousedown=${(e) => callbacks.onFrameResize(e, frame, 'sw')}></div>
+        <div class="resize-handle corner ne" @mousedown=${(e) => callbacks.onFrameResize(e, frame, 'ne')}></div>
+        <div class="resize-handle corner nw" @mousedown=${(e) => callbacks.onFrameResize(e, frame, 'nw')}></div>
+      ` : null}
+    </div>
+  `;
+}
+//# sourceMappingURL=frame.template.js.map

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { renderToolbarTemplate, renderZoomControlsTemplate, type ToolbarTemplateData, type ZoomControlsTemplateData, } from './toolbar.template.js';
+export { renderPaletteTemplate, type PaletteTemplateData } from './palette.template.js';
+export { renderContextMenuTemplate, type ContextMenuTemplateData } from './context-menu.template.js';
+export { renderEmptyStateTemplate, type EmptyStateTemplateData } from './empty-state.template.js';
+export { renderConfigPanelTemplate, type ConfigPanelTemplateData, type ConfigPanelCallbacks, } from './config-panel.template.js';
+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 { 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';
+export { renderWbFloatingToolbarTemplate, wbHasText, wbHasFill, wbHasBorder, type WbFloatingToolbarData, type WbFloatingToolbarCallbacks, } from './wb-floating-toolbar.template.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Toolbar templates
+export { renderToolbarTemplate, renderZoomControlsTemplate, } from './toolbar.template.js';
+// Palette template
+export { renderPaletteTemplate } from './palette.template.js';
+// Context menu template
+export { renderContextMenuTemplate } from './context-menu.template.js';
+// Empty state template
+export { renderEmptyStateTemplate } from './empty-state.template.js';
+// Config panel template
+export { renderConfigPanelTemplate, } from './config-panel.template.js';
+// Edges template
+export { renderEdgesTemplate, renderEdgeTemplate, renderConnectionLineTemplate, } from './edges.template.js';
+// Whiteboard sidebar template
+export { renderWbSidebarTemplate, } from './wb-sidebar.template.js';
+// Remote cursors template
+export { renderRemoteCursorsTemplate, } from './remote-cursors.template.js';
+// Presence bar template
+export { renderPresenceBarTemplate, } from './presence-bar.template.js';
+// Chatbot panel template
+export { renderChatbotPanelTemplate, } from './chatbot-panel.template.js';
+// Frame template
+export { renderExpandedFrameTemplate, } from './frame.template.js';
+// Whiteboard floating toolbar template
+export { renderWbFloatingToolbarTemplate, wbHasText, wbHasFill, wbHasBorder, } from './wb-floating-toolbar.template.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/canvas/templates/palette.template.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, TemplateResult } from 'lit';
+import { NodeType, CanvasType } from '../workflow-canvas.types.js';
+/**
+ * Data required for rendering the node palette
+ */
+export interface PaletteTemplateData {
+    showPalette: boolean;
+    expandedCategories: Set<string>;
+    canvasType: CanvasType;
+    searchTerm: string;
+    onClose: () => void;
+    onToggleCategory: (categoryId: string) => void;
+    onNodeDragStart: (e: DragEvent, type: NodeType) => void;
+    onNodeTouchStart: (e: TouchEvent, type: NodeType) => void;
+    onNodeDoubleClick: (type: NodeType) => void;
+    onSearchChange: (term: string) => void;
+}
+/**
+ * Render the node palette
+ */
+export declare function renderPaletteTemplate(data: PaletteTemplateData): TemplateResult | typeof nothing;
+//# sourceMappingURL=palette.template.d.ts.map

package/dist/src/components/canvas/templates/palette.template.js

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { NODE_TEMPLATES, CanvasType, getCategoriesForCanvasType, } from '../workflow-canvas.types.js';
+/**
+ * Render the node palette
+ */
+export function renderPaletteTemplate(data) {
+    if (!data.showPalette)
+        return nothing;
+    const categories = getCategoriesForCanvasType(data.canvasType);
+    const paletteTitle = data.canvasType === CanvasType.DATABASE
+        ? 'Add DB Element'
+        : data.canvasType === CanvasType.WHITEBOARD
+            ? 'Add Element'
+            : 'Add Node';
+    const searchTerm = data.searchTerm.toLowerCase().trim();
+    // Filter categories and nodes based on search term
+    const filteredCategories = searchTerm
+        ? categories.map(category => {
+            const filteredNodeTypes = category.nodeTypes.filter(nodeType => {
+                const template = NODE_TEMPLATES.find(t => t.type === nodeType);
+                if (!template)
+                    return false;
+                return (template.name.toLowerCase().includes(searchTerm) ||
+                    template.description.toLowerCase().includes(searchTerm) ||
+                    nodeType.toLowerCase().includes(searchTerm));
+            });
+            return Object.assign(Object.assign({}, category), { nodeTypes: filteredNodeTypes });
+        }).filter(category => category.nodeTypes.length > 0)
+        : categories;
+    const handleSearchInput = (e) => {
+        const input = e.target;
+        data.onSearchChange(input.value);
+    };
+    return html `
+    <div class="node-palette">
+      <div class="palette-header">
+        <span class="palette-title">${paletteTitle}</span>
+        <button class="palette-close" @click=${data.onClose}>
+          <nr-icon name="x" size="small"></nr-icon>
+        </button>
+      </div>
+      <div class="palette-search">
+        <nr-input
+          size="small"
+          placeholder="Search nodes..."
+          .value=${data.searchTerm}
+          @nr-input=${handleSearchInput}
+          allowClear
+        >
+          <nr-icon slot="addon-before" name="search" size="small"></nr-icon>
+        </nr-input>
+      </div>
+      <div class="palette-content">
+        ${filteredCategories.length === 0 ? html `
+          <div class="palette-empty">
+            <nr-icon name="search-x" size="medium"></nr-icon>
+            <span>No nodes found</span>
+          </div>
+        ` : filteredCategories.map(category => html `
+          <div class="palette-category">
+            <div
+              class="category-header"
+              @click=${() => data.onToggleCategory(category.id)}
+            >
+              <nr-icon name=${category.icon || 'folder'} size="small"></nr-icon>
+              <span>${category.name}</span>
+              <nr-icon
+                name=${data.expandedCategories.has(category.id) || searchTerm ? 'chevron-down' : 'chevron-right'}
+                size="small"
+              ></nr-icon>
+            </div>
+            ${data.expandedCategories.has(category.id) || searchTerm ? html `
+              <div class="category-items">
+                ${category.nodeTypes.map(nodeType => {
+        const template = NODE_TEMPLATES.find(t => t.type === nodeType);
+        if (!template)
+            return nothing;
+        return html `
+                    <div
+                      class="palette-item"
+                      draggable="true"
+                      @dragstart=${(e) => data.onNodeDragStart(e, nodeType)}
+                      @touchstart=${(e) => data.onNodeTouchStart(e, nodeType)}
+                      @dblclick=${() => data.onNodeDoubleClick(nodeType)}
+                      title=${template.description}
+                    >
+                      <div
+                        class="palette-item-icon"
+                        style="background: ${template.color}"
+                      >
+                        <nr-icon name=${template.icon} size="small"></nr-icon>
+                      </div>
+                      <span class="palette-item-name">${template.name}</span>
+                    </div>
+                  `;
+    })}
+              </div>
+            ` : nothing}
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=palette.template.js.map

package/dist/src/components/canvas/templates/presence-bar.template.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing } from 'lit';
+import type { CollaborationUser } from '../interfaces/collaboration.interface.js';
+export interface PresenceBarTemplateData {
+    users: CollaborationUser[];
+    connected: boolean;
+    onUserClick?: (userId: string) => void;
+}
+/**
+ * Renders a presence bar showing connected users as colored avatar
+ * circles with initials, positioned in the top-right of the canvas.
+ */
+export declare function renderPresenceBarTemplate(data: PresenceBarTemplateData): typeof nothing | import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=presence-bar.template.d.ts.map

package/dist/src/components/canvas/templates/presence-bar.template.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Renders a presence bar showing connected users as colored avatar
+ * circles with initials, positioned in the top-right of the canvas.
+ */
+export function renderPresenceBarTemplate(data) {
+    const { users, connected, onUserClick } = data;
+    if (!connected && users.length === 0)
+        return nothing;
+    const getInitials = (username) => {
+        const parts = username.trim().split(/\s+/);
+        if (parts.length >= 2) {
+            return (parts[0][0] + parts[1][0]).toUpperCase();
+        }
+        return username.slice(0, 2).toUpperCase();
+    };
+    const maxVisible = 5;
+    const visibleUsers = users.slice(0, maxVisible);
+    const extraCount = Math.max(0, users.length - maxVisible);
+    return html `
+    <div class="presence-bar">
+      <div class="presence-avatars">
+        ${visibleUsers.map(user => html `
+          <div
+            class=${classMap({
+        'presence-avatar': true,
+        'presence-avatar-typing': !!user.isTyping,
+        'presence-avatar-clickable': !!onUserClick,
+    })}
+            style=${styleMap({ background: user.color })}
+            title="${onUserClick
+        ? `Click to go to ${user.username}${user.isTyping ? ' (typing...)' : ''}`
+        : `${user.username}${user.isTyping ? ' (typing...)' : ''}`}"
+            @click=${onUserClick ? () => onUserClick(user.userId) : nothing}
+          >
+            ${getInitials(user.username)}
+          </div>
+        `)}
+        ${extraCount > 0 ? html `
+          <div class="presence-avatar presence-avatar-extra" title="${extraCount} more users">
+            +${extraCount}
+          </div>
+        ` : nothing}
+      </div>
+      <span class="presence-count">
+        ${connected
+        ? `${users.length} online`
+        : 'Reconnecting...'}
+      </span>
+    </div>
+  `;
+}
+//# sourceMappingURL=presence-bar.template.js.map