@nyaruka/temba-components 0.127.0 → 0.129.0

package/out-tsc/src/flow/EditorNode.js

@@ -6,29 +6,13 @@ import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { getStore } from '../store/Store';
 export class EditorNode extends RapidElement {
-    constructor() {
-        super(...arguments);
-        // Drag state properties
-        this.isDragging = false;
-        this.dragStartPos = { x: 0, y: 0 };
-        this.nodeStartPos = { left: 0, top: 0 };
-        // Bound event handlers to maintain proper 'this' context
-        this.boundMouseMove = this.handleMouseMove.bind(this);
-        this.boundMouseUp = this.handleMouseUp.bind(this);
-    }
     createRenderRoot() {
         return this;
     }
-    /**
-     * Snaps a coordinate value to the nearest 20px grid position
-     */
-    snapToGrid(value) {
-        return Math.round(value / 20) * 20;
-    }
     static get styles() {
         return css `
+
       .node {
-        position: absolute;
         background-color: #fff;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
         min-width: 200px;
@@ -37,7 +21,7 @@ export class EditorNode extends RapidElement {
         color: #333;
         cursor: move;
         user-select: none;
-        z-index: 500;
+
       }
 
       .node:hover {
@@ -52,21 +36,59 @@ export class EditorNode extends RapidElement {
         
       .action {
         max-width: 200px;
+        position: relative;
+      }
+
+      .action.sortable {
+        display: flex;
+        align-items: stretch;
+      }
+
+      .action .action-content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
       }
 
       .action .body {
         padding: 1em;
       }
 
+      .action .drag-handle {
+        opacity: 0;
+        transition: all 200ms ease-in-out;
+        cursor: move;
+        background: rgba(0, 0, 0, 0.02);
+        max-width:0px;
+        position: absolute;
+      }
+
+      .action:hover .drag-handle {
+        opacity: 0.5;
+        padding: 0.25em;
+        max-width: 20px;
+      }
+
+      .action .drag-handle:hover {
+        opacity: 1;
+        
+      }
+
       .action .title,
       .router .title {
+        display: flex;
         color: #fff;
         padding: 5px 1px;
         text-align: center;
         font-size: 1em;
         font-weight: normal;
+
       }
 
+      .title .name {
+        flex-grow: 1;
+        }
+
       .quick-replies {
         margin-top: 0.5em;
       }
@@ -120,144 +142,74 @@ export class EditorNode extends RapidElement {
       }
   }`;
     }
+    constructor() {
+        super();
+        this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
+    }
     updated(changes) {
+        var _a;
         super.updated(changes);
         if (changes.has('node')) {
-            this.plumber.makeTarget(this.node.uuid);
-            // our node was changed, see if we have new destinations
-            for (const exit of this.node.exits) {
-                if (!exit.destination_uuid) {
-                    this.plumber.makeSource(exit.uuid);
-                }
-                else {
-                    this.plumber.connectIds(exit.uuid, exit.destination_uuid);
+            // make our initial connections
+            if (changes.get('node') === undefined) {
+                // this.plumber.makeTarget(this.node.uuid);
+                for (const exit of this.node.exits) {
+                    if (!exit.destination_uuid) {
+                        this.plumber.makeSource(exit.uuid);
+                    }
+                    else {
+                        this.plumber.connectIds(exit.uuid, exit.destination_uuid);
+                    }
                 }
             }
-            const ele = this.querySelector('.node');
+            const ele = this.parentElement;
             const rect = ele.getBoundingClientRect();
-            getStore()
-                .getState()
-                .expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
-            // Add drag event listeners to the node
-            this.addDragEventListeners();
-        }
-    }
-    addDragEventListeners() {
-        const nodeElement = this.querySelector('.node');
-        if (!nodeElement)
-            return;
-        nodeElement.addEventListener('mousedown', this.handleMouseDown.bind(this));
-        document.addEventListener('mousemove', this.boundMouseMove);
-        document.addEventListener('mouseup', this.boundMouseUp);
-    }
-    handleMouseDown(event) {
-        // Only start dragging if clicking on the node itself, not on exits or other interactive elements
-        const target = event.target;
-        if (target.classList.contains('exit') || target.closest('.exit')) {
-            return;
-        }
-        this.isDragging = true;
-        this.dragStartPos = { x: event.clientX, y: event.clientY };
-        this.nodeStartPos = {
-            left: this.ui.position.left,
-            top: this.ui.position.top
-        };
-        // Add dragging class for visual feedback
-        const nodeElement = this.querySelector('.node');
-        if (nodeElement) {
-            nodeElement.classList.add('dragging');
-        }
-        // Elevate connections for this node during dragging
-        if (this.plumber) {
-            this.plumber.elevateNodeConnections(this.node.uuid);
+            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
         }
-        event.preventDefault();
-        event.stopPropagation();
     }
-    handleMouseMove(event) {
-        if (!this.isDragging)
-            return;
-        const deltaX = event.clientX - this.dragStartPos.x;
-        const deltaY = event.clientY - this.dragStartPos.y;
-        const newLeft = this.nodeStartPos.left + deltaX;
-        const newTop = this.nodeStartPos.top + deltaY;
-        // Update the UI position temporarily (for visual feedback)
-        const nodeElement = this.querySelector('.node');
-        if (nodeElement) {
-            nodeElement.style.left = `${newLeft}px`;
-            nodeElement.style.top = `${newTop}px`;
-        }
-        // Repaint connections during dragging for smooth updates
-        if (this.plumber) {
-            this.plumber.repaintEverything();
-        }
-    }
-    handleMouseUp(event) {
-        if (!this.isDragging)
-            return;
-        this.isDragging = false;
-        // Remove dragging class
-        const nodeElement = this.querySelector('.node');
-        if (nodeElement) {
-            nodeElement.classList.remove('dragging');
-        }
-        // Restore normal z-index for connections
-        if (this.plumber) {
-            this.plumber.restoreNodeConnections(this.node.uuid);
-        }
-        const deltaX = event.clientX - this.dragStartPos.x;
-        const deltaY = event.clientY - this.dragStartPos.y;
-        const newLeft = this.nodeStartPos.left + deltaX;
-        const newTop = this.nodeStartPos.top + deltaY;
-        // Snap to 20px grid for final position
-        const snappedLeft = this.snapToGrid(newLeft);
-        const snappedTop = this.snapToGrid(newTop);
-        // Update the store with the new snapped position
-        const newPosition = { left: snappedLeft, top: snappedTop };
-        getStore()
-            .getState()
-            .updateCanvasPositions({
-            [this.node.uuid]: newPosition
-        });
-        // Repaint connections if plumber is available
-        if (this.plumber) {
-            this.plumber.repaintEverything();
-        }
-        getStore().getState().updateNodePosition(this.node.uuid, newPosition);
-        // Fire a custom event with the new coordinates
-        /*this.fireCustomEvent(CustomEventType.Moved, {
-          nodeId: this.node.uuid,
-          position: newPosition,
-          oldPosition: {
-            left: this.nodeStartPos.left,
-            top: this.nodeStartPos.top
-          }
-        });*/
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clean up event listeners
-        document.removeEventListener('mousemove', this.boundMouseMove);
-        document.removeEventListener('mouseup', this.boundMouseUp);
+    handleActionOrderChanged(event) {
+        var _a;
+        const [fromIdx, toIdx] = event.detail.swap;
+        // swap our actions
+        const newActions = [...this.node.actions];
+        const movedAction = newActions.splice(fromIdx, 1)[0];
+        newActions.splice(toIdx, 0, movedAction);
+        // udate our internal reprensentation, this isn't strictly necessary
+        // since the editor will update us from it's definition subscription
+        // but it makes testing a lot easier
+        this.node = { ...this.node, actions: newActions };
+        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, { ...this.node, actions: newActions });
     }
     renderTitle(config) {
+        var _a, _b;
         return html `<div class="title" style="background:${config.color}">
-      ${config.name}
+      ${((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) > 1
+            ? html `<temba-icon class="drag-handle" name="sort"></temba-icon>`
+            : null}
+
+      <div class="name">${config.name}</div>
     </div>`;
     }
-    renderAction(node, action) {
+    renderAction(node, action, index) {
         const config = EDITOR_CONFIG[action.type];
         if (config) {
-            return html `<div class="action ${action.type}">
-        ${this.renderTitle(config)}
-        <div class="body">
-          ${config.render
+            return html `<div
+        class="action sortable ${action.type}"
+        id="action-${index}"
+      >
+        <div class="action-content">
+          ${this.renderTitle(config)}
+          <div class="body">
+            ${config.render
                 ? config.render(node, action)
                 : html `<pre>${action.type}</pre>`}
+          </div>
         </div>
       </div>`;
         }
-        return html `<div>${action.type}</div>`;
+        return html `<div class="action sortable" id="action-${index}">
+      ${action.type}
+    </div>`;
     }
     renderRouter(router, ui) {
         const config = EDITOR_CONFIG[ui.type];
@@ -305,9 +257,16 @@ export class EditorNode extends RapidElement {
         class="node"
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
-        ${this.node.actions.map((actionSpec) => {
-            return this.renderAction(this.node, actionSpec);
-        })}
+        ${this.node.actions.length > 0
+            ? html `<temba-sortable-list
+              dragHandle="drag-handle"
+              @temba-order-changed="${this.handleActionOrderChanged}"
+            >
+              ${this.node.actions.map((actionSpec, index) => {
+                return this.renderAction(this.node, actionSpec, index);
+            })}
+            </temba-sortable-list>`
+            : ''}
         ${this.node.router
             ? html ` ${this.renderRouter(this.node.router, this.ui)}
             ${this.renderCategories(this.node)}`

package/out-tsc/src/flow/EditorNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @property({ type: Object })\n  private plumber: Plumber;\n\n  @property({ type: Object })\n  private node: Node;\n\n  @property({ type: Object })\n  private ui: NodeUI;\n\n  // Drag state properties\n  private isDragging = false;\n  private dragStartPos = { x: 0, y: 0 };\n  private nodeStartPos = { left: 0, top: 0 };\n\n  // Bound event handlers to maintain proper 'this' context\n  private boundMouseMove = this.handleMouseMove.bind(this);\n  private boundMouseUp = this.handleMouseUp.bind(this);\n\n  /**\n   * Snaps a coordinate value to the nearest 20px grid position\n   */\n  private snapToGrid(value: number): number {\n    return Math.round(value / 20) * 20;\n  }\n\n  static get styles() {\n    return css`\n      .node {\n        position: absolute;\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n        color: #333;\n        cursor: move;\n        user-select: none;\n        z-index: 500;\n      }\n\n      .node:hover {\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n\n      .node.dragging {\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n        transform: scale(1.02);\n        z-index: 1000;\n      }\n        \n      .action {\n        max-width: 200px;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .title,\n      .router .title {\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n      }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      this.plumber.makeTarget(this.node.uuid);\n\n      // our node was changed, see if we have new destinations\n      for (const exit of this.node.exits) {\n        if (!exit.destination_uuid) {\n          this.plumber.makeSource(exit.uuid);\n        } else {\n          this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n        }\n      }\n\n      const ele = this.querySelector('.node');\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        .getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n\n      // Add drag event listeners to the node\n      this.addDragEventListeners();\n    }\n  }\n\n  private addDragEventListeners(): void {\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (!nodeElement) return;\n\n    nodeElement.addEventListener('mousedown', this.handleMouseDown.bind(this));\n    document.addEventListener('mousemove', this.boundMouseMove);\n    document.addEventListener('mouseup', this.boundMouseUp);\n  }\n\n  private handleMouseDown(event: MouseEvent): void {\n    // Only start dragging if clicking on the node itself, not on exits or other interactive elements\n    const target = event.target as HTMLElement;\n    if (target.classList.contains('exit') || target.closest('.exit')) {\n      return;\n    }\n\n    this.isDragging = true;\n    this.dragStartPos = { x: event.clientX, y: event.clientY };\n    this.nodeStartPos = {\n      left: this.ui.position.left,\n      top: this.ui.position.top\n    };\n\n    // Add dragging class for visual feedback\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (nodeElement) {\n      nodeElement.classList.add('dragging');\n    }\n\n    // Elevate connections for this node during dragging\n    if (this.plumber) {\n      this.plumber.elevateNodeConnections(this.node.uuid);\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  private handleMouseMove(event: MouseEvent): void {\n    if (!this.isDragging) return;\n\n    const deltaX = event.clientX - this.dragStartPos.x;\n    const deltaY = event.clientY - this.dragStartPos.y;\n\n    const newLeft = this.nodeStartPos.left + deltaX;\n    const newTop = this.nodeStartPos.top + deltaY;\n\n    // Update the UI position temporarily (for visual feedback)\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (nodeElement) {\n      nodeElement.style.left = `${newLeft}px`;\n      nodeElement.style.top = `${newTop}px`;\n    }\n\n    // Repaint connections during dragging for smooth updates\n    if (this.plumber) {\n      this.plumber.repaintEverything();\n    }\n  }\n\n  private handleMouseUp(event: MouseEvent): void {\n    if (!this.isDragging) return;\n\n    this.isDragging = false;\n\n    // Remove dragging class\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (nodeElement) {\n      nodeElement.classList.remove('dragging');\n    }\n\n    // Restore normal z-index for connections\n    if (this.plumber) {\n      this.plumber.restoreNodeConnections(this.node.uuid);\n    }\n\n    const deltaX = event.clientX - this.dragStartPos.x;\n    const deltaY = event.clientY - this.dragStartPos.y;\n\n    const newLeft = this.nodeStartPos.left + deltaX;\n    const newTop = this.nodeStartPos.top + deltaY;\n\n    // Snap to 20px grid for final position\n    const snappedLeft = this.snapToGrid(newLeft);\n    const snappedTop = this.snapToGrid(newTop);\n\n    // Update the store with the new snapped position\n    const newPosition = { left: snappedLeft, top: snappedTop };\n    getStore()\n      .getState()\n      .updateCanvasPositions({\n        [this.node.uuid]: newPosition\n      });\n\n    // Repaint connections if plumber is available\n    if (this.plumber) {\n      this.plumber.repaintEverything();\n    }\n\n    getStore().getState().updateNodePosition(this.node.uuid, newPosition);\n\n    // Fire a custom event with the new coordinates\n    /*this.fireCustomEvent(CustomEventType.Moved, {\n      nodeId: this.node.uuid,\n      position: newPosition,\n      oldPosition: {\n        left: this.nodeStartPos.left,\n        top: this.nodeStartPos.top\n      }\n    });*/\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Clean up event listeners\n    document.removeEventListener('mousemove', this.boundMouseMove);\n    document.removeEventListener('mouseup', this.boundMouseUp);\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${config.name}\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div class=\"action ${action.type}\">\n        ${this.renderTitle(config)}\n        <div class=\"body\">\n          ${config.render\n            ? config.render(node, action)\n            : html`<pre>${action.type}</pre>`}\n        </div>\n      </div>`;\n    }\n    return html`<div>${action.type}</div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    if (!this.node || !this.ui) {\n      return html`<div class=\"node\">Loading...</div>`;\n    }\n\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.map((actionSpec) => {\n          return this.renderAction(this.node, actionSpec);\n        })}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @property({ type: Object })\n  private plumber: Plumber;\n\n  @property({ type: Object })\n  private node: Node;\n\n  @property({ type: Object })\n  private ui: NodeUI;\n\n  static get styles() {\n    return css`\n\n      .node {\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n        color: #333;\n        cursor: move;\n        user-select: none;\n\n      }\n\n      .node:hover {\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n\n      .node.dragging {\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n        transform: scale(1.02);\n        z-index: 1000;\n      }\n        \n      .action {\n        max-width: 200px;\n        position: relative;\n      }\n\n      .action.sortable {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .action .action-content {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .drag-handle {\n        opacity: 0;\n        transition: all 200ms ease-in-out;\n        cursor: move;\n        background: rgba(0, 0, 0, 0.02);\n        max-width:0px;\n        position: absolute;\n      }\n\n      .action:hover .drag-handle {\n        opacity: 0.5;\n        padding: 0.25em;\n        max-width: 20px;\n      }\n\n      .action .drag-handle:hover {\n        opacity: 1;\n        \n      }\n\n      .action .title,\n      .router .title {\n        display: flex;\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n\n      }\n\n      .title .name {\n        flex-grow: 1;\n        }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  constructor() {\n    super();\n    this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      // make our initial connections\n      if (changes.get('node') === undefined) {\n        // this.plumber.makeTarget(this.node.uuid);\n        for (const exit of this.node.exits) {\n          if (!exit.destination_uuid) {\n            this.plumber.makeSource(exit.uuid);\n          } else {\n            this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n          }\n        }\n      }\n\n      const ele = this.parentElement;\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        ?.getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n    }\n  }\n\n  private handleActionOrderChanged(event: CustomEvent) {\n    const [fromIdx, toIdx] = event.detail.swap;\n\n    // swap our actions\n    const newActions = [...this.node.actions];\n    const movedAction = newActions.splice(fromIdx, 1)[0];\n    newActions.splice(toIdx, 0, movedAction);\n\n    // udate our internal reprensentation, this isn't strictly necessary\n    // since the editor will update us from it's definition subscription\n    // but it makes testing a lot easier\n    this.node = { ...this.node, actions: newActions };\n\n    getStore()\n      ?.getState()\n      .updateNode(this.node.uuid, { ...this.node, actions: newActions });\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${this.node?.actions?.length > 1\n        ? html`<temba-icon class=\"drag-handle\" name=\"sort\"></temba-icon>`\n        : null}\n\n      <div class=\"name\">${config.name}</div>\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action, index: number) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div\n        class=\"action sortable ${action.type}\"\n        id=\"action-${index}\"\n      >\n        <div class=\"action-content\">\n          ${this.renderTitle(config)}\n          <div class=\"body\">\n            ${config.render\n              ? config.render(node, action)\n              : html`<pre>${action.type}</pre>`}\n          </div>\n        </div>\n      </div>`;\n    }\n    return html`<div class=\"action sortable\" id=\"action-${index}\">\n      ${action.type}\n    </div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    if (!this.node || !this.ui) {\n      return html`<div class=\"node\">Loading...</div>`;\n    }\n\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.length > 0\n          ? html`<temba-sortable-list\n              dragHandle=\"drag-handle\"\n              @temba-order-changed=\"${this.handleActionOrderChanged}\"\n            >\n              ${this.node.actions.map((actionSpec, index) => {\n                return this.renderAction(this.node, actionSpec, index);\n              })}\n            </temba-sortable-list>`\n          : ''}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/flow/StickyNote.js

@@ -0,0 +1,272 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { getStore } from '../store/Store';
+export class StickyNote extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.dragging = false;
+    }
+    static get styles() {
+        return css `
+      :host {
+        --sticky-color: #fef08a;
+        --sticky-border-color: #facc15;
+        --sticky-text-color: #451a03;
+        --curvature: 8px;
+      }
+
+      .sticky-note {
+        width: 200px;
+        background-color: var(--sticky-color);
+        border: 1px solid var(--sticky-border-color);
+        border-radius: var(--curvature);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          sans-serif;
+        font-size: 12px;
+        overflow: hidden;
+        transition: transform 0.1s ease, box-shadow 0.2s ease;
+        color: var(--sticky-text-color);
+      }
+
+      .sticky-note.dragging {
+        opacity: 0.5;
+        z-index: 1000;
+        transform: rotate(0deg);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+      }
+
+      .sticky-note:hover {
+        transform: translateY(0px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      }
+
+      /* Color themes */
+      .sticky-note.yellow {
+        --sticky-color: #fef08a;
+        --sticky-border-color: #facc15;
+        --sticky-text-color: #451a03;
+      }
+      .sticky-note.blue {
+        --sticky-color: #bfdbfe;
+        --sticky-border-color: #3b82f6;
+        --sticky-text-color: #1e3a8a;
+      }
+      .sticky-note.pink {
+        --sticky-color: #fce7f3;
+        --sticky-border-color: #ec4899;
+        --sticky-text-color: #831843;
+      }
+      .sticky-note.green {
+        --sticky-color: #d1fae5;
+        --sticky-border-color: #10b981;
+        --sticky-text-color: #064e3b;
+      }
+      .sticky-note.gray {
+        --sticky-color: #f3f4f6;
+        --sticky-border-color: #6b7280;
+        --sticky-text-color: #374151;
+      }
+
+      /* Title and body containers */
+      .sticky-title-container {
+        position: relative;
+        border-bottom: 1px solid var(--sticky-border-color);
+        background-color: rgba(255, 255, 255, 0.5);
+        display: flex;
+        align-items: center;
+      }
+      .sticky-body-container {
+        position: relative;
+      }
+
+      /* Editable fields */
+      [contenteditable='true'] {
+        margin: 2px;
+        padding: 4px 8px;
+        outline: none;
+        border-radius: var(--curvature);
+        transition: background 0.2s;
+      }
+      [contenteditable='true']:focus {
+        background-color: rgba(255, 255, 255, 0.8);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        outline-color: var(--sticky-border-color);
+      }
+
+      /* Title */
+      .sticky-title {
+        font-weight: 600;
+        font-size: 13px;
+        color: var(--sticky-text-color);
+        min-height: 20px;
+        line-height: 20px;
+        border-top-left-radius: var(--curvature);
+        border-top-right-radius: var(--curvature);
+        flex-grow: 1;
+        padding-left: 8px;
+      }
+      .sticky-title:empty::before {
+        content: 'Click to add title';
+        opacity: 0.5;
+        font-style: italic;
+      }
+      .sticky-title:focus {
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+
+      /* Body */
+      .sticky-body {
+        padding: 8px 10px;
+        color: var(--sticky-text-color);
+        line-height: 1.4;
+        min-height: 48px;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+      }
+      .sticky-body:empty::before {
+        content: 'Click to add note';
+        opacity: 0.5;
+        font-style: italic;
+      }
+      .sticky-body:focus {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+      }
+
+      /* Drag icon */
+      .sticky-title-container > .drag-handle {
+        --icon-color: var(--sticky-border-color);
+        cursor: move;
+        max-width: 0px;
+        overflow: hidden;
+        transition: all 0.2s ease;
+        padding-left: 0;
+      }
+
+      .sticky-note:hover .drag-handle {
+        max-width: 20px;
+        padding-left: 8px;
+      }
+
+      .sticky-note:focus-within .sticky-title-container > .drag-handle {
+        max-width: 0px;
+        padding-left: 0px;
+      }
+
+      /* Focus/active states */
+      .sticky-note:focus-within {
+        box-shadow: 0 0 0 1px var(--sticky-border-color),
+          0 10px 20px rgba(0, 0, 0, 0.3);
+      }
+
+      .sticky-note:focus-within .drag-handle {
+        max-width: 0px;
+      }
+    `;
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('data') || changes.has('uuid')) {
+            this.updateCanvasSize();
+        }
+    }
+    updateCanvasSize() {
+        if (!this.data) {
+            return;
+        }
+        const element = this.querySelector('.sticky-note');
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            getStore()
+                .getState()
+                .expandCanvas(this.data.position.left + rect.width, this.data.position.top + rect.height);
+        }
+    }
+    handleTitleBlur(event) {
+        const target = event.target;
+        const newTitle = target.textContent || '';
+        if (this.data && newTitle !== this.data.title) {
+            getStore()
+                .getState()
+                .updateStickyNote(this.uuid, {
+                ...this.data,
+                title: newTitle
+            });
+        }
+        this.requestUpdate();
+    }
+    handleBodyBlur(event) {
+        const target = event.target;
+        const newBody = target.textContent || '';
+        if (this.data && newBody !== this.data.body) {
+            getStore()
+                .getState()
+                .updateStickyNote(this.uuid, {
+                ...this.data,
+                body: newBody
+            });
+        }
+        this.requestUpdate();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            event.target.blur();
+        }
+        if (event.key === 'Escape') {
+            event.target.blur();
+        }
+    }
+    render() {
+        if (!this.data) {
+            return html `<div class="sticky-note" style="display: none;"></div>`;
+        }
+        const style = `left: ${this.data.position.left}px; top: ${this.data.position.top}px;`;
+        return html `
+      <div
+        class="sticky-note ${this.data.color} ${this.dragging
+            ? 'dragging'
+            : ''}"
+        style="${style}"
+        data-uuid="${this.uuid}"
+      >
+        <div class="sticky-title-container">
+          <temba-icon name="drag" class="drag-handle"></temba-icon>
+          <div
+            class="sticky-title"
+            contenteditable="true"
+            @blur="${this.handleTitleBlur}"
+            @keydown="${this.handleKeyDown}"
+            @mousedown="${(e) => e.stopPropagation()}"
+            .textContent="${this.data.title}"
+          ></div>
+        </div>
+        <div class="sticky-body-container">
+          <div
+            class="sticky-body"
+            contenteditable="true"
+            @blur="${this.handleBodyBlur}"
+            @keydown="${this.handleKeyDown}"
+            @mousedown="${(e) => e.stopPropagation()}"
+            .textContent="${this.data.body}"
+          ></div>
+          <div class="edit-icon" title="Edit note"></div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], StickyNote.prototype, "uuid", void 0);
+__decorate([
+    property({ type: Object })
+], StickyNote.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean })
+], StickyNote.prototype, "dragging", void 0);
+//# sourceMappingURL=StickyNote.js.map