@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -24,7 +24,7 @@ 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 PERSISTENT_TRIGGER_TYPE_NAMES: readonly ["TELEGRAM_BOT", "SLACK_SOCKET", "DISCORD_BOT", "WHATSAPP_WEBHOOK", "CUSTOM_WEBSOCKET", "RABBITMQ_TRIGGER", "CALENDLY_TRIGGER", "KAFKA_TRIGGER"];
 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"];

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

@@ -30,7 +30,7 @@ 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',
+    'TELEGRAM_BOT', 'SLACK_SOCKET', 'DISCORD_BOT', 'WHATSAPP_WEBHOOK', 'CUSTOM_WEBSOCKET', 'RABBITMQ_TRIGGER', 'CALENDLY_TRIGGER', 'KAFKA_TRIGGER',
 ];
 // ==================== Color Presets ====================
 export const FILL_COLOR_PRESETS = [

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

@@ -22,9 +22,9 @@ export const chatbotPanelStyles = css `
     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));
+    background: #f4f4f4;
+    border-left: 1px solid #e0e0e0;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
     animation: chatbot-panel-slide-in 0.2s ease-out;
     /* Override canvas touch-action:none so inputs/scrolling work on mobile */
     touch-action: auto;
@@ -39,44 +39,44 @@ export const chatbotPanelStyles = css `
     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);
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid #e0e0e0;
+    background: #e8e8e8;
     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);
+    gap: 0.5rem;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
   }
 
   .chatbot-panel-title nr-icon {
-    color: var(--nuraly-color-interactive, #3b82f6);
+    color: #7c3aed;
   }
 
   .chatbot-panel-close {
     background: none;
     border: none;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     cursor: pointer;
-    padding: var(--nuraly-spacing-1, 4px);
+    padding: 0.25rem;
     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;
+    border-radius: 4px;
+    transition: all 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));
+    color: #161616;
+    background: rgba(0, 0, 0, 0.05);
   }
 
   .chatbot-panel-content {
@@ -117,7 +117,7 @@ export const chatbotPanelStyles = css `
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: var(--nuraly-color-support-error, #da1e28);
+    background: #da1e28;
     color: #fff;
     font-size: 10px;
     font-weight: 600;
@@ -132,51 +132,51 @@ export const chatbotPanelStyles = css `
   .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);
+    background: #f4f4f4;
+    border-color: #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);
+    background: #e8e8e8;
+    border-color: #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);
+    color: #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);
+    background: #f4f4f4;
+    border-color: #e0e0e0;
   }
 
   .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);
+    background: #e8e8e8;
+    border-color: #e0e0e0;
   }
 
   .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);
+    color: #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));
+    color: #e5e5e5;
+    background: rgba(255, 255, 255, 0.1);
   }
 
   /* Mobile: chatbot panel full-screen */

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

@@ -4,6 +4,8 @@ export * from './canvas.constants.js';
 export * from './workflow-canvas.types.js';
 export * from './workflow-node.component.js';
 export * from './workflow-canvas.component.js';
+export * from './whiteboard-node.component.js';
+export * from './whiteboard-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';

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

@@ -8,6 +8,9 @@ export * from './canvas.constants.js';
 export * from './workflow-canvas.types.js';
 export * from './workflow-node.component.js';
 export * from './workflow-canvas.component.js';
+// Whiteboard canvas components
+export * from './whiteboard-node.component.js';
+export * from './whiteboard-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';

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

@@ -5,6 +5,7 @@
  */
 import { Workflow, WorkflowNode, CanvasType } from './workflow-canvas.types.js';
 import './whiteboard-node.component.js';
+import '../select/select.component.js';
 import { BaseCanvasElement } from './base-canvas.component.js';
 /**
  * Whiteboard canvas component for visual whiteboard editing (Miro-style)
@@ -15,7 +16,8 @@ import { BaseCanvasElement } from './base-canvas.component.js';
  * @fires viewport-changed - When viewport (pan/zoom) changes
  */
 export declare class WhiteboardCanvasElement extends BaseCanvasElement {
-    static styles: import("lit").CSSResult[];
+    static useShadowDom: boolean;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private _wbActiveColorPicker;
     private wbShapesFlyoutOpen;
     protected normalizeNodes(nodes: WorkflowNode[]): WorkflowNode[];

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

@@ -13,7 +13,15 @@ import { html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { CanvasType, isWhiteboardNode, WhiteboardNodeType, } from './workflow-canvas.types.js';
 import { styles } from './whiteboard-canvas.style.js';
+import { styles as inputStyles } from '../input/input.style.js';
+import labelStyles from '../label/label.style.js';
+import { buttonStyles } from '../button/button.style.js';
+import { styles as selectStyles } from '../select/select.style.js';
+import { styles as checkboxStyles } from '../checkbox/checkbox.style.js';
+import { styles as alertStyles } from '../alert/alert.style.js';
+import { styles as radioStyles } from '../radio/radio.style.js';
 import './whiteboard-node.component.js';
+import '../select/select.component.js';
 // Templates
 import { renderWbSidebarTemplate, } from './templates/index.js';
 import { renderWbFloatingToolbarTemplate } from './templates/wb-floating-toolbar.template.js';
@@ -342,7 +350,17 @@ let WhiteboardCanvasElement = class WhiteboardCanvasElement extends BaseCanvasEl
     `;
     }
 };
-WhiteboardCanvasElement.styles = styles;
+WhiteboardCanvasElement.useShadowDom = true;
+WhiteboardCanvasElement.styles = [
+    styles,
+    inputStyles,
+    labelStyles,
+    buttonStyles,
+    selectStyles,
+    checkboxStyles,
+    alertStyles,
+    radioStyles,
+];
 __decorate([
     state()
 ], WhiteboardCanvasElement.prototype, "_wbActiveColorPicker", void 0);