@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/canvas/templates/remote-cursors.template.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing } from 'lit';
+import type { RemoteCursor } from '../interfaces/collaboration.interface.js';
+import type { CanvasViewport } from '../interfaces/canvas-host.interface.js';
+export interface RemoteCursorsTemplateData {
+    cursors: RemoteCursor[];
+    viewport: CanvasViewport;
+    localUserId?: string;
+}
+/**
+ * Renders remote user cursors on the canvas, transformed from
+ * canvas coordinates to screen coordinates using viewport zoom/pan.
+ */
+export declare function renderRemoteCursorsTemplate(data: RemoteCursorsTemplateData): typeof nothing | import("lit-html").TemplateResult<1>[];
+//# sourceMappingURL=remote-cursors.template.d.ts.map

package/dist/src/components/canvas/templates/remote-cursors.template.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+/**
+ * Renders remote user cursors on the canvas, transformed from
+ * canvas coordinates to screen coordinates using viewport zoom/pan.
+ */
+export function renderRemoteCursorsTemplate(data) {
+    const { cursors, viewport, localUserId } = data;
+    const visibleCursors = cursors.filter(c => c.userId !== localUserId);
+    if (visibleCursors.length === 0)
+        return nothing;
+    return visibleCursors.map(cursor => {
+        const screenX = cursor.x * viewport.zoom + viewport.panX;
+        const screenY = cursor.y * viewport.zoom + viewport.panY;
+        const cursorStyles = {
+            left: `${screenX}px`,
+            top: `${screenY}px`,
+        };
+        return html `
+      <div class="remote-cursor" style=${styleMap(cursorStyles)}>
+        <svg width="16" height="20" viewBox="0 0 16 20" fill="none">
+          <path
+            d="M1 1L6 18L8.5 10.5L15 8.5L1 1Z"
+            fill="${cursor.color}"
+            stroke="white"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span
+          class="remote-cursor-label"
+          style="background: ${cursor.color};"
+        >${cursor.username}</span>
+      </div>
+    `;
+    });
+}
+//# sourceMappingURL=remote-cursors.template.js.map

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

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, TemplateResult } from 'lit';
+import { CanvasMode, CanvasType } from '../workflow-canvas.types.js';
+/**
+ * Data required for rendering the toolbar
+ */
+export interface ToolbarTemplateData {
+    showToolbar: boolean;
+    mode: CanvasMode;
+    showPalette: boolean;
+    hasSelection: boolean;
+    hasSingleSelection: boolean;
+    readonly?: boolean;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    undoTooltip?: string;
+    redoTooltip?: string;
+    canvasType?: CanvasType;
+    showChatbot?: boolean;
+    onToggleChatbot?: () => void;
+    chatbotUnreadCount?: number;
+    onModeChange: (mode: CanvasMode) => void;
+    onTogglePalette: () => void;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onResetView: () => void;
+    onOpenConfig: () => void;
+    onDelete: () => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+}
+/**
+ * Render the canvas toolbar
+ */
+export declare function renderToolbarTemplate(data: ToolbarTemplateData): TemplateResult | typeof nothing;
+/**
+ * Data required for rendering zoom controls
+ */
+export interface ZoomControlsTemplateData {
+    zoomPercentage: number;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+}
+/**
+ * Render the zoom controls
+ */
+export declare function renderZoomControlsTemplate(data: ZoomControlsTemplateData): TemplateResult;
+//# sourceMappingURL=toolbar.template.d.ts.map

