@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/canvas/interfaces/canvas-host.interface.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { Workflow, WorkflowNode, Position, CanvasViewport, CanvasMode } from '../workflow-canvas.types.js';
+import type { MarqueeState } from '../controllers/marquee.controller.js';
+export type { CanvasViewport } from '../workflow-canvas.types.js';
+/**
+ * Connection state for edge creation
+ */
+export interface ConnectionState {
+    sourceNodeId: string;
+    sourcePortId: string;
+    sourceIsInput: boolean;
+    mouseX: number;
+    mouseY: number;
+}
+/**
+ * Drag state for node dragging
+ */
+export interface DragState {
+    nodeId: string;
+    startX: number;
+    startY: number;
+    offsetX: number;
+    offsetY: number;
+}
+/**
+ * Context menu state
+ */
+export interface ContextMenuState {
+    x: number;
+    y: number;
+    type: 'canvas' | 'node' | 'edge';
+    target?: string;
+}
+/**
+ * Interface for the canvas host component
+ * Controllers interact with the host through this interface
+ */
+export interface CanvasHost extends EventTarget {
+    workflow: Workflow;
+    readonly: boolean;
+    disabled: boolean;
+    showMinimap: boolean;
+    showToolbar: boolean;
+    showPalette: boolean;
+    currentTheme: string;
+    viewport: CanvasViewport;
+    mode: CanvasMode;
+    selectedNodeIds: Set<string>;
+    selectedEdgeIds: Set<string>;
+    connectionState: ConnectionState | null;
+    dragState: DragState | null;
+    contextMenu: ContextMenuState | null;
+    isPanning: boolean;
+    panStart: Position;
+    hoveredEdgeId: string | null;
+    marqueeState: MarqueeState | null;
+    lastMousePosition: Position | null;
+    configuredNode: WorkflowNode | null;
+    expandedCategories: Set<string>;
+    insertPanelNode: WorkflowNode | null;
+    canvasWrapper: HTMLElement | null;
+    canvasViewport: HTMLElement | null;
+    configPanel: HTMLElement | null;
+    insertPanel: HTMLElement | null;
+    shadowRoot: ShadowRoot | null;
+    toggleChatbotPanel?(): void;
+    requestUpdate(): void;
+    updateComplete: Promise<boolean>;
+    setWorkflow(workflow: Workflow): void;
+    dispatchWorkflowChanged(): void;
+    dispatchViewportChanged(): void;
+    dispatchNodeSelected(node: WorkflowNode): void;
+    dispatchNodeMoved(node: WorkflowNode, position: Position): void;
+}
+/**
+ * Base controller interface
+ */
+export interface CanvasBaseController {
+    host: CanvasHost;
+}
+/**
+ * Error handler interface for controllers
+ */
+export interface ErrorHandler {
+    handleError(error: Error, context: string): void;
+}
+//# sourceMappingURL=canvas-host.interface.d.ts.map

package/dist/src/components/canvas/interfaces/canvas-host.interface.js

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

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Collaboration interfaces for real-time whiteboard collaboration.
+ * Mirrors backend types from presence/interfaces/canvas.interface.ts
+ */
+export type CanvasOperationType = 'ADD' | 'UPDATE' | 'DELETE' | 'MOVE' | 'RESIZE' | 'UPDATE_TEXT' | 'ADD_CONNECTOR' | 'DELETE_CONNECTOR';
+export interface CanvasOperation {
+    id: string;
+    type: CanvasOperationType;
+    elementId?: string;
+    data: Record<string, unknown>;
+    userId: string;
+    timestamp: number;
+    version: number;
+}
+export interface RemoteCursor {
+    userId: string;
+    username: string;
+    color: string;
+    x: number;
+    y: number;
+    lastUpdate: number;
+}
+export interface CollaborationUser {
+    userId: string;
+    username: string;
+    color: string;
+    cursor?: {
+        x: number;
+        y: number;
+    };
+    selectedElementIds?: string[];
+    isTyping?: boolean;
+    typingElementId?: string;
+}
+export interface CollaborationState {
+    connected: boolean;
+    canvasId: string | null;
+    users: Map<string, CollaborationUser>;
+    cursors: Map<string, RemoteCursor>;
+    selections: Map<string, {
+        userId: string;
+        elementIds: string[];
+    }>;
+    typingIndicators: Map<string, {
+        userId: string;
+        elementId: string;
+        isTyping: boolean;
+    }>;
+    serverVersion: number;
+    pendingOps: Map<string, CanvasOperation>;
+}
+export declare const USER_COLORS: string[];
+//# sourceMappingURL=collaboration.interface.d.ts.map

