@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,809 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var WhiteboardNodeElement_1;
+import { LitElement, html, svg, nothing } from 'lit';
+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';
+import '../icon/icon.component.js';
+/**
+ * Whiteboard node component for displaying Miro-style visual elements
+ *
+ * @element whiteboard-node
+ * @fires node-mousedown - When node is clicked for dragging
+ * @fires port-mousedown - When a port is clicked to start connection
+ * @fires port-mouseup - When mouse is released on a port
+ * @fires node-dblclick - When node is double-clicked for editing
+ * @fires node-click - When node is clicked (for onClick actions like pan-to-anchor)
+ * @fires note-content-change - When text content changes
+ * @fires note-edit-end - When editing ends
+ * @fires note-resize-start - When resize handle is grabbed
+ */
+let WhiteboardNodeElement = WhiteboardNodeElement_1 = class WhiteboardNodeElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.dragging = false;
+        this.connectingPortId = null;
+        this.editing = false;
+        this.remoteSelection = null;
+        this.remoteTyping = null;
+        this.actionTargetLabel = '';
+        this._mermaidSvg = '';
+        this._mermaidError = '';
+        this._lastMermaidDef = '';
+        this._lastMermaidTheme = '';
+        /** Track mousedown position to distinguish clicks from drags */
+        this._mouseDownPos = null;
+        this._trackMouseDown = (e) => {
+            this._mouseDownPos = { x: e.clientX, y: e.clientY };
+        };
+        this._handleHostClick = (e) => {
+            // Suppress click if mouse moved beyond threshold (i.e. a drag happened)
+            if (this._mouseDownPos) {
+                const dx = e.clientX - this._mouseDownPos.x;
+                const dy = e.clientY - this._mouseDownPos.y;
+                if (Math.abs(dx) > WhiteboardNodeElement_1.CLICK_THRESHOLD ||
+                    Math.abs(dy) > WhiteboardNodeElement_1.CLICK_THRESHOLD) {
+                    this._mouseDownPos = null;
+                    return;
+                }
+            }
+            this._mouseDownPos = null;
+            e.stopPropagation();
+            this.dispatchEvent(new CustomEvent('node-click', {
+                detail: { node: this.node, event: e },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('mousedown', this._trackMouseDown);
+        this.addEventListener('click', this._handleHostClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('mousedown', this._trackMouseDown);
+        this.removeEventListener('click', this._handleHostClick);
+    }
+    _handleActionBadgeMouseDown(e) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+    }
+    _handleActionBadgeClick(e) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        this.dispatchEvent(new CustomEvent('node-action-trigger', {
+            detail: { node: this.node, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleActionBadgeTouchEnd(e) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('node-action-trigger', {
+            detail: { node: this.node, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updated(changedProperties) {
+        var _a, _b, _c, _d;
+        super.updated(changedProperties);
+        // Focus textarea when entering edit mode
+        if (changedProperties.has('editing') && this.editing) {
+            const textarea = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.wb-textarea');
+            if (textarea) {
+                textarea.focus();
+            }
+        }
+        // Re-render mermaid diagram when node config changes
+        if (changedProperties.has('node') && ((_b = this.node) === null || _b === void 0 ? void 0 : _b.type) === WhiteboardNodeType.MERMAID) {
+            const def = ((_c = this.node.configuration) === null || _c === void 0 ? void 0 : _c.textContent) || '';
+            const theme = ((_d = this.node.configuration) === null || _d === void 0 ? void 0 : _d.mermaidTheme) || 'default';
+            if (def && (def !== this._lastMermaidDef || theme !== this._lastMermaidTheme)) {
+                this._lastMermaidDef = def;
+                this._lastMermaidTheme = theme;
+                this._renderMermaid(def, theme);
+            }
+        }
+    }
+    _renderMermaid(definition_1) {
+        return __awaiter(this, arguments, void 0, function* (definition, theme = 'default') {
+            mermaid.initialize({ startOnLoad: false, theme: theme });
+            try {
+                const { svg } = yield mermaid.render(`mermaid-${this.node.id.replaceAll(/[^a-zA-Z0-9]/g, '')}`, definition);
+                this._mermaidSvg = svg;
+                this._mermaidError = '';
+            }
+            catch (err) {
+                this._mermaidError = err instanceof Error ? err.message : 'Invalid Mermaid syntax';
+                this._mermaidSvg = '';
+            }
+        });
+    }
+    handleNodeMouseDown(e) {
+        if (e.target.classList.contains('port'))
+            return;
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('node-mousedown', {
+            detail: { node: this.node, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleNodeDblClick(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('node-dblclick', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleWbTextBlur(e) {
+        const textarea = e.target;
+        this.dispatchEvent(new CustomEvent('note-content-change', {
+            detail: { node: this.node, content: textarea.value },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('note-edit-end', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleWbTextKeydown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.dispatchEvent(new CustomEvent('note-edit-end', {
+                detail: { node: this.node },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    handleWbResizeStart(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('note-resize-start', {
+            detail: { node: this.node, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // ==================== Render Methods ====================
+    renderWbStickyNote(classes, styles, config) {
+        const textContent = config.textContent || 'Add note...';
+        const bgColor = config.backgroundColor || '#fef08a';
+        const textColor = config.textColor || '#713f12';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-sticky-note': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-sticky-body" style="background: ${bgColor}; color: ${textColor};">
+          ${this.editing ? html `
+            <textarea
+              class="wb-textarea"
+              .value=${textContent}
+              @blur=${this.handleWbTextBlur}
+              @keydown=${this.handleWbTextKeydown}
+              @mousedown=${(e) => e.stopPropagation()}
+              @dblclick=${(e) => e.stopPropagation()}
+              style="color: ${textColor};"
+            ></textarea>
+          ` : html `
+            <span class="wb-text">${textContent}</span>
+          `}
+        </div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderWbTextBlock(classes, styles, config) {
+        const textContent = config.textContent || 'Type text...';
+        const textColor = config.textColor || '#1a1a1a';
+        const fontSize = config.fontSize || 16;
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-text-block': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-text-body" style="color: ${textColor}; font-size: ${fontSize}px;">
+          ${this.editing ? html `
+            <textarea
+              class="wb-textarea"
+              .value=${textContent}
+              @blur=${this.handleWbTextBlur}
+              @keydown=${this.handleWbTextKeydown}
+              @mousedown=${(e) => e.stopPropagation()}
+              @dblclick=${(e) => e.stopPropagation()}
+              style="color: ${textColor}; font-size: ${fontSize}px;"
+            ></textarea>
+          ` : html `
+            <span class="wb-text">${textContent}</span>
+          `}
+        </div>
+      </div>
+    `;
+    }
+    renderWbRectangle(classes, styles, config) {
+        const textContent = config.textContent || '';
+        const bgColor = config.backgroundColor || config.fillColor || '#3b82f6';
+        const textColor = config.textColor || '#ffffff';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-shape': true, 'wb-shape-rectangle': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-shape-body" style="background: ${bgColor}; color: ${textColor};">
+          ${textContent ? html `<span class="wb-shape-text">${textContent}</span>` : nothing}
+        </div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderWbShape(classes, styles, config, shape) {
+        const textContent = config.textContent || '';
+        const bgColor = config.backgroundColor || config.fillColor || NODE_COLORS[this.node.type] || '#8b5cf6';
+        const textColor = config.textColor || '#ffffff';
+        const width = config.width || 120;
+        const height = config.height || 120;
+        const stroke = config.borderColor || 'none';
+        const strokeWidth = config.borderWidth || 0;
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-shape': true, [`wb-shape-${shape}`]: true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <svg class="wb-shape-svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
+          ${this.renderSvgShape(shape, width, height, bgColor, stroke, strokeWidth)}
+        </svg>
+        ${textContent ? html `<span class="wb-shape-text" style="color: ${textColor};">${textContent}</span>` : nothing}
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderSvgShape(shape, w, h, fill, stroke, strokeWidth) {
+        switch (shape) {
+            case 'circle':
+                return svg `<ellipse cx="${w / 2}" cy="${h / 2}" rx="${w / 2 - 2}" ry="${h / 2 - 2}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+            case 'diamond':
+                return svg `<polygon points="${w / 2},2 ${w - 2},${h / 2} ${w / 2},${h - 2} 2,${h / 2}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+            case 'triangle':
+                return svg `<polygon points="${w / 2},2 ${w - 2},${h - 2} 2,${h - 2}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+            case 'star': {
+                const cx = w / 2, cy = h / 2;
+                const outerR = Math.min(w, h) / 2 - 2;
+                const innerR = outerR * 0.4;
+                const points = [];
+                for (let i = 0; i < 10; i++) {
+                    const r = i % 2 === 0 ? outerR : innerR;
+                    const angle = (Math.PI / 2) + (Math.PI * 2 * i / 10);
+                    points.push(`${cx + r * Math.cos(angle)},${cy - r * Math.sin(angle)}`);
+                }
+                return svg `<polygon points="${points.join(' ')}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+            }
+            case 'hexagon': {
+                const cx = w / 2, cy = h / 2;
+                const r = Math.min(w, h) / 2 - 2;
+                const points = [];
+                for (let i = 0; i < 6; i++) {
+                    const angle = (Math.PI / 6) + (Math.PI * 2 * i / 6);
+                    points.push(`${cx + r * Math.cos(angle)},${cy - r * Math.sin(angle)}`);
+                }
+                return svg `<polygon points="${points.join(' ')}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+            }
+            default:
+                return svg `<rect x="2" y="2" width="${w - 4}" height="${h - 4}" rx="4" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+        }
+    }
+    renderWbLine(classes, styles, config, hasArrow) {
+        const width = config.width || 200;
+        const height = config.height || 4;
+        const bgColor = config.backgroundColor || config.fillColor || '#6b7280';
+        const svgH = Math.max(height, 20);
+        const midY = svgH / 2;
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-shape': true, 'wb-shape-line': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <svg class="wb-shape-svg" viewBox="0 0 ${width} ${svgH}" width="${width}" height="${svgH}">
+          ${svg `<line x1="0" y1="${midY}" x2="${width}" y2="${midY}" stroke="${bgColor}" stroke-width="3" />`}
+          ${hasArrow ? svg `<polygon points="${width - 12},${midY - 6} ${width},${midY} ${width - 12},${midY + 6}" fill="${bgColor}" />` : nothing}
+        </svg>
+      </div>
+    `;
+    }
+    renderWbImage(classes, styles, config) {
+        const imageUrl = config.imageUrl || '';
+        const imageAlt = config.imageAlt || 'Image';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-image': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-image-body">
+          ${imageUrl ? html `
+            <img class="wb-image-content" src=${imageUrl} alt=${imageAlt} />
+          ` : html `
+            <div class="wb-image-placeholder">
+              <nr-icon name="image" size="large"></nr-icon>
+              <span>Double-click to add image</span>
+            </div>
+          `}
+        </div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderWbFrame(classes, styles, config) {
+        const label = config.textContent || this.node.name || 'Frame';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-frame': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-frame-label">${label}</div>
+        <div class="wb-frame-body"></div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderWbVoting(classes, styles, config) {
+        const textContent = config.textContent || 'Vote topic';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-voting': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-voting-body">
+          <nr-icon name="thumbs-up" size="medium"></nr-icon>
+          <span class="wb-voting-text">${textContent}</span>
+        </div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderWbMermaid(classes, styles, config) {
+        const definition = config.textContent || '';
+        const bgColor = config.backgroundColor || '#ffffff';
+        const borderColor = config.borderColor || '#8b5cf6';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-mermaid': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        ${this.node.name ? html `<div class="wb-mermaid-label">${this.node.name}</div>` : nothing}
+        <div class="wb-mermaid-body" style="background: ${bgColor}; border-color: ${borderColor};">
+          ${this._mermaidSvg ? html `
+            <div class="wb-mermaid-content">${unsafeHTML(this._mermaidSvg)}</div>
+          ` : this._mermaidError ? html `
+            <div class="wb-mermaid-placeholder">
+              <nr-icon name="alert-triangle" size="large"></nr-icon>
+              <span>${this._mermaidError}</span>
+            </div>
+          ` : !definition ? html `
+            <div class="wb-mermaid-placeholder">
+              <nr-icon name="git-branch" size="large"></nr-icon>
+              <span>Double-click to add Mermaid diagram</span>
+            </div>
+          ` : html `
+            <div class="wb-mermaid-placeholder">
+              <nr-icon name="loader" size="large"></nr-icon>
+              <span>Rendering...</span>
+            </div>
+          `}
+        </div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderWbAnchor(classes, styles, config) {
+        const label = config.anchorLabel || 'Anchor';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-anchor': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <nr-icon name="anchor" size="small"></nr-icon>
+        ${this.editing ? html `
+          <input
+            type="text"
+            class="wb-anchor-input"
+            .value=${label}
+            @blur=${(e) => {
+            const input = e.target;
+            this.dispatchEvent(new CustomEvent('note-content-change', {
+                detail: { node: this.node, content: input.value },
+                bubbles: true,
+                composed: true,
+            }));
+            this.dispatchEvent(new CustomEvent('note-edit-end', {
+                detail: { node: this.node },
+                bubbles: true,
+                composed: true,
+            }));
+        }}
+            @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === 'Escape') {
+                e.preventDefault();
+                e.target.blur();
+            }
+        }}
+            @mousedown=${(e) => e.stopPropagation()}
+            @dblclick=${(e) => e.stopPropagation()}
+          />
+        ` : html `
+          <span class="wb-anchor-label">${label}</span>
+        `}
+      </div>
+    `;
+    }
+    renderWbWorkflow(classes, styles, config) {
+        const workflowName = config.workflowName || 'Workflow';
+        const steps = config.workflowSteps || [];
+        const headerColor = NODE_COLORS[WhiteboardNodeType.WORKFLOW] || '#6366f1';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-workflow': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-workflow-header" style="background: ${headerColor};">
+          <nr-icon name="layers" size="small"></nr-icon>
+          <span class="wb-workflow-header-name">${workflowName}</span>
+        </div>
+        <div class="wb-workflow-body">
+          ${steps.length > 0 ? html `
+            <div class="wb-workflow-steps">
+              ${steps.map(step => html `
+                <div class="wb-workflow-step">
+                  <nr-icon name=${this._getStepIcon(step.type)} size="small"></nr-icon>
+                  <span class="wb-workflow-step-name">${step.name}</span>
+                </div>
+              `)}
+            </div>
+          ` : html `
+            <div class="wb-workflow-empty">
+              <nr-icon name="layers" size="large"></nr-icon>
+              <span>Double-click to configure</span>
+            </div>
+          `}
+        </div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    renderWbDatabase(classes, styles, config) {
+        const tableName = config.dbTableName || 'Table';
+        const columns = config.dbTableColumns || [];
+        const primaryKey = config.dbPrimaryKey || '';
+        const headerColor = NODE_COLORS[WhiteboardNodeType.DATABASE] || '#64748b';
+        return html `
+      <div
+        class=${classMap(Object.assign(Object.assign({}, classes), { 'wb-database': true }))}
+        style=${styleMap(styles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="wb-database-header" style="background: ${headerColor};">
+          <nr-icon name="table" size="small"></nr-icon>
+          <span class="wb-database-header-name">${tableName}</span>
+        </div>
+        <div class="wb-database-body">
+          ${columns.length > 0 ? html `
+            <div class="wb-database-columns">
+              ${columns.map(col => html `
+                <div class="wb-database-column ${col.name === primaryKey ? 'primary-key' : ''}">
+                  <nr-icon name=${col.name === primaryKey ? 'key' : this._getColumnTypeIcon(col.type)} size="small"></nr-icon>
+                  <span class="wb-database-column-name">${col.name}</span>
+                  <span class="wb-database-column-type">${col.type}</span>
+                  ${col.nullable === false ? html `<span class="wb-database-column-required">*</span>` : nothing}
+                </div>
+              `)}
+            </div>
+          ` : html `
+            <div class="wb-database-empty">
+              <nr-icon name="table" size="large"></nr-icon>
+              <span>Double-click to configure</span>
+            </div>
+          `}
+        </div>
+        ${this.selected ? html `<div class="wb-resize-handle" @mousedown=${this.handleWbResizeStart}></div>` : nothing}
+      </div>
+    `;
+    }
+    _getColumnTypeIcon(type) {
+        const t = type.toLowerCase();
+        if (['number', 'int', 'integer', 'decimal', 'float', 'bigint', 'numeric'].some(k => t.includes(k)))
+            return 'hash';
+        if (['date', 'datetime', 'timestamp', 'time'].some(k => t.includes(k)))
+            return 'calendar';
+        if (['boolean', 'bool'].some(k => t.includes(k)))
+            return 'toggle-right';
+        if (['json', 'array', 'jsonb'].some(k => t.includes(k)))
+            return 'braces';
+        if (['text', 'varchar', 'char', 'string'].some(k => t.includes(k)))
+            return 'type';
+        if (['blob', 'binary', 'bytea'].some(k => t.includes(k)))
+            return 'file';
+        return 'minus';
+    }
+    _getStepIcon(type) {
+        const iconMap = {
+            START: 'play',
+            END: 'stop',
+            HTTP: 'globe',
+            FUNCTION: 'code',
+            CONDITION: 'git-branch',
+            LOOP: 'repeat',
+            DELAY: 'clock',
+            TRANSFORM: 'shuffle',
+            LLM: 'brain',
+            SUB_WORKFLOW: 'layers',
+            DATABASE: 'database',
+            EMAIL: 'mail',
+            NOTIFICATION: 'bell',
+        };
+        return iconMap[type] || 'circle';
+    }
+    renderActionIndicator() {
+        var _a;
+        const action = (_a = this.node.configuration) === null || _a === void 0 ? void 0 : _a.onClickAction;
+        if (!action || action === 'none')
+            return nothing;
+        const config = this.node.configuration || {};
+        const width = config.width || 200;
+        const height = config.height || 200;
+        // Use a proxy container that matches the node's position and size so the
+        // badge can use simple bottom/left:50% positioning relative to it.
+        return html `
+      <div
+        class="wb-action-badge-anchor"
+        style="position:absolute; left:${this.node.position.x}px; top:${this.node.position.y}px; width:${width}px; height:${height}px; pointer-events:none;"
+      >
+        <div
+          class="wb-action-indicator"
+          @mousedown=${this._handleActionBadgeMouseDown}
+          @click=${this._handleActionBadgeClick}
+          @touchend=${this._handleActionBadgeTouchEnd}
+        >
+          <nr-icon name="navigation" size="small"></nr-icon>
+          <span class="wb-action-indicator-label">${this.actionTargetLabel || 'Anchor'}</span>
+        </div>
+      </div>
+    `;
+    }
+    renderRemoteOverlays() {
+        return html `
+      ${this.remoteSelection ? html `
+        <div
+          class="remote-selection-ring"
+          style="border-color: ${this.remoteSelection.color};"
+        ></div>
+      ` : nothing}
+      ${this.remoteTyping ? html `
+        <div
+          class="remote-typing-indicator"
+          style="color: ${this.remoteTyping.color};"
+        >
+          ${this.remoteTyping.username} is typing...
+        </div>
+      ` : nothing}
+    `;
+    }
+    render() {
+        var _a, _b;
+        const config = this.node.configuration || {};
+        const nodeType = this.node.type;
+        const width = config.width || 200;
+        const height = config.height || 200;
+        const bgColor = config.backgroundColor || config.fillColor || NODE_COLORS[this.node.type] || '#3b82f6';
+        const textColor = config.textColor || '#1a1a1a';
+        const fontSize = config.fontSize || 14;
+        const textAlign = config.textAlign || 'center';
+        const borderColor = config.borderColor || 'transparent';
+        const borderWidth = config.borderWidth || 0;
+        const borderRadius = config.borderRadius || 0;
+        const opacity = (_a = config.opacity) !== null && _a !== void 0 ? _a : 1;
+        const rotation = config.rotation || 0;
+        const containerClasses = {
+            'node-container': true,
+            'wb-node': true,
+            selected: this.selected,
+            dragging: this.dragging,
+            editing: this.editing,
+            'remote-selected': !!this.remoteSelection,
+        };
+        const containerStyles = {
+            left: `${this.node.position.x}px`,
+            top: `${this.node.position.y}px`,
+            '--wb-width': `${width}px`,
+            '--wb-height': `${height}px`,
+            '--wb-bg': bgColor,
+            '--wb-text-color': textColor,
+            '--wb-font-size': `${fontSize}px`,
+            '--wb-text-align': textAlign,
+            '--wb-border-color': borderColor,
+            '--wb-border-width': `${borderWidth}px`,
+            '--wb-border-radius': `${borderRadius}px`,
+            '--wb-opacity': `${opacity}`,
+            '--wb-rotation': `${rotation}deg`,
+        };
+        if (this.remoteSelection) {
+            containerStyles['--remote-selection-color'] = this.remoteSelection.color;
+        }
+        let nodeContent;
+        switch (nodeType) {
+            case WhiteboardNodeType.STICKY_NOTE:
+                nodeContent = this.renderWbStickyNote(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.TEXT_BLOCK:
+                nodeContent = this.renderWbTextBlock(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.SHAPE_CIRCLE:
+                nodeContent = this.renderWbShape(containerClasses, containerStyles, config, 'circle');
+                break;
+            case WhiteboardNodeType.SHAPE_DIAMOND:
+                nodeContent = this.renderWbShape(containerClasses, containerStyles, config, 'diamond');
+                break;
+            case WhiteboardNodeType.SHAPE_TRIANGLE:
+                nodeContent = this.renderWbShape(containerClasses, containerStyles, config, 'triangle');
+                break;
+            case WhiteboardNodeType.SHAPE_STAR:
+                nodeContent = this.renderWbShape(containerClasses, containerStyles, config, 'star');
+                break;
+            case WhiteboardNodeType.SHAPE_HEXAGON:
+                nodeContent = this.renderWbShape(containerClasses, containerStyles, config, 'hexagon');
+                break;
+            case WhiteboardNodeType.SHAPE_ARROW:
+            case WhiteboardNodeType.SHAPE_LINE:
+                nodeContent = this.renderWbLine(containerClasses, containerStyles, config, nodeType === WhiteboardNodeType.SHAPE_ARROW);
+                break;
+            case WhiteboardNodeType.IMAGE:
+                nodeContent = this.renderWbImage(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.FRAME:
+                nodeContent = this.renderWbFrame(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.VOTING:
+                nodeContent = this.renderWbVoting(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.MERMAID:
+                nodeContent = this.renderWbMermaid(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.ANCHOR:
+                nodeContent = this.renderWbAnchor(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.WORKFLOW:
+                nodeContent = this.renderWbWorkflow(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.DATABASE:
+                nodeContent = this.renderWbDatabase(containerClasses, containerStyles, config);
+                break;
+            case WhiteboardNodeType.SHAPE_RECTANGLE:
+            default:
+                nodeContent = this.renderWbRectangle(containerClasses, containerStyles, config);
+                break;
+        }
+        // Action badge is rendered as a standalone absolute-positioned element
+        // (not inside the wrapper) because the node container uses position: relative
+        // with left/top offsets, making wrapper-relative positioning incorrect.
+        const hasAction = ((_b = this.node.configuration) === null || _b === void 0 ? void 0 : _b.onClickAction) &&
+            this.node.configuration.onClickAction !== 'none';
+        // If we have remote overlays, wrap in a container
+        if (this.remoteSelection || this.remoteTyping) {
+            return html `
+        <div class="remote-overlay-wrapper" style="position: relative;">
+          ${nodeContent}
+          ${this.renderRemoteOverlays()}
+        </div>
+        ${hasAction ? this.renderActionIndicator() : nothing}
+      `;
+        }
+        if (hasAction) {
+            return html `${nodeContent}${this.renderActionIndicator()}`;
+        }
+        return nodeContent;
+    }
+};
+WhiteboardNodeElement.styles = styles;
+WhiteboardNodeElement.CLICK_THRESHOLD = 5;
+__decorate([
+    property({ type: Object })
+], WhiteboardNodeElement.prototype, "node", void 0);
+__decorate([
+    property({ type: Boolean })
+], WhiteboardNodeElement.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], WhiteboardNodeElement.prototype, "dragging", void 0);
+__decorate([
+    property({ type: String })
+], WhiteboardNodeElement.prototype, "connectingPortId", void 0);
+__decorate([
+    property({ type: Boolean })
+], WhiteboardNodeElement.prototype, "editing", void 0);
+__decorate([
+    property({ type: Object })
+], WhiteboardNodeElement.prototype, "remoteSelection", void 0);
+__decorate([
+    property({ type: Object })
+], WhiteboardNodeElement.prototype, "remoteTyping", void 0);
+__decorate([
+    property({ type: String })
+], WhiteboardNodeElement.prototype, "actionTargetLabel", void 0);
+__decorate([
+    state()
+], WhiteboardNodeElement.prototype, "_mermaidSvg", void 0);
+__decorate([
+    state()
+], WhiteboardNodeElement.prototype, "_mermaidError", void 0);
+WhiteboardNodeElement = WhiteboardNodeElement_1 = __decorate([
+    customElement('whiteboard-node')
+], WhiteboardNodeElement);
+export { WhiteboardNodeElement };
+//# sourceMappingURL=whiteboard-node.component.js.map