package/dist/src/components/canvas/templates/toolbar.template.js

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+/**
+ * Render the unread badge for the chatbot toggle button
+ */
+function renderChatbotBadge(count) {
+    if (count <= 0)
+        return nothing;
+    return html `<span class="toolbar-badge">${count}</span>`;
+}
+/**
+ * Render the chatbot toggle button (only when callback is provided)
+ */
+function renderChatbotToggle(data) {
+    var _a;
+    if (!data.onToggleChatbot)
+        return nothing;
+    const activeClass = data.showChatbot ? 'active' : '';
+    return html `
+    <div class="toolbar-divider"></div>
+    <button
+      class="toolbar-btn ${activeClass}"
+      @click=${data.onToggleChatbot}
+      title="AI Assistant (Ctrl+/)"
+    >
+      <nr-icon name="message-circle" size="small"></nr-icon>
+      ${renderChatbotBadge((_a = data.chatbotUnreadCount) !== null && _a !== void 0 ? _a : 0)}
+    </button>
+  `;
+}
+/**
+ * Render the canvas toolbar
+ */
+export function renderToolbarTemplate(data) {
+    if (!data.showToolbar)
+        return nothing;
+    return html `
+    <div class="canvas-toolbar">
+      <button
+        class="toolbar-btn"
+        @click=${data.onZoomIn}
+        title="Zoom In"
+      >
+        <nr-icon name="zoom-in" size="small"></nr-icon>
+      </button>
+      <button
+        class="toolbar-btn"
+        @click=${data.onZoomOut}
+        title="Zoom Out"
+      >
+        <nr-icon name="zoom-out" size="small"></nr-icon>
+      </button>
+      <button
+        class="toolbar-btn"
+        @click=${data.onResetView}
+        title="Reset View"
+      >
+        <nr-icon name="maximize" size="small"></nr-icon>
+      </button>
+      <div class="toolbar-divider"></div>
+      <button
+        class="toolbar-btn"
+        @click=${data.onUndo}
+        ?disabled=${data.readonly || !data.canUndo}
+        title=${data.undoTooltip || 'Undo (Ctrl+Z)'}
+      >
+        <nr-icon name="undo-2" size="small"></nr-icon>
+      </button>
+      <button
+        class="toolbar-btn"
+        @click=${data.onRedo}
+        ?disabled=${data.readonly || !data.canRedo}
+        title=${data.redoTooltip || 'Redo (Ctrl+Shift+Z)'}
+      >
+        <nr-icon name="redo-2" size="small"></nr-icon>
+      </button>
+      <div class="toolbar-divider"></div>
+      <button
+        class="toolbar-btn"
+        @click=${data.onOpenConfig}
+        ?disabled=${!data.hasSingleSelection}
+        title="Edit Node (Enter)"
+      >
+        <nr-icon name="settings" size="small"></nr-icon>
+      </button>
+      <button
+        class="toolbar-btn"
+        @click=${data.onDelete}
+        ?disabled=${data.readonly || !data.hasSelection}
+        title="Delete Selected (Del)"
+      >
+        <nr-icon name="trash-2" size="small"></nr-icon>
+      </button>
+      ${renderChatbotToggle(data)}
+    </div>
+  `;
+}
+/**
+ * Render the zoom controls
+ */
+export function renderZoomControlsTemplate(data) {
+    return html `
+    <div class="zoom-controls">
+      <button class="toolbar-btn" @click=${data.onZoomOut}>
+        <nr-icon name="minus" size="small"></nr-icon>
+      </button>
+      <span class="zoom-value">${data.zoomPercentage}%</span>
+      <button class="toolbar-btn" @click=${data.onZoomIn}>
+        <nr-icon name="plus" size="small"></nr-icon>
+      </button>
+    </div>
+  `;
+}
+//# sourceMappingURL=toolbar.template.js.map

