@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=canvas.component.d.ts.map

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

@@ -0,0 +1,295 @@
+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;
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let NodeRedCanvas = class NodeRedCanvas extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.nodes = [
+            { id: 1, x: 100, y: 100, label: 'Node 1' },
+            { id: 2, x: 300, y: 150, label: 'Node 2' },
+            { id: 4, x: 600, y: 250, label: 'Node 3' },
+        ];
+        this.connections = [{ from: 1, to: 2 }];
+        this.activeNode = null;
+        this.connectionStart = null;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.startPos = null;
+        this.canvas = null;
+        this.ctx = null;
+        this.dragNode = (e) => {
+            if (this.activeNode) {
+                this.activeNode.x = e.clientX - this.offsetX;
+                this.activeNode.y = e.clientY - this.offsetY;
+                this.requestUpdate();
+                this.drawConnections();
+            }
+        };
+        this.stopDragging = () => {
+            this.activeNode = null;
+            window.removeEventListener('mousemove', this.dragNode); // Remove mousemove listener
+            window.removeEventListener('mouseup', this.stopDragging); // Remove mouseup listener
+        };
+    }
+    render() {
+        return html `
+      <div class="container">
+        <div class="canvas-container">
+          <!--button class="add-button" @click="${this.addNode}">+</button-->
+          <canvas
+            id="canvas"
+            width="1100"
+            height="760"
+            @mousedown="${this.startConnecting}"
+            @mousemove="${this.drawTemporaryLine}"
+            @mouseup="${this.stopConnecting}"
+            @dblclick="${this.createNodeOnDoubleClick}"
+          ></canvas>
+          ${this.nodes.map((node) => html `
+              <div
+                class="node"
+                style="top: ${node.y}px; left: ${node.x}px;"
+                @mousedown="${(e) => this.startDragging(e, node)}"
+              >
+                ${node.label}
+                <div class="port out-port" @mousedown="${(e) => this.startConnecting(e, node, 'out')}"></div>
+                <div class="port in-port" @mouseup="${(e) => this.stopConnecting(e, node, 'in')}"></div>
+              </div>
+            `)}
+        </div>
+        <!--div class="json-container">
+          <h3>Canvas JSON</h3>
+          <pre>${this.renderJSON()}</pre>
+        </div-->
+      </div>
+    `;
+    }
+    renderJSON() {
+        const jsonData = {
+            nodes: this.nodes,
+            connections: this.connections,
+        };
+        return JSON.stringify(jsonData, null, 2);
+    }
+    firstUpdated() {
+        this.canvas = this.renderRoot.querySelector('#canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.drawConnections();
+    }
+    startDragging(e, node) {
+        if (this.connectionStart)
+            return; // Prevent dragging if connection is in progress
+        this.activeNode = node;
+        this.offsetX = e.clientX - node.x;
+        this.offsetY = e.clientY - node.y;
+        window.addEventListener('mousemove', this.dragNode);
+        window.addEventListener('mouseup', this.stopDragging); // Listen for mouseup to stop dragging
+    }
+    startConnecting(e, node, portType) {
+        e.stopPropagation(); // Prevent the mousedown event from triggering dragging
+        if (portType === 'out') {
+            // Only set the connection start if it's an 'out' port
+            this.connectionStart = { node, portType };
+        }
+    }
+    isConnectionExists(fromId, toId) {
+        return this.connections.some((connection) => connection.from === fromId && connection.to === toId);
+    }
+    stopConnecting(e, node, portType) {
+        if (!this.connectionStart)
+            return; // No connection in progress
+        const { node: startNode, portType: startPort } = this.connectionStart;
+        if (startPort === 'out' &&
+            portType === 'in' &&
+            startNode.id !== node.id) {
+            if (!this.isConnectionExists(startNode.id, node.id)) {
+                this.connections = [
+                    ...this.connections,
+                    { from: startNode.id, to: node.id },
+                ];
+                this.drawConnections();
+            }
+        }
+        // Reset connection state
+        this.connectionStart = null;
+    }
+    drawTemporaryLine(e) {
+        if (!this.connectionStart)
+            return; // No connection in progress
+        const { node: startNode, portType: startPort } = this.connectionStart;
+        const rect = this.canvas.getBoundingClientRect();
+        const endPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        // Draw the temporary line from the port to the mouse position
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.drawConnections(); // Redraw the existing connections
+        if (startPort === 'out') {
+            const startX = startNode.x + 95; // position of the 'out' port
+            const startY = startNode.y + 15; // vertical center of the 'out' port
+            this.ctx.beginPath();
+            this.ctx.moveTo(startX, startY);
+            this.ctx.lineTo(endPos.x, endPos.y); // Temporary line to mouse position
+            this.ctx.strokeStyle = '#3498db';
+            this.ctx.lineWidth = 2;
+            this.ctx.stroke();
+            // Draw the arrowhead on the temporary line
+            const angle = Math.atan2(endPos.y - startY, endPos.x - startX);
+            const arrowSize = 10;
+            this.ctx.beginPath();
+            this.ctx.moveTo(endPos.x, endPos.y);
+            this.ctx.lineTo(endPos.x - arrowSize * Math.cos(angle - Math.PI / 6), endPos.y - arrowSize * Math.sin(angle - Math.PI / 6));
+            this.ctx.lineTo(endPos.x - arrowSize * Math.cos(angle + Math.PI / 6), endPos.y - arrowSize * Math.sin(angle + Math.PI / 6));
+            this.ctx.closePath();
+            this.ctx.fillStyle = '#3498db';
+            this.ctx.fill();
+        }
+    }
+    drawConnections() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.connections.forEach((connection) => {
+            const fromNode = this.nodes.find((node) => node.id === connection.from);
+            const toNode = this.nodes.find((node) => node.id === connection.to);
+            if (fromNode && toNode) {
+                const fromX = fromNode.x + 95; // 'out' port x position
+                const fromY = fromNode.y + 15; // 'out' port y position (center)
+                const toX = toNode.x - 5; // 'in' port x position
+                const toY = toNode.y + 15; // 'in' port y position (center)
+                // Draw the line
+                this.ctx.beginPath();
+                this.ctx.moveTo(fromX, fromY);
+                this.ctx.lineTo(toX, toY);
+                this.ctx.strokeStyle = '#3498db';
+                this.ctx.lineWidth = 2;
+                this.ctx.stroke();
+                // Draw the arrowhead
+                const angle = Math.atan2(toY - fromY, toX - fromX);
+                const arrowSize = 10;
+                this.ctx.beginPath();
+                this.ctx.moveTo(toX, toY);
+                this.ctx.lineTo(toX - arrowSize * Math.cos(angle - Math.PI / 6), toY - arrowSize * Math.sin(angle - Math.PI / 6));
+                this.ctx.lineTo(toX - arrowSize * Math.cos(angle + Math.PI / 6), toY - arrowSize * Math.sin(angle + Math.PI / 6));
+                this.ctx.closePath();
+                this.ctx.fillStyle = '#3498db';
+                this.ctx.fill();
+            }
+        });
+    }
+    createNodeOnDoubleClick(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        // Check if the position is not too close to an existing node
+        const overlappingNode = this.nodes.find((node) => Math.abs(mouseX - node.x) < 100 && Math.abs(mouseY - node.y) < 50);
+        if (!overlappingNode) {
+            const newNode = {
+                id: this.nodes.length + 1,
+                x: mouseX - 50, // Center the node at the clicked position
+                y: mouseY - 25,
+                label: `Node ${this.nodes.length + 1}`,
+            };
+            this.nodes = [...this.nodes, newNode];
+        }
+    }
+    addNode() {
+        const newNode = {
+            id: this.nodes.length + 1,
+            x: 50,
+            y: 50,
+            label: `Node ${this.nodes.length + 1}`,
+        };
+        this.nodes = [...this.nodes, newNode];
+    }
+};
+NodeRedCanvas.styles = css `
+      .container {
+          display: flex;
+          justify-content: space-between;
+      }
+      .canvas-container {
+          position: relative;
+      }
+      canvas {
+          border: none; /* Removed the border */
+          cursor: crosshair;
+          background: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(200, 200, 200, 0.1) 20px, rgba(200, 200, 200, 0.1) 21px),
+          repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(200, 200, 200, 0.1) 20px, rgba(200, 200, 200, 0.1) 21px);
+      }
+      .node {
+          position: absolute;
+          width: 100px;
+          height: 30px;
+          background: #434343;
+          color: white;
+          text-align: center;
+          line-height: 30px;
+          border-radius: 5px;
+          user-select: none;
+          cursor: move;
+      }
+      .port {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          cursor: pointer;
+      }
+      .out-port {
+          top: 10px;
+          right: -5px;
+          background: #3498db; /* Blue color for the output port */
+      }
+      .in-port {
+          top: 10px;
+          left: -5px;
+          background: #2ecc71; /* Green color for the input port */
+      }
+      .add-button {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          padding: 10px;
+          background-color: #2ecc71;
+          color: white;
+          border: none;
+          border-radius: 5px;
+          cursor: pointer;
+      }
+      .json-container {
+          width: 400px;
+          margin-left: 20px;
+          padding: 10px;
+          border-radius: 5px;
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+          font-family: monospace;
+          white-space: pre-wrap;
+          word-wrap: break-word;
+      }
+  `;
+__decorate([
+    property({ type: Array })
+], NodeRedCanvas.prototype, "nodes", void 0);
+__decorate([
+    property({ type: Array })
+], NodeRedCanvas.prototype, "connections", void 0);
+__decorate([
+    state()
+], NodeRedCanvas.prototype, "activeNode", void 0);
+__decorate([
+    state()
+], NodeRedCanvas.prototype, "connectionStart", void 0);
+__decorate([
+    state()
+], NodeRedCanvas.prototype, "canvas", void 0);
+__decorate([
+    state()
+], NodeRedCanvas.prototype, "ctx", void 0);
+NodeRedCanvas = __decorate([
+    customElement('nodes-canvas')
+], NodeRedCanvas);
+//# sourceMappingURL=canvas.component.js.map