package/dist/src/components/canvas/interfaces/collaboration.interface.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export const USER_COLORS = [
+    '#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e', '#14b8a6',
+    '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#ec4899',
+];
+//# sourceMappingURL=collaboration.interface.js.map

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { type CanvasHost, type CanvasBaseController, type ErrorHandler, type ConnectionState, type DragState, type ContextMenuState, type CanvasViewport, } from './canvas-host.interface.js';
+export * from './collaboration.interface.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './collaboration.interface.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/canvas/templates/chatbot-panel.template.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, TemplateResult } from 'lit';
+import type { ChatbotCoreController } from '../../chatbot/core/chatbot-core.controller.js';
+/**
+ * Data required for rendering the chatbot panel
+ */
+export interface ChatbotPanelTemplateData {
+    isOpen: boolean;
+    controller: ChatbotCoreController | null;
+    unreadCount: number;
+    currentTheme: string;
+}
+/**
+ * Callbacks for chatbot panel interactions
+ */
+export interface ChatbotPanelCallbacks {
+    onClose: () => void;
+    onMessageSent?: () => void;
+}
+/**
+ * Render the chatbot side panel
+ */
+export declare function renderChatbotPanelTemplate(data: ChatbotPanelTemplateData, callbacks: ChatbotPanelCallbacks): TemplateResult | typeof nothing;
+//# sourceMappingURL=chatbot-panel.template.d.ts.map