package/dist/src/components/canvas/templates/wb-floating-toolbar.template.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing } from 'lit';
+import type { TemplateResult } from 'lit';
+import type { WorkflowNode } from '../workflow-canvas.types.js';
+export declare function wbHasText(node: WorkflowNode): boolean;
+export declare function wbHasFill(node: WorkflowNode): boolean;
+export declare function wbHasBorder(node: WorkflowNode): boolean;
+export interface WbFloatingToolbarCallbacks {
+    onToolbarAction: (nodeId: string, key: string, value: unknown) => void;
+    onDeleteNode: (nodeId: string) => void;
+    onColorHolderClick: (type: 'fill' | 'text' | 'border', e: MouseEvent) => void;
+}
+export interface WbFloatingToolbarData {
+    node: WorkflowNode;
+    nodeScreenPosition: {
+        x: number;
+        y: number;
+    };
+    viewportZoom: number;
+    activeColorPicker: 'fill' | 'text' | 'border' | null;
+    shadowRoot: ShadowRoot | null;
+    hostBoundingRect: DOMRect;
+    callbacks: WbFloatingToolbarCallbacks;
+}
+export declare function renderWbFloatingToolbarTemplate(data: WbFloatingToolbarData): TemplateResult | typeof nothing;
+//# sourceMappingURL=wb-floating-toolbar.template.d.ts.map

package/dist/src/components/canvas/templates/wb-floating-toolbar.template.js