package/dist/src/components/canvas/canvas.constants.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const FRAME_DEFAULT_WIDTH = 400;
+export declare const FRAME_DEFAULT_HEIGHT = 300;
+export declare const FRAME_DEFAULT_BG_COLOR = "rgba(99, 102, 241, 0.05)";
+export declare const FRAME_DEFAULT_BORDER_COLOR = "rgba(99, 102, 241, 0.3)";
+export declare const FRAME_DEFAULT_LABEL = "Group";
+export declare const FRAME_DEFAULT_LABEL_POSITION = "top-left";
+export declare const FRAME_DEFAULT_LABEL_PLACEMENT = "outside";
+export declare const WORKFLOW_NODE_WIDTH = 180;
+export declare const WORKFLOW_NODE_HEIGHT = 80;
+export declare const WORKFLOW_NOTE_DEFAULT_WIDTH = 200;
+export declare const WORKFLOW_NOTE_DEFAULT_HEIGHT = 100;
+export declare const WHITEBOARD_NODE_DEFAULT_SIZE = 200;
+export declare const NOTE_MIN_WIDTH = 100;
+export declare const NOTE_MIN_HEIGHT = 50;
+export declare const TABLE_DEFAULT_WIDTH = 320;
+export declare const TABLE_DEFAULT_HEIGHT = 200;
+export declare const TABLE_MIN_WIDTH = 200;
+export declare const TABLE_MIN_HEIGHT = 120;
+export declare const VIEWPORT_ADD_NODE_OFFSET_X = 400;
+export declare const VIEWPORT_ADD_NODE_OFFSET_Y = 200;
+export declare const TRIGGER_POLL_INTERVAL_MS = 10000;
+export declare const PERSISTENT_TRIGGER_TYPE_NAMES: readonly ["TELEGRAM_BOT", "SLACK_SOCKET", "DISCORD_BOT", "WHATSAPP_WEBHOOK", "CUSTOM_WEBSOCKET"];
+export declare const FILL_COLOR_PRESETS: readonly ["#fef08a", "#bbf7d0", "#bfdbfe", "#fecaca", "#e9d5ff", "#fed7aa", "#ffffff", "#f3f4f6"];
+export declare const BORDER_COLOR_PRESETS: readonly ["#8b5cf6", "#3b82f6", "#ef4444", "#22c55e", "#f59e0b", "#6b7280", "#1a1a1a", "#e5e7eb"];
+export declare const TEXT_COLOR_PRESETS: readonly ["#1a1a1a", "#374151", "#713f12", "#1e3a5f", "#7f1d1d", "#4c1d95", "#ffffff"];
+export declare const FONT_FAMILY_OPTIONS: readonly [{
+    readonly value: "Inter, sans-serif";
+    readonly label: "Inter";
+}, {
+    readonly value: "Arial, sans-serif";
+    readonly label: "Arial";
+}, {
+    readonly value: "Georgia, serif";
+    readonly label: "Georgia";
+}, {
+    readonly value: "Courier New, monospace";
+    readonly label: "Courier New";
+}, {
+    readonly value: "Comic Sans MS, cursive";
+    readonly label: "Comic Sans";
+}, {
+    readonly value: "Verdana, sans-serif";
+    readonly label: "Verdana";
+}];
+export declare const MERMAID_THEME_OPTIONS: readonly [{
+    readonly value: "default";
+    readonly label: "Default";
+}, {
+    readonly value: "dark";
+    readonly label: "Dark";
+}, {
+    readonly value: "forest";
+    readonly label: "Forest";
+}, {
+    readonly value: "neutral";
+    readonly label: "Neutral";
+}, {
+    readonly value: "base";
+    readonly label: "Base";
+}];
+//# sourceMappingURL=canvas.constants.d.ts.map

