@nyaruka/temba-components 0.129.3 → 0.129.5

package/test-assets/contacts/history.json

@@ -45,11 +45,10 @@
       }
     },
     {
+      "uuid": "01988a70-075b-74e4-b738-3be521174d83",
       "type": "msg_created",
       "created_on": "2021-03-31T00:30:00.585471+00:00",
       "msg": {
-        "uuid": "70e2e0bb-418a-410c-b90f-10374a0c8caf",
-        "id": 1485,
         "urn": "tel:+250788123123",
         "text": "Hey John, just checking in on you",
         "channel": {
@@ -72,21 +71,20 @@
       "status": "C"
     },
     {
+      "uuid": "01988a70-3e8f-7890-b1d2-7418db7a575e",
       "type": "airtime_transferred",
       "created_on": "2021-03-30T22:20:35.573511+00:00",
       "sender": "tel:123456",
       "recipient": "tel:+250788123123?channel=8a81e9e0-10a0-4319-9b00-ce723cfa8303&id=9951&priority=1000",
       "currency": null,
       "desired_amount": "0.00",
-      "actual_amount": "0.00",
-      "logs_url": "/airtimetransfer/read/2/"
+      "actual_amount": "0.00"
     },
     {
+      "uuid": "01988a70-6cd1-738d-b5d6-ef9f9a0c529f",
       "type": "msg_created",
       "created_on": "2021-03-30T22:20:33.924847+00:00",
       "msg": {
-        "uuid": "37507bdd-9087-4782-828d-ad5c17c14f72",
-        "id": 1484,
         "urn": "tel:+250788123123",
         "text": "No problem, we are all done then!",
         "channel": {
@@ -98,11 +96,10 @@
       "logs_url": "/channels/channellog/read/1478/"
     },
     {
+      "uuid": "01988a71-045a-7902-8734-84311a7569de",
       "type": "msg_received",
       "created_on": "2021-03-30T22:20:33.801814+00:00",
       "msg": {
-        "uuid": "b872ae96-28b1-4858-95c5-b7b662ccd08c",
-        "id": 1483,
         "urn": "tel:+250788123123",
         "text": "no",
         "channel": {
@@ -114,11 +111,10 @@
       "logs_url": "/channels/channellog/read/1477/"
     },
     {
+      "uuid": "01988a71-6736-7948-9517-32971fcba1cb",
       "type": "msg_created",
       "created_on": "2021-03-30T22:20:31.933653+00:00",
       "msg": {
-        "uuid": "c095a764-590a-4359-ba2a-c626f4e9baeb",
-        "id": 1482,
         "urn": "tel:+250788123123",
         "text": "Mmmmm... delicious Primus. If only they made blue Primus! Do you want to set your name?",
         "channel": {
@@ -130,11 +126,10 @@
       "logs_url": "/channels/channellog/read/1476/"
     },
     {
+      "uuid": "01988a75-60cc-7681-bf4b-2b0b42347fc4",
       "type": "msg_received",
       "created_on": "2021-03-30T22:20:31.656303+00:00",
       "msg": {
-        "uuid": "925995ad-fa5f-4f01-b8f1-050703f333e0",
-        "id": 1481,
         "urn": "tel:+250788123123",
         "text": "primus",
         "channel": {
@@ -146,11 +141,10 @@
       "logs_url": "/channels/channellog/read/1475/"
     },
     {
+      "uuid": "01988a76-58fb-7252-9fac-3c6a385e8af1",
       "type": "msg_created",
       "created_on": "2021-03-30T22:20:29.397529+00:00",
       "msg": {
-        "uuid": "9f0b200a-6e24-451d-a7cb-06ef2518d1e5",
-        "id": 1480,
         "urn": "tel:+250788123123",
         "text": "Good choice, I like Blue too! What is your favorite beer?",
         "channel": {
@@ -162,11 +156,10 @@
       "logs_url": "/channels/channellog/read/1474/"
     },
     {
+      "uuid": "01988a76-afe4-7958-bea8-51683d99f665",
       "type": "msg_received",
       "created_on": "2021-03-30T22:20:29.277186+00:00",
       "msg": {
-        "uuid": "a702b6a6-3035-433b-9029-1a8dfa0c0194",
-        "id": 1479,
         "urn": "tel:+250788123123",
         "text": "blue",
         "channel": {
@@ -202,24 +195,10 @@
       "session_uuid": "885a9736-88fd-4676-b124-2577e1eaabd9"
     },
     {
-      "type": "input_labels_added",
-      "created_on": "2021-03-30T15:20:26.704494-07:00",
-      "step_uuid": "83cbe193-29d8-40ce-a820-0b06d719932a",
-      "input_uuid": "89109a8c-2895-46b7-aa44-170570de7d6a",
-      "labels": [
-        {
-          "uuid": "825e2cef-2465-4467-a315-f10a83b6d8aa",
-          "name": "A label"
-        }
-      ],
-      "session_uuid": "885a9736-88fd-4676-b124-2577e1eaabd9"
-    },
-    {
+      "uuid": "01988a76-febd-7157-b2cd-4bc0c1663173",
       "type": "msg_created",
       "created_on": "2021-03-30T22:20:26.704491+00:00",
       "msg": {
-        "uuid": "eef09c0f-24dc-426c-8050-50795dca8e8b",
-        "id": 1478,
         "urn": "tel:+250788123123",
         "text": "What is your favorite color?",
         "channel": {
@@ -240,11 +219,10 @@
       "logs_url": null
     },
     {
+      "uuid": "01988a77-979e-7768-a940-8d9c348e24fe",
       "type": "msg_received",
       "created_on": "2021-03-30T22:20:26.557388+00:00",
       "msg": {
-        "uuid": "89109a8c-2895-46b7-aa44-170570de7d6a",
-        "id": 1477,
         "urn": "tel:+250788123123",
         "text": "fav",
         "channel": {

package/web-dev-server.config.mjs

@@ -12,6 +12,40 @@ export default {
       preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify('development'),
     }),
+    {
+      name: 'api-mock-server',
+      serve(context) {
+        // Handle API endpoints by serving static files
+        if (context.request.method === 'GET' && context.path.startsWith('/api/')) {
+          // Map API endpoints to static files
+          const apiMappings = {
+            '/api/v2/groups.json': './static/api/groups.json',
+            '/api/v2/fields.json': './static/api/fields.json', 
+            '/api/v2/globals.json': './static/api/globals.json',
+            '/api/v2/completion.json': './static/api/completion.json',
+            '/api/v2/functions.json': './static/api/functions.json',
+            '/api/internal/templates.json': './static/api/templates.json',
+            '/api/v2/media.json': './static/api/media.json',
+            '/api/v2/users.json': './static/api/users.json',
+            '/api/v2/contacts.json': './static/api/contacts.json',
+            '/api/v2/optins.json': './static/api/optins.json',
+            '/api/v2/topics.json': './static/api/topics.json',
+            '/api/internal/locations.json': './static/api/locations.json',
+            '/api/internal/orgs.json': './static/api/orgs.json'
+          };
+
+          // Handle base path without query parameters
+          const basePath = context.path.split('?')[0];
+          const staticFile = apiMappings[basePath];
+          
+          if (staticFile && fs.existsSync(path.resolve(staticFile))) {
+            context.contentType = 'application/json';
+            context.body = fs.readFileSync(path.resolve(staticFile), 'utf-8');
+            return;
+          }
+        }
+      }
+    },
     {
       name: 'flow-files',
       serve(context) {

package/.github/workflows/coverage.yml

@@ -1,80 +0,0 @@
-name: 'Update Coverage Reports'
-
-on:
-  push:
-    branches: [main]
-
-permissions:
-  contents: write
-
-jobs:
-  coverage:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Set Timezone
-        uses: szenius/set-timezone@v2.0
-        with:
-          timezoneLinux: 'UTC'
-
-      - name: Checkout (GitHub)
-        uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          fetch-depth: 0
-
-      - run: docker network create --driver bridge textit_default
-
-      - name: Build and run tests with coverage
-        uses: devcontainers/ci@v0.3
-        with:
-          runCmd: yarn validate && ./generate-coverage-badge.sh
-          push: never
-          env: |
-            CI=true
-
-      - name: Copy coverage to temp
-        run: |
-          mkdir -p /tmp/coverage-copy
-          cp -r coverage /tmp/coverage-copy/
-
-      - name: Deploy coverage to coverage branch
-        run: |
-          git config --local user.email "action@github.com"
-          git config --local user.name "GitHub Action"
-
-          # Remove any coverage directory to avoid ambiguity with branch name
-          rm -rf coverage
-
-          # Create or checkout coverage branch
-          if git show-ref --verify --quiet refs/remotes/origin/coverage; then
-            git fetch origin coverage
-            git checkout coverage
-          else
-            git checkout --orphan coverage
-            git rm -rf . || true
-          fi
-
-          # Copy coverage report files from temp directly to root
-          cp -r /tmp/coverage-copy/coverage/lcov-report/* ./
-          rm -rf /tmp/coverage-copy
-
-          # Create .nojekyll for GitHub Pages
-          touch .nojekyll
-
-          # Create .gitignore to exclude build byproducts from coverage branch
-          echo "# Ignore build artifacts and local byproducts in coverage branch" > .gitignore
-          echo "dist/" >> .gitignore
-          echo "node_modules/" >> .gitignore
-          echo "out-tsc/" >> .gitignore
-          echo "screenshots/test/" >> .gitignore
-          echo "static/svg/work/" >> .gitignore
-          echo "# Add more patterns as needed" >> .gitignore
-
-          # Add all files
-          git add .
-
-          # Commit if there are changes
-          if ! git diff --staged --quiet; then
-            git commit -m "Update coverage reports [skip ci] - $(date)"
-            git push origin coverage
-          fi

package/demo/sticky-note-demo.html

@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <title>Sticky Note Example</title>
-    <link
-      href="/static/css/temba-components.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
-      rel="stylesheet"
-    />
-    <link href="../styles.css" rel="stylesheet" type="text/css" />
-    <script type="module" src="../src/flow/StickyNote.ts"></script>
-    <link href="/demo/static/css/prism.css" rel="stylesheet" />
-    <script type="module" src="/demo/static/js/prism-loader.js"></script>
-  </head>
-  <body>
-    <h1>Sticky Note Example</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
-
-    <table class="attr-table">
-      <thead>
-        <tr>
-          <th>Attribute</th>
-          <th>Description</th>
-          <th>Default</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>uuid</td>
-          <td>Unique identifier for the sticky note</td>
-          <td>None (required)</td>
-        </tr>
-        <tr>
-          <td>data</td>
-          <td>
-            Object containing position, title, body, and color properties.
-            Position: {left: number, top: number}, color: 'yellow' | 'blue' | 'pink' | 'green' | 'gray'
-          </td>
-          <td>None (required)</td>
-        </tr>
-      </tbody>
-    </table>
-
-    <section class="doc-section">
-      <h2>Events</h2>
-      <p>
-        The sticky note component fires events when its content is updated through the flow store system.
-        Updates to title and body content are automatically synchronized with the flow state.
-      </p>
-    </section>
-
-    <div class="example">
-      <h3>Basic Sticky Note</h3>
-      <p>A simple yellow sticky note with default positioning</p>
-      <pre class="example-html"><code class="language-markup">&lt;temba-sticky-note uuid="basic-note"&gt;&lt;/temba-sticky-note&gt;</code></pre>
-      <div class="demo-container">
-        <temba-sticky-note id="basic-note"></temba-sticky-note>
-      </div>
-    </div>
-
-    <div class="example">
-      <h3>Colored Sticky Notes</h3>
-      <p>Sticky notes with different color themes - click to edit the text, drag to move them around</p>
-      <pre class="example-html"><code class="language-markup">&lt;!-- Multiple colored sticky notes --&gt;
-&lt;temba-sticky-note uuid="yellow-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="blue-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="pink-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="green-note"&gt;&lt;/temba-sticky-note&gt;
-&lt;temba-sticky-note uuid="gray-note"&gt;&lt;/temba-sticky-note&gt;</code></pre>
-      <div class="demo-container">
-        <temba-sticky-note id="yellow-note"></temba-sticky-note>
-        <temba-sticky-note id="blue-note"></temba-sticky-note>
-        <temba-sticky-note id="pink-note"></temba-sticky-note>
-        <temba-sticky-note id="green-note"></temba-sticky-note>
-        <temba-sticky-note id="gray-note"></temba-sticky-note>
-      </div>
-      <div class="expected">
-        <strong>How to use:</strong>
-        <ul>
-          <li>Click and drag the sticky notes to move them around</li>
-          <li>Click on the title or body text to edit it inline</li>
-          <li>Press Enter or Escape to finish editing</li>
-          <li>Notes snap to a 20px grid when you finish dragging</li>
-          <li>Each color has its own visual theme</li>
-        </ul>
-      </div>
-    </div>
-
-    <script type="module">
-      import '/out-tsc/temba-modules.js';
-
-      // Configure the sticky notes with sample data
-      document.addEventListener('DOMContentLoaded', () => {
-        const basicNote = document.getElementById('basic-note');
-        basicNote.uuid = 'basic-uuid';
-        basicNote.data = {
-          position: { left: 50, top: 50 },
-          title: 'Basic Note',
-          body: 'This is a basic sticky note example.',
-          color: 'yellow'
-        };
-
-        const yellowNote = document.getElementById('yellow-note');
-        yellowNote.uuid = 'yellow-uuid';
-        yellowNote.data = {
-          position: { left: 50, top: 50 },
-          title: 'Yellow Note',
-          body: 'This is a yellow sticky note! Click to edit me.',
-          color: 'yellow'
-        };
-
-        const blueNote = document.getElementById('blue-note');
-        blueNote.uuid = 'blue-uuid';
-        blueNote.data = {
-          position: { left: 300, top: 120 },
-          title: 'Blue Note',
-          body: 'Blue notes are cool and calm. Drag me around!',
-          color: 'blue'
-        };
-
-        const pinkNote = document.getElementById('pink-note');
-        pinkNote.uuid = 'pink-uuid';
-        pinkNote.data = {
-          position: { left: 550, top: 80 },
-          title: 'Pink Note',
-          body: 'Pink is vibrant and fun. Try editing my text!',
-          color: 'pink'
-        };
-
-        const greenNote = document.getElementById('green-note');
-        greenNote.uuid = 'green-uuid';
-        greenNote.data = {
-          position: { left: 100, top: 250 },
-          title: 'Green Note',
-          body: 'Green represents nature and growth. I can grow in height as you type more content in my body!',
-          color: 'green'
-        };
-
-        const grayNote = document.getElementById('gray-note');
-        grayNote.uuid = 'gray-uuid';
-        grayNote.data = {
-          position: { left: 400, top: 300 },
-          title: 'Gray Note',
-          body: 'Gray is neutral and professional.',
-          color: 'gray'
-        };
-      });
-    </script>
-  </body>
-</html>

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

@@ -1 +0,0 @@
-{"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';\nimport { CustomEventType } from '../interfaces';\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  // Track exits that are in \"removing\" state\n  private exitRemovalTimeouts: Map<string, number> = new Map();\n\n  // Set of exit UUIDs that are in the removing state\n  private exitRemovingState: Set<string> = new Set();\n\n  // Track actions that are in \"removing\" state\n  private actionRemovalTimeouts: Map<string, number> = new Map();\n\n  // Set of action UUIDs that are in the removing state\n  private actionRemovingState: Set<string> = new Set();\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: var(--curvature);\n        \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 .remove-button {\n        position: absolute;\n        top: 5px;\n        right: 5px;\n        width: 16px;\n        height: 16px;\n        border-radius: 50%;\n        background: var(--color-error, #dc3545);\n        color: white;\n        border: none;\n        cursor: pointer;\n        display: none;\n        align-items: center;\n        justify-content: center;\n        font-size: 10px;\n        line-height: 1;\n        z-index: 10;\n      }\n\n      .action:hover .remove-button {\n        display: flex;\n      }\n\n      .action.removing .title {\n        background-color: var(--color-error, #dc3545) !important;\n      }\n\n      .action.removing .title .name {\n        color: white;\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        display: flex;\n        flex-direction: column;\n      }\n\n      .action-exits {\n        padding-bottom: 0.6em;\n        margin-top: -0.8em;\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-wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        margin-bottom: -1.2em;\n        padding-top:0.2em;\n      }\n\n      .exit {\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        background-color: tomato;\n        position: relative;\n        box-shadow: 0 2px 2px rgba(0, 0, 0, .1);\n        cursor: pointer;\n        pointer-events: none;\n      }\n\n      .exit.jtk-connected {\n        background: var(--color-connectors, #e6e6e6);\n      }\n\n      .exit.connected {\n        background-color: #fff;\n        pointer-events: all;\n      }\n\n      .exit.connected:hover {\n        background-color: var(--color-connectors, #e6e6e6);\n      }\n      \n      .exit.removing, .exit.removing:hover {\n        background-color: var(--color-error);\n        pointer-events: all;\n      }\n      \n      .exit.removing::before {\n        content: '✕';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        font-size: 8px;\n        color: white;\n        line-height: 1;\n      }\n      \n      /* Connector in removing state */\n      :host {\n        --color-connector-removing: var(--color-error);\n      }\n      \n      body svg.plumb-connector.removing path {\n        stroke: var(--color-connector-removing, tomato) !important;\n        stroke-width: 3px;\n      }\n      \n      body .plumb-connector.removing .plumb-arrow {\n        fill: var(--color-connector-removing, tomato) !important;\n        stroke: var(--color-connector-removing, transparent) !important;\n      }\n\n      .category:first-child {\n        border-bottom-left-radius: var(--curvature);\n      }\n\n      .category:last-child {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .router .title {\n        border-top-left-radius: var(--curvature);\n        border-top-right-radius: var(--curvature);\n      }\n\n      .action{\n        overflow: hidden;\n      }\n\n      .action:first-child .title {\n        border-top-left-radius: var(--curvature);\n        border-top-right-radius: var(--curvature);\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        for (const exit of this.node.exits) {\n          if (!exit.destination_uuid) {\n            this.plumber.makeSource(exit.uuid);\n          } else {\n            this.plumber.connectIds(\n              this.node.uuid,\n              exit.uuid,\n              exit.destination_uuid\n            );\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  disconnectedCallback() {\n    // Remove the event listener when the component is removed\n    super.disconnectedCallback();\n\n    // Clear any pending exit removal timeouts\n    this.exitRemovalTimeouts.forEach((timeoutId) => {\n      clearTimeout(timeoutId);\n    });\n    this.exitRemovalTimeouts.clear();\n\n    // Clear any pending action removal timeouts\n    this.actionRemovalTimeouts.forEach((timeoutId) => {\n      clearTimeout(timeoutId);\n    });\n    this.actionRemovalTimeouts.clear();\n\n    // Clear the removing state\n    this.exitRemovingState.clear();\n    this.actionRemovingState.clear();\n  }\n\n  private handleExitClick(event: MouseEvent, exit: Exit) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const exitId = exit.uuid;\n\n    // If exit is not connected, do nothing\n    if (!exit.destination_uuid) return;\n\n    // If the exit is already in removing state, perform the disconnect\n    if (this.exitRemovingState.has(exitId)) {\n      this.disconnectExit(exit);\n      return;\n    }\n\n    // Start removal UI state\n    this.exitRemovingState.add(exitId);\n    this.requestUpdate();\n\n    // Set the connection to removing state\n    this.plumber.setConnectionRemovingState(exitId, true);\n\n    // Clear any existing timeout for this exit\n    if (this.exitRemovalTimeouts.has(exitId)) {\n      clearTimeout(this.exitRemovalTimeouts.get(exitId));\n    }\n\n    // Set timeout to reset UI if user doesn't click\n    const timeoutId = window.setTimeout(() => {\n      this.exitRemovingState.delete(exitId);\n      this.exitRemovalTimeouts.delete(exitId);\n\n      // Reset the connection to normal state\n      this.plumber.setConnectionRemovingState(exitId, false);\n\n      this.requestUpdate();\n    }, 1500);\n\n    this.exitRemovalTimeouts.set(exitId, timeoutId);\n  }\n\n  private disconnectExit(exit: Exit) {\n    const exitId = exit.uuid;\n\n    // Clear the UI state\n    this.exitRemovingState.delete(exitId);\n\n    // Reset the connection to normal state (this will be redundant as we're about to remove it,\n    // but it's safer to do this in case there's any timing issue)\n    this.plumber.setConnectionRemovingState(exitId, false);\n\n    // Clear any timeout\n    if (this.exitRemovalTimeouts.has(exitId)) {\n      clearTimeout(this.exitRemovalTimeouts.get(exitId));\n      this.exitRemovalTimeouts.delete(exitId);\n    }\n\n    // Remove the JSPlumb connection\n    this.plumber.removeExitConnection(exitId);\n\n    // Update the flow definition\n    const updatedExit = { ...exit, destination_uuid: null };\n    const updatedExits = this.node.exits.map((e) =>\n      e.uuid === exitId ? updatedExit : e\n    );\n\n    // Update the node\n    const updatedNode = { ...this.node, exits: updatedExits };\n    getStore()?.getState().updateNode(this.node.uuid, updatedNode);\n\n    // Request update to reflect changes\n    this.requestUpdate();\n  }\n\n  private handleActionRemoveClick(\n    event: MouseEvent,\n    action: Action,\n    index: number\n  ) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const actionId = action.uuid;\n\n    // If the action is already in removing state, perform the removal\n    if (this.actionRemovingState.has(actionId)) {\n      this.removeAction(action, index);\n      return;\n    }\n\n    // Start removal UI state\n    this.actionRemovingState.add(actionId);\n    this.requestUpdate();\n\n    // Clear any existing timeout for this action\n    if (this.actionRemovalTimeouts.has(actionId)) {\n      clearTimeout(this.actionRemovalTimeouts.get(actionId));\n    }\n\n    // Set timeout to reset UI if user doesn't click\n    const timeoutId = window.setTimeout(() => {\n      this.actionRemovingState.delete(actionId);\n      this.actionRemovalTimeouts.delete(actionId);\n      this.requestUpdate();\n    }, 1000); // 1 second as per requirements\n\n    this.actionRemovalTimeouts.set(actionId, timeoutId);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private removeAction(action: Action, _index: number) {\n    const actionId = action.uuid;\n\n    // Clear the UI state\n    this.actionRemovingState.delete(actionId);\n\n    // Clear any timeout\n    if (this.actionRemovalTimeouts.has(actionId)) {\n      clearTimeout(this.actionRemovalTimeouts.get(actionId));\n      this.actionRemovalTimeouts.delete(actionId);\n    }\n\n    // Remove the action from the node\n    const updatedActions = this.node.actions.filter((a) => a.uuid !== actionId);\n\n    // If no actions remain, remove the entire node\n    if (updatedActions.length === 0) {\n      this.fireCustomEvent(CustomEventType.NodeDeleted, {\n        uuid: this.node.uuid\n      });\n    } else {\n      // Update the node with remaining actions\n      const updatedNode = { ...this.node, actions: updatedActions };\n      getStore()?.getState().updateNode(this.node.uuid, updatedNode);\n\n      // Request update to reflect changes\n      this.requestUpdate();\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, isRemoving: boolean = false) {\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\">${isRemoving ? 'Remove?' : config.name}</div>\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action, index: number) {\n    const config = EDITOR_CONFIG[action.type];\n    const isRemoving = this.actionRemovingState.has(action.uuid);\n\n    if (config) {\n      return html`<div\n        class=\"action sortable ${action.type} ${isRemoving ? 'removing' : ''}\"\n        id=\"action-${index}\"\n      >\n        <button\n          class=\"remove-button\"\n          @click=${(e: MouseEvent) =>\n            this.handleActionRemoveClick(e, action, index)}\n          title=\"Remove action\"\n        >\n          ✕\n        </button>\n        <div class=\"action-content\">\n          ${this.renderTitle(config, isRemoving)}\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\n      class=\"action sortable ${isRemoving ? 'removing' : ''}\"\n      id=\"action-${index}\"\n    >\n      <button\n        class=\"remove-button\"\n        @click=${(e: MouseEvent) =>\n          this.handleActionRemoveClick(e, action, index)}\n        title=\"Remove action\"\n      >\n        ✕\n      </button>\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, false)}\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 class=\"exit-wrapper\">\n      <div\n        id=\"${exit.uuid}\"\n        class=${getClasses({\n          exit: true,\n          connected: !!exit.destination_uuid,\n          removing: this.exitRemovingState.has(exit.uuid)\n        })}\n        @click=${(e: MouseEvent) => this.handleExitClick(e, exit)}\n      ></div>\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"]}