@@ -0,0 +1,219 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { WhiteboardNodeType } from '../workflow-canvas.types.js';
+import { FILL_COLOR_PRESETS, BORDER_COLOR_PRESETS, TEXT_COLOR_PRESETS, FONT_FAMILY_OPTIONS, MERMAID_THEME_OPTIONS, } from '../canvas.constants.js';
+function getColorPickerConfig(activeColorPicker, config) {
+    if (activeColorPicker === 'fill') {
+        return {
+            currentColor: (config.backgroundColor || config.fillColor || '#fef08a'),
+            presets: FILL_COLOR_PRESETS,
+            configKey: 'backgroundColor',
+        };
+    }
+    if (activeColorPicker === 'border') {
+        return {
+            currentColor: (config.borderColor || '#8b5cf6'),
+            presets: BORDER_COLOR_PRESETS,
+            configKey: 'borderColor',
+        };
+    }
+    return {
+        currentColor: (config.textColor || '#1a1a1a'),
+        presets: TEXT_COLOR_PRESETS,
+        configKey: 'textColor',
+    };
+}
+export function wbHasText(node) {
+    return node.type === WhiteboardNodeType.STICKY_NOTE ||
+        node.type === WhiteboardNodeType.TEXT_BLOCK ||
+        node.type === WhiteboardNodeType.VOTING;
+}
+export function wbHasFill(node) {
+    return node.type !== WhiteboardNodeType.DRAWING &&
+        node.type !== WhiteboardNodeType.SHAPE_LINE &&
+        node.type !== WhiteboardNodeType.SHAPE_ARROW &&
+        node.type !== WhiteboardNodeType.ANCHOR &&
+        node.type !== WhiteboardNodeType.WORKFLOW &&
+        node.type !== WhiteboardNodeType.DATABASE;
+}
+export function wbHasBorder(node) {
+    return node.type === WhiteboardNodeType.MERMAID ||
+        node.type === WhiteboardNodeType.SHAPE_RECTANGLE ||
+        node.type === WhiteboardNodeType.IMAGE ||
+        node.type === WhiteboardNodeType.FRAME ||
+        node.type === WhiteboardNodeType.WORKFLOW ||
+        node.type === WhiteboardNodeType.DATABASE;
+}
+// ==================== Template ====================
+export function renderWbFloatingToolbarTemplate(data) {
+    const { node, nodeScreenPosition, viewportZoom, activeColorPicker, shadowRoot, hostBoundingRect, callbacks } = data;
+    const config = node.configuration || {};
+    const hasText = wbHasText(node);
+    const hasFill = wbHasFill(node);
+    const hasBorder = wbHasBorder(node);
+    const nodeWidth = (config.width || 200) * viewportZoom;
+    const toolbarStyles = {
+        left: `${nodeScreenPosition.x + nodeWidth / 2}px`,
+        top: `${nodeScreenPosition.y - 52}px`,
+    };
+    const renderColorPicker = () => {
+        if (!activeColorPicker)
+            return nothing;
+        const holderEl = shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelector(`.wb-color-trigger-${activeColorPicker}`);
+        if (!holderEl)
+            return nothing;
+        const rect = holderEl.getBoundingClientRect();
+        const pickerStyles = {
+            left: `${rect.left - hostBoundingRect.left}px`,
+            top: `${rect.bottom - hostBoundingRect.top + 6}px`,
+        };
+        const { currentColor, presets, configKey } = getColorPickerConfig(activeColorPicker, config);
+        return html `
+      <div class="wb-color-picker-panel" style=${styleMap(pickerStyles)} @mousedown=${(e) => e.stopPropagation()}>
+        <div class="wb-picker-presets">
+          ${presets.map(c => html `
+            <button
+              class="wb-picker-swatch ${currentColor === c ? 'active' : ''}"
+              style="background: ${c};"
+              @click=${() => callbacks.onToolbarAction(node.id, configKey, c)}
+            ></button>
+          `)}
+        </div>
+        <div class="wb-picker-custom">
+          <input
+            type="color"
+            class="wb-picker-native"
+            .value=${currentColor}
+            @input=${(e) => callbacks.onToolbarAction(node.id, configKey, e.target.value)}
+          />
+          <nr-input
+            type="text"
+            size="small"
+            variant="outlined"
+            .value=${currentColor}
+            placeholder="#hex"
+            style="flex: 1;"
+            @nr-input=${(e) => {
+            const val = e.target.value;
+            if (val && CSS.supports('color', val)) {
+                callbacks.onToolbarAction(node.id, configKey, val);
+            }
+        }}
+          ></nr-input>
+        </div>
+      </div>
+    `;
+    };
+    return html `
+    <div class="wb-floating-toolbar" style=${styleMap(toolbarStyles)} @mousedown=${(e) => e.stopPropagation()}>
+      ${hasFill ? html `
+        <div class="wb-toolbar-group">
+          <label class="wb-toolbar-label">Fill</label>
+          <nr-colorholder-box
+            class="wb-color-trigger-fill"
+            .color=${config.backgroundColor || config.fillColor || '#fef08a'}
+            size="small"
+            @click=${(e) => callbacks.onColorHolderClick('fill', e)}
+          ></nr-colorholder-box>
+        </div>
+      ` : nothing}
+
+      ${hasBorder ? html `
+        <div class="wb-toolbar-divider"></div>
+        <div class="wb-toolbar-group">
+          <label class="wb-toolbar-label">Border</label>
+          <nr-colorholder-box
+            class="wb-color-trigger-border"
+            .color=${config.borderColor || '#8b5cf6'}
+            size="small"
+            @click=${(e) => callbacks.onColorHolderClick('border', e)}
+          ></nr-colorholder-box>
+        </div>
+      ` : nothing}
+
+      ${hasText ? html `
+        <div class="wb-toolbar-divider"></div>
+        <div class="wb-toolbar-group">
+          <label class="wb-toolbar-label">Text</label>
+          <nr-colorholder-box
+            class="wb-color-trigger-text"
+            .color=${config.textColor || '#1a1a1a'}
+            size="small"
+            @click=${(e) => callbacks.onColorHolderClick('text', e)}
+          ></nr-colorholder-box>
+        </div>
+        <div class="wb-toolbar-divider"></div>
+        <div class="wb-toolbar-group">
+          <label class="wb-toolbar-label">Size</label>
+          <nr-input
+            type="number"
+            size="small"
+            variant="outlined"
+            .value=${String(config.fontSize || 14)}
+            min="8"
+            max="120"
+            step="1"
+            style="width: 80px;"
+            @nr-input=${(e) => {
+        const val = Number.parseInt(e.target.value, 10);
+        if (!Number.isNaN(val) && val > 0) {
+            callbacks.onToolbarAction(node.id, 'fontSize', val);
+        }
+    }}
+          ></nr-input>
+        </div>
+        <div class="wb-toolbar-divider"></div>
+        <div class="wb-toolbar-group">
+          <label class="wb-toolbar-label">Font</label>
+          <nr-select
+            size="small"
+            .options=${[...FONT_FAMILY_OPTIONS]}
+            .value=${config.fontFamily || 'Inter, sans-serif'}
+            placeholder="Font"
+            style="width: 130px;"
+            @nr-change=${(e) => {
+        const selected = e.target.value;
+        if (selected) {
+            callbacks.onToolbarAction(node.id, 'fontFamily', selected);
+        }
+    }}
+          ></nr-select>
+        </div>
+      ` : nothing}
+
+      ${node.type === WhiteboardNodeType.MERMAID ? html `
+        <div class="wb-toolbar-divider"></div>
+        <div class="wb-toolbar-group">
+          <label class="wb-toolbar-label">Theme</label>
+          <nr-select
+            size="small"
+            .options=${[...MERMAID_THEME_OPTIONS]}
+            .value=${config.mermaidTheme || 'default'}
+            placeholder="Theme"
+            style="width: 110px;"
+            @nr-change=${(e) => {
+        const selected = e.target.value;
+        if (selected) {
+            callbacks.onToolbarAction(node.id, 'mermaidTheme', selected);
+        }
+    }}
+          ></nr-select>
+        </div>
+      ` : nothing}
+
+      <div class="wb-toolbar-divider"></div>
+      <div class="wb-toolbar-group">
+        <button class="wb-toolbar-btn danger" title="Delete" @click=${() => callbacks.onDeleteNode(node.id)}>
+          <nr-icon name="trash-2" size="small"></nr-icon>
+        </button>
+      </div>
+    </div>
+    ${renderColorPicker()}
+  `;
+}
+//# sourceMappingURL=wb-floating-toolbar.template.js.map