package/dist/src/components/canvas/templates/chatbot-panel.template.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+/**
+ * Stop event propagation — prevents canvas pan/drag when interacting with the panel
+ */
+function stopPropagation(e) {
+    e.stopPropagation();
+}
+/**
+ * Render the chatbot side panel
+ */
+export function renderChatbotPanelTemplate(data, callbacks) {
+    if (!data.isOpen)
+        return nothing;
+    return html `
+    <div class="chatbot-panel"
+      data-theme=${data.currentTheme}
+      @mousedown=${stopPropagation}
+      @touchstart=${stopPropagation}
+      @pointerdown=${stopPropagation}
+    >
+      <div class="chatbot-panel-header">
+        <span class="chatbot-panel-title">
+          <nr-icon name="message-circle" size="small"></nr-icon>
+          AI Assistant
+        </span>
+        <button
+          class="chatbot-panel-close"
+          @click=${callbacks.onClose}
+          title="Close (Ctrl+/)"
+        >
+          <nr-icon name="x" size="small"></nr-icon>
+        </button>
+      </div>
+      <div class="chatbot-panel-content">
+        <nr-chatbot
+          size="small"
+          variant="minimal"
+          .controller=${data.controller}
+        ></nr-chatbot>
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=chatbot-panel.template.js.map

package/dist/src/components/canvas/templates/config-panel.template.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Config panel template - re-exports from modular structure
+ *
+ * The config panel has been split into smaller, focused modules:
+ * - config-panel/types.ts - TypeScript interfaces
+ * - config-panel/common-fields.ts - Common name/description fields
+ * - config-panel/data-node-fields.ts - Database node configuration
+ * - config-panel/chatbot-trigger-fields.ts - Chatbot trigger configuration
+ * - config-panel/db-designer-fields.ts - DB designer nodes (Table, View, Index, etc.)
+ * - config-panel/debug-fields.ts - Debug node configuration
+ * - config-panel/workflow-node-fields.ts - Workflow nodes (HTTP, Function, Condition, etc.)
+ * - config-panel/agent-node-fields.ts - Agent nodes (Agent, LLM, Prompt, etc.)
+ * - config-panel/type-fields.ts - Type-based field routing
+ * - config-panel/index.ts - Main template and re-exports
+ */
+export * from './config-panel/index.js';
+//# sourceMappingURL=config-panel.template.d.ts.map

package/dist/src/components/canvas/templates/config-panel.template.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Config panel template - re-exports from modular structure
+ *
+ * The config panel has been split into smaller, focused modules:
+ * - config-panel/types.ts - TypeScript interfaces
+ * - config-panel/common-fields.ts - Common name/description fields
+ * - config-panel/data-node-fields.ts - Database node configuration
+ * - config-panel/chatbot-trigger-fields.ts - Chatbot trigger configuration
+ * - config-panel/db-designer-fields.ts - DB designer nodes (Table, View, Index, etc.)
+ * - config-panel/debug-fields.ts - Debug node configuration
+ * - config-panel/workflow-node-fields.ts - Workflow nodes (HTTP, Function, Condition, etc.)
+ * - config-panel/agent-node-fields.ts - Agent nodes (Agent, LLM, Prompt, etc.)
+ * - config-panel/type-fields.ts - Type-based field routing
+ * - config-panel/index.ts - Main template and re-exports
+ */
+export * from './config-panel/index.js';
+//# sourceMappingURL=config-panel.template.js.map

package/dist/src/components/canvas/templates/context-menu.template.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, TemplateResult } from 'lit';
+import { ContextMenuState } from '../interfaces/index.js';
+/**
+ * Data required for rendering the context menu
+ */
+export interface ContextMenuTemplateData {
+    contextMenu: ContextMenuState | null;
+    readonly?: boolean;
+    hasSelection?: boolean;
+    onClose: () => void;
+    onAddNode: () => void;
+    onSelectAll: () => void;
+    onResetView: () => void;
+    onConfigure: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+    onCopy?: () => void;
+    onCut?: () => void;
+    onPaste?: () => void;
+}
+/**
+ * Render the context menu
+ */
+export declare function renderContextMenuTemplate(data: ContextMenuTemplateData): TemplateResult | typeof nothing;
+//# sourceMappingURL=context-menu.template.d.ts.map

package/dist/src/components/canvas/templates/context-menu.template.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+/**
+ * Render the context menu
+ */
+export function renderContextMenuTemplate(data) {
+    if (!data.contextMenu)
+        return nothing;
+    return html `
+    <div
+      class="context-menu"
+      style="left: ${data.contextMenu.x}px; top: ${data.contextMenu.y}px;"
+      @click=${data.onClose}
+    >
+      ${data.contextMenu.type === 'canvas' ? html `
+        ${!data.readonly ? html `
+          <div class="context-menu-item" @click=${data.onAddNode}>
+            <nr-icon name="plus" size="small"></nr-icon>
+            Add Node
+          </div>
+        ` : nothing}
+        <div class="context-menu-item" @click=${data.onSelectAll}>
+          <nr-icon name="check-square" size="small"></nr-icon>
+          Select All
+        </div>
+        ${!data.readonly && data.onPaste ? html `
+          <div class="context-menu-divider"></div>
+          <div class="context-menu-item" @click=${data.onPaste}>
+            <nr-icon name="clipboard" size="small"></nr-icon>
+            Paste
+            <span class="context-menu-shortcut">⌘V</span>
+          </div>
+        ` : nothing}
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" @click=${data.onResetView}>
+          <nr-icon name="maximize" size="small"></nr-icon>
+          Reset View
+        </div>
+      ` : nothing}
+      ${data.contextMenu.type === 'node' ? html `
+        <div class="context-menu-item" @click=${data.onConfigure}>
+          <nr-icon name="settings" size="small"></nr-icon>
+          Configure
+        </div>
+        ${data.onCopy ? html `
+          <div class="context-menu-divider"></div>
+          <div class="context-menu-item" @click=${data.onCopy}>
+            <nr-icon name="copy" size="small"></nr-icon>
+            Copy
+            <span class="context-menu-shortcut">⌘C</span>
+          </div>
+        ` : nothing}
+        ${!data.readonly ? html `
+          ${data.onCut ? html `
+            <div class="context-menu-item" @click=${data.onCut}>
+              <nr-icon name="scissors" size="small"></nr-icon>
+              Cut
+              <span class="context-menu-shortcut">⌘X</span>
+            </div>
+          ` : nothing}
+          <div class="context-menu-item" @click=${data.onDuplicate}>
+            <nr-icon name="layers" size="small"></nr-icon>
+            Duplicate
+            <span class="context-menu-shortcut">⌘D</span>
+          </div>
+          <div class="context-menu-divider"></div>
+          <div class="context-menu-item danger" @click=${data.onDelete}>
+            <nr-icon name="trash-2" size="small"></nr-icon>
+            Delete
+          </div>
+        ` : nothing}
+      ` : nothing}
+    </div>
+  `;
+}
+//# sourceMappingURL=context-menu.template.js.map

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, SVGTemplateResult } from 'lit';
+import { WorkflowEdge, WorkflowNode, Position } from '../workflow-canvas.types.js';
+import type { ConnectionState } from '../interfaces/index.js';
+/**
+ * Callbacks for edge interactions
+ */
+export interface EdgeCallbacks {
+    onEdgeClick: (e: MouseEvent, edge: WorkflowEdge) => void;
+    onEdgeHover: (edgeId: string | null) => void;
+    getPortPosition: (node: WorkflowNode, portId: string, isInput: boolean) => Position;
+}
+/**
+ * Data required for rendering edges
+ */
+export interface EdgesTemplateData {
+    edges: WorkflowEdge[];
+    nodes: WorkflowNode[];
+    selectedEdgeIds: Set<string>;
+    hoveredEdgeId: string | null;
+    connectionState: ConnectionState | null;
+    currentTheme?: string;
+    callbacks: EdgeCallbacks;
+}
+/**
+ * Render a single edge with bezier curve
+ */
+export declare function renderEdgeTemplate(edge: WorkflowEdge, nodes: WorkflowNode[], selectedEdgeIds: Set<string>, hoveredEdgeId: string | null, currentTheme: string | undefined, callbacks: EdgeCallbacks): SVGTemplateResult | typeof nothing;
+/**
+ * Render the in-progress connection line
+ */
+export declare function renderConnectionLineTemplate(connectionState: ConnectionState | null, nodes: WorkflowNode[], getPortPosition: (node: WorkflowNode, portId: string, isInput: boolean) => Position): SVGTemplateResult | typeof nothing;
+/**
+ * Render all edges and connection line
+ */
+export declare function renderEdgesTemplate(data: EdgesTemplateData): SVGTemplateResult;
+//# sourceMappingURL=edges.template.d.ts.map