package/dist/src/components/canvas/canvas.constants.js

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// ==================== Frame Defaults ====================
+export const FRAME_DEFAULT_WIDTH = 400;
+export const FRAME_DEFAULT_HEIGHT = 300;
+export const FRAME_DEFAULT_BG_COLOR = 'rgba(99, 102, 241, 0.05)';
+export const FRAME_DEFAULT_BORDER_COLOR = 'rgba(99, 102, 241, 0.3)';
+export const FRAME_DEFAULT_LABEL = 'Group';
+export const FRAME_DEFAULT_LABEL_POSITION = 'top-left';
+export const FRAME_DEFAULT_LABEL_PLACEMENT = 'outside';
+// ==================== Node Dimensions ====================
+export const WORKFLOW_NODE_WIDTH = 180;
+export const WORKFLOW_NODE_HEIGHT = 80;
+export const WORKFLOW_NOTE_DEFAULT_WIDTH = 200;
+export const WORKFLOW_NOTE_DEFAULT_HEIGHT = 100;
+export const WHITEBOARD_NODE_DEFAULT_SIZE = 200;
+// ==================== Note / Table Resize Limits ====================
+export const NOTE_MIN_WIDTH = 100;
+export const NOTE_MIN_HEIGHT = 50;
+export const TABLE_DEFAULT_WIDTH = 320;
+export const TABLE_DEFAULT_HEIGHT = 200;
+export const TABLE_MIN_WIDTH = 200;
+export const TABLE_MIN_HEIGHT = 120;
+// ==================== Viewport ====================
+export const VIEWPORT_ADD_NODE_OFFSET_X = 400;
+export const VIEWPORT_ADD_NODE_OFFSET_Y = 200;
+// ==================== Trigger Polling ====================
+export const TRIGGER_POLL_INTERVAL_MS = 10000;
+export const PERSISTENT_TRIGGER_TYPE_NAMES = [
+    'TELEGRAM_BOT', 'SLACK_SOCKET', 'DISCORD_BOT', 'WHATSAPP_WEBHOOK', 'CUSTOM_WEBSOCKET',
+];
+// ==================== Color Presets ====================
+export const FILL_COLOR_PRESETS = [
+    '#fef08a', '#bbf7d0', '#bfdbfe', '#fecaca', '#e9d5ff', '#fed7aa', '#ffffff', '#f3f4f6',
+];
+export const BORDER_COLOR_PRESETS = [
+    '#8b5cf6', '#3b82f6', '#ef4444', '#22c55e', '#f59e0b', '#6b7280', '#1a1a1a', '#e5e7eb',
+];
+export const TEXT_COLOR_PRESETS = [
+    '#1a1a1a', '#374151', '#713f12', '#1e3a5f', '#7f1d1d', '#4c1d95', '#ffffff',
+];
+// ==================== Font & Theme Options ====================
+export const FONT_FAMILY_OPTIONS = [
+    { value: 'Inter, sans-serif', label: 'Inter' },
+    { value: 'Arial, sans-serif', label: 'Arial' },
+    { value: 'Georgia, serif', label: 'Georgia' },
+    { value: 'Courier New, monospace', label: 'Courier New' },
+    { value: 'Comic Sans MS, cursive', label: 'Comic Sans' },
+    { value: 'Verdana, sans-serif', label: 'Verdana' },
+];
+export const MERMAID_THEME_OPTIONS = [
+    { value: 'default', label: 'Default' },
+    { value: 'dark', label: 'Dark' },
+    { value: 'forest', label: 'Forest' },
+    { value: 'neutral', label: 'Neutral' },
+    { value: 'base', label: 'Base' },
+];
+//# sourceMappingURL=canvas.constants.js.map

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Shared chatbot panel styles used by both workflow-canvas and whiteboard-canvas.
+ * Extracted to avoid duplication across shadow DOM boundaries.
+ */
+export declare const chatbotPanelStyles: import("lit").CSSResult;
+//# sourceMappingURL=chatbot-panel.style.d.ts.map