package/dist/src/components/canvas/templates/wb-sidebar.template.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { nothing, TemplateResult } from 'lit';
+import { CanvasMode, type NodeType } from '../workflow-canvas.types.js';
+/**
+ * Data required for rendering the whiteboard sidebar
+ */
+export interface WbSidebarTemplateData {
+    mode: CanvasMode;
+    readonly: boolean;
+    shapesFlyoutOpen: boolean;
+    onModeChange: (mode: CanvasMode) => void;
+    onAddNode: (type: NodeType) => void;
+    onToggleShapesFlyout: () => void;
+}
+/**
+ * Render the whiteboard left sidebar (Miro-style)
+ */
+export declare function renderWbSidebarTemplate(data: WbSidebarTemplateData): TemplateResult | typeof nothing;
+//# sourceMappingURL=wb-sidebar.template.d.ts.map

package/dist/src/components/canvas/templates/wb-sidebar.template.js

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+import { CanvasMode, WhiteboardNodeType } from '../workflow-canvas.types.js';
+const SHAPES = [
+    { type: WhiteboardNodeType.SHAPE_RECTANGLE, icon: 'square', label: 'Rectangle' },
+    { type: WhiteboardNodeType.SHAPE_CIRCLE, icon: 'circle', label: 'Circle' },
+    { type: WhiteboardNodeType.SHAPE_DIAMOND, icon: 'diamond', label: 'Diamond' },
+    { type: WhiteboardNodeType.SHAPE_TRIANGLE, icon: 'triangle', label: 'Triangle' },
+    { type: WhiteboardNodeType.SHAPE_ARROW, icon: 'arrow-right', label: 'Arrow' },
+    { type: WhiteboardNodeType.SHAPE_LINE, icon: 'minus', label: 'Line' },
+    { type: WhiteboardNodeType.SHAPE_STAR, icon: 'star', label: 'Star' },
+    { type: WhiteboardNodeType.SHAPE_HEXAGON, icon: 'hexagon', label: 'Hexagon' },
+];
+/**
+ * Render the whiteboard left sidebar (Miro-style)
+ */
+export function renderWbSidebarTemplate(data) {
+    if (data.readonly)
+        return nothing;
+    return html `
+    <div class="wb-sidebar" @mousedown=${(e) => e.stopPropagation()}>
+      <!-- Mode tools -->
+      <button
+        class="wb-sidebar-btn ${data.mode === CanvasMode.SELECT ? 'active' : ''}"
+        @click=${() => data.onModeChange(CanvasMode.SELECT)}
+        title="Select (V)"
+      >
+        <nr-icon name="mouse-pointer" size="small"></nr-icon>
+      </button>
+      <button
+        class="wb-sidebar-btn ${data.mode === CanvasMode.PAN ? 'active' : ''}"
+        @click=${() => data.onModeChange(CanvasMode.PAN)}
+        title="Pan (H)"
+      >
+        <nr-icon name="hand" size="small"></nr-icon>
+      </button>
+
+      <div class="wb-sidebar-divider"></div>
+
+      <!-- Element tools -->
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.STICKY_NOTE)}
+        title="Sticky Note"
+      >
+        <nr-icon name="sticky-note" size="small"></nr-icon>
+      </button>
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.TEXT_BLOCK)}
+        title="Text Block"
+      >
+        <nr-icon name="type" size="small"></nr-icon>
+      </button>
+
+      <!-- Shapes with flyout -->
+      <div class="wb-sidebar-shapes-wrapper">
+        <button
+          class="wb-sidebar-btn ${data.shapesFlyoutOpen ? 'active' : ''}"
+          @click=${data.onToggleShapesFlyout}
+          title="Shapes"
+        >
+          <nr-icon name="square" size="small"></nr-icon>
+        </button>
+        ${data.shapesFlyoutOpen ? html `
+          <div class="wb-shapes-flyout">
+            ${SHAPES.map(shape => html `
+              <button
+                class="wb-shapes-flyout-btn"
+                @click=${() => data.onAddNode(shape.type)}
+                title=${shape.label}
+              >
+                <nr-icon name=${shape.icon} size="small"></nr-icon>
+              </button>
+            `)}
+          </div>
+        ` : nothing}
+      </div>
+
+      <div class="wb-sidebar-divider"></div>
+
+      <!-- Media & tools -->
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.IMAGE)}
+        title="Image"
+      >
+        <nr-icon name="image" size="small"></nr-icon>
+      </button>
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.DRAWING)}
+        title="Drawing"
+      >
+        <nr-icon name="pen-tool" size="small"></nr-icon>
+      </button>
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.MERMAID)}
+        title="Mermaid Diagram"
+      >
+        <nr-icon name="git-branch" size="small"></nr-icon>
+      </button>
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.VOTING)}
+        title="Voting"
+      >
+        <nr-icon name="thumbs-up" size="small"></nr-icon>
+      </button>
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.WORKFLOW)}
+        title="Workflow"
+      >
+        <nr-icon name="layers" size="small"></nr-icon>
+      </button>
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.DATABASE)}
+        title="Database Table"
+      >
+        <nr-icon name="table" size="small"></nr-icon>
+      </button>
+
+      <div class="wb-sidebar-divider"></div>
+
+      <!-- Frame -->
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.FRAME)}
+        title="Frame"
+      >
+        <nr-icon name="frame" size="small"></nr-icon>
+      </button>
+
+      <!-- Anchor -->
+      <button
+        class="wb-sidebar-btn"
+        @click=${() => data.onAddNode(WhiteboardNodeType.ANCHOR)}
+        title="Anchor"
+      >
+        <nr-icon name="anchor" size="small"></nr-icon>
+      </button>
+    </div>
+  `;
+}
+//# sourceMappingURL=wb-sidebar.template.js.map