@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -6,7 +6,7 @@
 import { LitElement } from 'lit';
 import { WorkflowNode } from './workflow-canvas.types.js';
 import '../icon/icon.component.js';
-declare const WhiteboardNodeElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const WhiteboardNodeElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Whiteboard node component for displaying Miro-style visual elements
  *
@@ -21,6 +21,7 @@ declare const WhiteboardNodeElement_base: (new (...args: any[]) => import("@nura
  * @fires note-resize-start - When resize handle is grabbed
  */
 export declare class WhiteboardNodeElement extends WhiteboardNodeElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     node: WorkflowNode;
     selected: boolean;

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

@@ -24,7 +24,6 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import mermaid from 'mermaid';
 import { NODE_COLORS, WhiteboardNodeType, } from './workflow-canvas.types.js';
 import { styles } from './whiteboard-node.style.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
@@ -137,6 +136,7 @@ let WhiteboardNodeElement = WhiteboardNodeElement_1 = class WhiteboardNodeElemen
     }
     _renderMermaid(definition_1) {
         return __awaiter(this, arguments, void 0, function* (definition, theme = 'default') {
+            const { default: mermaid } = yield import(/* @vite-ignore */ 'mermaid');
             mermaid.initialize({ startOnLoad: false, theme: theme });
             try {
                 const { svg } = yield mermaid.render(`mermaid-${this.node.id.replaceAll(/[^a-zA-Z0-9]/g, '')}`, definition);
@@ -770,6 +770,7 @@ let WhiteboardNodeElement = WhiteboardNodeElement_1 = class WhiteboardNodeElemen
         return nodeContent;
     }
 };
+WhiteboardNodeElement.useShadowDom = true;
 WhiteboardNodeElement.styles = styles;
 WhiteboardNodeElement.CLICK_THRESHOLD = 5;
 __decorate([

package/dist/src/components/canvas/whiteboard-node.style.js

@@ -8,10 +8,10 @@ export const whiteboardNodeStyles = css `
     display: block;
     position: absolute;
     user-select: none;
-    color: var(--nuraly-color-text);
+    color: #161616;
 
     * {
-      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      transition: all 0.15s ease;
     }
   }
 
@@ -22,11 +22,11 @@ export const whiteboardNodeStyles = css `
   .node-container {
     position: relative;
     cursor: grab;
-    font-family: var(--nuraly-font-family);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
   .node-container.selected {
-    outline: 2px solid var(--nuraly-color-interactive, #3b82f6);
+    outline: 2px solid #7c3aed;
     outline-offset: 4px;
     border-radius: 4px;
   }
@@ -56,7 +56,7 @@ export const whiteboardNodeStyles = css `
 
   .node-container.wb-node.selected {
     border: none;
-    outline: 2px solid var(--nuraly-color-interactive, #3b82f6);
+    outline: 2px solid #7c3aed;
     outline-offset: 4px;
     border-radius: 4px;
   }
@@ -211,7 +211,7 @@ export const whiteboardNodeStyles = css `
     overflow: hidden;
     cursor: grab;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    background: var(--nuraly-color-layer-02, #f4f4f4);
+    background: #e8e8e8;
   }
 
   .wb-image-content {
@@ -229,7 +229,7 @@ export const whiteboardNodeStyles = css `
     align-items: center;
     justify-content: center;
     gap: 8px;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     font-size: 12px;
   }
 
@@ -242,7 +242,7 @@ export const whiteboardNodeStyles = css `
   }
 
   .node-container.wb-frame.selected {
-    border: 2px dashed var(--nuraly-color-interactive, #3b82f6);
+    border: 2px dashed #7c3aed;
     outline: none;
   }
 
@@ -252,7 +252,7 @@ export const whiteboardNodeStyles = css `
     left: 0;
     font-size: 12px;
     font-weight: 600;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     white-space: nowrap;
   }
 
@@ -303,7 +303,7 @@ export const whiteboardNodeStyles = css `
     left: 0;
     font-size: 12px;
     font-weight: 600;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     white-space: nowrap;
   }
 
@@ -314,7 +314,7 @@ export const whiteboardNodeStyles = css `
     overflow: hidden;
     cursor: grab;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    background: var(--nuraly-color-layer-02, #ffffff);
+    background: #e8e8e8;
     border: 2px solid #8b5cf6;
     border-color: inherit;
     box-sizing: border-box;
@@ -342,7 +342,7 @@ export const whiteboardNodeStyles = css `
     align-items: center;
     justify-content: center;
     gap: 8px;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     font-size: 12px;
   }
 
@@ -350,8 +350,8 @@ export const whiteboardNodeStyles = css `
   .node-container.wb-workflow {
     border-radius: 8px;
     overflow: hidden;
-    background: var(--nuraly-color-surface, #ffffff);
-    border: 1px solid var(--nuraly-color-border, #e5e7eb);
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
     width: var(--wb-width, 280px);
     height: var(--wb-height, 200px);
     display: flex;
@@ -383,7 +383,7 @@ export const whiteboardNodeStyles = css `
   .wb-workflow-body {
     flex: 1;
     overflow-y: auto;
-    background: var(--nuraly-color-surface, #ffffff);
+    background: #ffffff;
   }
 
   .wb-workflow-steps {
@@ -397,8 +397,8 @@ export const whiteboardNodeStyles = css `
     gap: 8px;
     padding: 6px 12px;
     font-size: 12px;
-    color: var(--nuraly-color-text, #1a1a1a);
-    border-bottom: 1px solid var(--nuraly-color-border, #f3f4f6);
+    color: #161616;
+    border-bottom: 1px solid #e0e0e0;
   }
 
   .wb-workflow-step:last-child {
@@ -406,7 +406,7 @@ export const whiteboardNodeStyles = css `
   }
 
   .wb-workflow-step nr-icon {
-    color: var(--nuraly-color-text-secondary, #6b7280);
+    color: #525252;
     flex-shrink: 0;
   }
 
@@ -424,7 +424,7 @@ export const whiteboardNodeStyles = css `
     align-items: center;
     justify-content: center;
     gap: 8px;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     font-size: 12px;
   }
 
@@ -432,8 +432,8 @@ export const whiteboardNodeStyles = css `
   .node-container.wb-database {
     border-radius: 8px;
     overflow: hidden;
-    background: var(--nuraly-color-surface, #ffffff);
-    border: 1px solid var(--nuraly-color-border, #e5e7eb);
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
     width: var(--wb-width, 280px);
     height: var(--wb-height, 200px);
     display: flex;
@@ -465,7 +465,7 @@ export const whiteboardNodeStyles = css `
   .wb-database-body {
     flex: 1;
     overflow-y: auto;
-    background: var(--nuraly-color-surface, #ffffff);
+    background: #ffffff;
   }
 
   .wb-database-columns {
@@ -479,8 +479,8 @@ export const whiteboardNodeStyles = css `
     gap: 8px;
     padding: 6px 12px;
     font-size: 12px;
-    color: var(--nuraly-color-text, #1a1a1a);
-    border-bottom: 1px solid var(--nuraly-color-border, #f3f4f6);
+    color: #161616;
+    border-bottom: 1px solid #e0e0e0;
   }
 
   .wb-database-column:last-child {
@@ -488,7 +488,7 @@ export const whiteboardNodeStyles = css `
   }
 
   .wb-database-column nr-icon {
-    color: var(--nuraly-color-text-secondary, #6b7280);
+    color: #525252;
     flex-shrink: 0;
   }
 
@@ -505,7 +505,7 @@ export const whiteboardNodeStyles = css `
 
   .wb-database-column-type {
     font-size: 11px;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     flex-shrink: 0;
   }
 
@@ -524,7 +524,7 @@ export const whiteboardNodeStyles = css `
     align-items: center;
     justify-content: center;
     gap: 8px;
-    color: var(--nuraly-color-text-secondary, #888);
+    color: #525252;
     font-size: 12px;
   }
 
@@ -590,7 +590,7 @@ export const whiteboardNodeStyles = css `
     right: -5px;
     width: 10px;
     height: 10px;
-    background: var(--nuraly-color-interactive, #3b82f6);
+    background: #7c3aed;
     border: 2px solid white;
     border-radius: 2px;
     cursor: se-resize;
@@ -617,25 +617,25 @@ export const whiteboardNodeStyles = css `
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: var(--nuraly-color-border-strong, #4a4a4a);
-    border: 1.5px solid var(--nuraly-color-border-interactive, #666);
+    background: #4a4a4a;
+    border: 1.5px solid #666;
     cursor: crosshair;
     pointer-events: auto;
-    transition: transform var(--nuraly-transition-fast, 0.15s) ease,
-                background var(--nuraly-transition-fast, 0.15s) ease,
-                border-color var(--nuraly-transition-fast, 0.15s) ease;
+    transition: transform 0.15s ease,
+                background 0.15s ease,
+                border-color 0.15s ease;
     z-index: 10;
   }
 
   .port:hover {
     transform: scale(1.3);
-    background: var(--nuraly-color-border-interactive, #5a5a5a);
+    background: #5a5a5a;
   }
 
   .port.connecting {
     transform: scale(1.4);
-    background: var(--nuraly-color-interactive, #3b82f6);
-    border-color: var(--nuraly-color-interactive, #3b82f6);
+    background: #7c3aed;
+    border-color: #7c3aed;
   }
 
   .port.compatible {
@@ -649,20 +649,20 @@ export const whiteboardNodeStyles = css `
 
   .port.input {
     left: -4px;
-    background: var(--nuraly-color-border-strong, #6b7280);
-    border-color: var(--nuraly-color-border-interactive, #525252);
+    background: #6b7280;
+    border-color: #525252;
   }
 
   .port.output {
     right: -4px;
-    background: var(--nuraly-color-interactive, #3b82f6);
-    border-color: var(--nuraly-color-interactive-emphasis, #2563eb);
+    background: #7c3aed;
+    border-color: #2563eb;
   }
 
   .port-label {
     position: absolute;
-    font-size: var(--nuraly-font-size-xxs, 9px);
-    color: var(--nuraly-color-text-secondary, #888);
+    font-size: 9px;
+    color: #525252;
     white-space: nowrap;
     pointer-events: none;
     top: 50%;
@@ -704,7 +704,7 @@ export const whiteboardNodeStyles = css `
     position: absolute;
     bottom: -24px;
     left: 0;
-    font-family: var(--nuraly-font-family);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     font-size: 11px;
     font-weight: 500;
     white-space: nowrap;
@@ -740,7 +740,7 @@ export const whiteboardNodeStyles = css `
     border: 1px solid rgba(245, 158, 11, 1);
     border-radius: 12px;
     color: #fff;
-    font-family: var(--nuraly-font-family);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     font-size: 11px;
     font-weight: 600;
     white-space: nowrap;

package/dist/src/components/canvas/workflow-canvas-only.d.ts

@@ -0,0 +1,4 @@
+export * from './workflow-canvas.types.js';
+export * from './workflow-node.component.js';
+export * from './workflow-canvas.component.js';
+//# sourceMappingURL=workflow-canvas-only.d.ts.map

package/dist/src/components/canvas/workflow-canvas-only.js

@@ -0,0 +1,5 @@
+// Workflow canvas only — excludes whiteboard components (which depend on mermaid)
+export * from './workflow-canvas.types.js';
+export * from './workflow-node.component.js';
+export * from './workflow-canvas.component.js';
+//# sourceMappingURL=workflow-canvas-only.js.map

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

@@ -6,6 +6,7 @@
 import { nothing } from 'lit';
 import { Workflow, WorkflowNode, CanvasType, NodeConfiguration } from './workflow-canvas.types.js';
 import type { DatabaseProvider } from './data-node/data-node.types.js';
+import '../select/select.component.js';
 import './workflow-node.component.js';
 import { BaseCanvasElement } from './base-canvas.component.js';
 /**
@@ -17,7 +18,8 @@ import { BaseCanvasElement } from './base-canvas.component.js';
  * @fires node-configured - When a node configuration is requested
  */
 export declare class WorkflowCanvasElement extends BaseCanvasElement {
-    static styles: import("lit").CSSResult[];
+    static useShadowDom: boolean;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     canvasType: CanvasType;
     nodeStatuses: Record<string, 'PENDING' | 'RUNNING' | 'COMPLETED' | 'FAILED'>;
     agentActivity: Record<string, {

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

@@ -23,6 +23,17 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { CanvasType, ExecutionStatus, WorkflowNodeType, TriggerConnectionState, isPersistentTriggerNode, NODE_TEMPLATES, } from './workflow-canvas.types.js';
 import { styles } from './workflow-canvas.style.js';
+// Light DOM component styles — must be included in canvas Shadow DOM
+// so they apply to Light DOM children rendered inside this shadow root
+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 cardStyles } from '../card/card.style.js';
+import { styles as radioStyles } from '../radio/radio.style.js';
+import { styles as inputStyles } from '../input/input.style.js';
+import '../select/select.component.js';
+import labelStyles from '../label/label.style.js';
 import './workflow-node.component.js';
 import { ChatbotCoreController } from '../chatbot/core/chatbot-core.controller.js';
 import { ChatbotSender } from '../chatbot/chatbot.types.js';
@@ -317,9 +328,15 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
             yield this.chatPreviewProvider.connect({
                 workflowId,
                 socketUrl,
-                socketPath: '/socket.io/workflow',
+                socketPath: '/__nk_socketio/',
                 triggerEndpoint: '/api/v1/workflows/{workflowId}/trigger/chat',
                 responseTimeout: 60000,
+                onExecutionStart: (executionId) => {
+                    this.currentExecutionId = executionId;
+                    this.nodeStatuses = {};
+                    this.nodeExecutionData.clear();
+                    this.requestUpdate();
+                },
                 onMessage: (message) => {
                     if (this.chatPreviewController) {
                         this.chatPreviewController.addMessage({
@@ -1400,7 +1417,18 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
     `;
     }
 };
-WorkflowCanvasElement.styles = styles;
+WorkflowCanvasElement.useShadowDom = true;
+WorkflowCanvasElement.styles = [
+    styles,
+    buttonStyles,
+    selectStyles,
+    checkboxStyles,
+    alertStyles,
+    cardStyles,
+    radioStyles,
+    inputStyles,
+    labelStyles,
+];
 __decorate([
     property({ type: String })
 ], WorkflowCanvasElement.prototype, "canvasType", void 0);