package/dist/src/components/canvas/chatbot-panel.style.js

@@ -0,0 +1,189 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * Shared chatbot panel styles used by both workflow-canvas and whiteboard-canvas.
+ * Extracted to avoid duplication across shadow DOM boundaries.
+ */
+export const chatbotPanelStyles = css `
+  /* ========================================
+   * CHATBOT PANEL (AI Assistant side panel)
+   * ======================================== */
+
+  .chatbot-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 380px;
+    height: 100%;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    background: var(--nuraly-color-layer-01, #ffffff);
+    border-left: 1px solid var(--nuraly-color-border-subtle, #e0e0e0);
+    box-shadow: var(--nuraly-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
+    animation: chatbot-panel-slide-in 0.2s ease-out;
+    /* Override canvas touch-action:none so inputs/scrolling work on mobile */
+    touch-action: auto;
+  }
+
+  @keyframes chatbot-panel-slide-in {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  .chatbot-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nuraly-spacing-2, 8px) var(--nuraly-spacing-3, 12px);
+    border-bottom: 1px solid var(--nuraly-color-border-subtle, #e0e0e0);
+    background: var(--nuraly-color-layer-02, #f8f8f8);
+    flex-shrink: 0;
+  }
+
+  .chatbot-panel-title {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2, 8px);
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-font-size-sm, 13px);
+    font-weight: var(--nuraly-font-weight-semibold, 600);
+    color: var(--nuraly-color-text-primary, #161616);
+  }
+
+  .chatbot-panel-title nr-icon {
+    color: var(--nuraly-color-interactive, #3b82f6);
+  }
+
+  .chatbot-panel-close {
+    background: none;
+    border: none;
+    color: var(--nuraly-color-text-secondary, #888);
+    cursor: pointer;
+    padding: var(--nuraly-spacing-1, 4px);
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--nuraly-border-radius-small, 4px);
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+  }
+
+  .chatbot-panel-close:hover {
+    color: var(--nuraly-color-text-primary, #161616);
+    background: var(--nuraly-color-layer-hover-01, rgba(0, 0, 0, 0.05));
+  }
+
+  .chatbot-panel-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .chatbot-panel-content nr-chatbot {
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    min-height: 0;
+    --chatbot-border-radius: 0;
+    --chatbot-height: 100%;
+    --chatbot-min-height: 100%;
+    --nuraly-size-chatbot-min-width: 0;
+    --nuraly-size-chatbot-container-min-width: 0;
+    --nuraly-size-chatbot-input-min-width: 0;
+    --nuraly-size-chatbot-actions-min-width: 0;
+    --nuraly-spacing-05: 6px;
+    --nuraly-spacing-06: 8px;
+    --nuraly-border-radius-md: 8px;
+    --nuraly-border-width-chatbot-input: 1px;
+    --nuraly-color-chatbot-border: transparent;
+  }
+
+  .toolbar-btn {
+    position: relative;
+  }
+
+  .toolbar-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--nuraly-color-support-error, #da1e28);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  /* Light theme for chatbot panel */
+  .chatbot-panel[data-theme="light"],
+  .chatbot-panel[data-theme="carbon-light"],
+  .chatbot-panel[data-theme="default-light"],
+  .chatbot-panel[data-theme="default"] {
+    background: var(--nuraly-color-layer-01, #ffffff);
+    border-color: var(--nuraly-color-border-subtle, #e0e0e0);
+  }
+
+  .chatbot-panel[data-theme="light"] .chatbot-panel-header,
+  .chatbot-panel[data-theme="carbon-light"] .chatbot-panel-header,
+  .chatbot-panel[data-theme="default-light"] .chatbot-panel-header,
+  .chatbot-panel[data-theme="default"] .chatbot-panel-header {
+    background: var(--nuraly-color-layer-02, #f4f4f4);
+    border-color: var(--nuraly-color-border-subtle, #e0e0e0);
+  }
+
+  .chatbot-panel[data-theme="light"] .chatbot-panel-title,
+  .chatbot-panel[data-theme="carbon-light"] .chatbot-panel-title,
+  .chatbot-panel[data-theme="default-light"] .chatbot-panel-title,
+  .chatbot-panel[data-theme="default"] .chatbot-panel-title {
+    color: var(--nuraly-color-text-primary, #161616);
+  }
+
+  /* Dark theme for chatbot panel */
+  .chatbot-panel[data-theme="dark"],
+  .chatbot-panel[data-theme="carbon-dark"],
+  .chatbot-panel[data-theme="default-dark"] {
+    background: var(--nuraly-color-layer-01, #262626);
+    border-color: var(--nuraly-color-border-subtle, #393939);
+  }
+
+  .chatbot-panel[data-theme="dark"] .chatbot-panel-header,
+  .chatbot-panel[data-theme="carbon-dark"] .chatbot-panel-header,
+  .chatbot-panel[data-theme="default-dark"] .chatbot-panel-header {
+    background: var(--nuraly-color-layer-02, #333333);
+    border-color: var(--nuraly-color-border-subtle, #393939);
+  }
+
+  .chatbot-panel[data-theme="dark"] .chatbot-panel-title,
+  .chatbot-panel[data-theme="carbon-dark"] .chatbot-panel-title,
+  .chatbot-panel[data-theme="default-dark"] .chatbot-panel-title {
+    color: var(--nuraly-color-text-primary, #e5e5e5);
+  }
+
+  .chatbot-panel[data-theme="dark"] .chatbot-panel-close:hover,
+  .chatbot-panel[data-theme="carbon-dark"] .chatbot-panel-close:hover,
+  .chatbot-panel[data-theme="default-dark"] .chatbot-panel-close:hover {
+    color: var(--nuraly-color-text-primary, #e5e5e5);
+    background: var(--nuraly-color-layer-hover-01, rgba(255, 255, 255, 0.1));
+  }
+
+  /* Mobile: chatbot panel full-screen */
+  @media (max-width: 768px) {
+    .chatbot-panel {
+      width: 100%;
+    }
+  }
+`;
+//# sourceMappingURL=chatbot-panel.style.js.map

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

@@ -0,0 +1,13 @@
+export * from './canvas.component.js';
+export * from './base-canvas.component.js';
+export * from './canvas.constants.js';
+export * from './workflow-canvas.types.js';
+export * from './workflow-node.component.js';
+export * from './workflow-canvas.component.js';
+export { DataOperation, DATA_OPERATIONS, FilterOperator, FILTER_OPERATORS, DEFAULT_DATA_NODE_CONFIG, DATA_NODE_SECTIONS, DATA_OPERATIONS as DataOperations, validateDataNodeConfig, shouldShowSection, } from './data-node/data-node.types.js';
+export { dataNodeFieldStyles } from './data-node/data-node-fields.style.js';
+export * from './data-node/data-node-fields.component.js';
+export { ChatbotTriggerEvent, CHATBOT_TRIGGER_EVENTS, DEFAULT_CHATBOT_TRIGGER_CONFIG, validateChatbotTriggerConfig, } from './chatbot-trigger/chatbot-trigger.types.js';
+export { chatbotTriggerFieldStyles } from './chatbot-trigger/chatbot-trigger-fields.style.js';
+export * from './chatbot-trigger/chatbot-trigger-fields.component.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,21 @@
+// Legacy canvas component
+export * from './canvas.component.js';
+// Base canvas class
+export * from './base-canvas.component.js';
+// Canvas constants
+export * from './canvas.constants.js';
+// Workflow canvas components
+export * from './workflow-canvas.types.js';
+export * from './workflow-node.component.js';
+export * from './workflow-canvas.component.js';
+// Data node components and types - re-export runtime values only
+// Types should be imported directly from './data-node/data-node.types.js' when needed
+export { DataOperation, DATA_OPERATIONS, FilterOperator, FILTER_OPERATORS, DEFAULT_DATA_NODE_CONFIG, DATA_NODE_SECTIONS, DATA_OPERATIONS as DataOperations, validateDataNodeConfig, shouldShowSection, } from './data-node/data-node.types.js';
+export { dataNodeFieldStyles } from './data-node/data-node-fields.style.js';
+export * from './data-node/data-node-fields.component.js';
+// Chatbot trigger components and types - re-export runtime values only
+// Types should be imported directly from './chatbot-trigger/chatbot-trigger.types.js' when needed
+export { ChatbotTriggerEvent, CHATBOT_TRIGGER_EVENTS, DEFAULT_CHATBOT_TRIGGER_CONFIG, validateChatbotTriggerConfig, } from './chatbot-trigger/chatbot-trigger.types.js';
+export { chatbotTriggerFieldStyles } from './chatbot-trigger/chatbot-trigger-fields.style.js';
+export * from './chatbot-trigger/chatbot-trigger-fields.component.js';
+//# sourceMappingURL=index.js.map