@nyaruka/temba-components 0.157.1 → 0.158.1

package/orca/setup.sh

@@ -0,0 +1,81 @@
+#!/bin/bash
+
+# Orca setup hook for a temba-components worktree.
+# Symlinks shared utility files from nyaruka/utils, ensures the devcontainer
+# is built/running (recreating it if the bind mounts are stale), and installs
+# pnpm dependencies inside the worktree.
+#
+# Usage:
+#   ./orca/setup.sh                  # run directly
+#   (orca invokes this via orca.yaml's scripts.setup)
+
+set -e
+
+CONTAINER_NAME="temba-components"
+
+# Orca exports ORCA_WORKTREE_PATH when running this as a hook; otherwise
+# derive the worktree path from the script location.
+if [ -n "${ORCA_WORKTREE_PATH:-}" ]; then
+    SCRIPT_DIR="$ORCA_WORKTREE_PATH"
+else
+    SCRIPT_DIR="$(cd "$(dirname "$0")/.." && pwd)"
+fi
+WORKSPACE_NAME="$(basename "$SCRIPT_DIR")"
+
+# Pin WORKTREES to the orca workspaces dir so .devcontainer/devcontainer.json
+# (which reads ${localEnv:WORKTREES}) sees the orca tree, not a stale value
+# inherited from the user's shell.
+WORKTREES="$(dirname "$(dirname "$SCRIPT_DIR")")"
+export WORKTREES
+
+# Symlink shared files from nyaruka/utils into the worktree (gitignored).
+UTILS_DIR="${UTILS_PATH:-$HOME/code/nyaruka/utils}/projects/temba-components"
+if [ ! -d "$UTILS_DIR" ]; then
+    echo "Error: utils dir not found at $UTILS_DIR (set UTILS_PATH to override)"
+    exit 1
+fi
+for file in run.sh AGENTS.md; do
+    if [ -f "$UTILS_DIR/$file" ] && [ ! -e "$SCRIPT_DIR/$file" ]; then
+        ln -s "$UTILS_DIR/$file" "$SCRIPT_DIR/$file"
+    fi
+done
+if [ ! -e "$SCRIPT_DIR/CLAUDE.md" ]; then
+    ln -s "$UTILS_DIR/AGENTS.md" "$SCRIPT_DIR/CLAUDE.md"
+fi
+
+# Ensure the devcontainer is running. Bind mounts can't be edited after the
+# container is created, so if an existing container's /workspaces/worktrees
+# mount doesn't match $WORKTREES (e.g. a stale conductor-era container),
+# recreate it to pick up the new mount.
+state="$(docker inspect -f '{{.State.Status}}' "$CONTAINER_NAME" 2>/dev/null || true)"
+
+if [ -n "$state" ]; then
+    current_worktrees="$(docker inspect -f '{{range .Mounts}}{{if eq .Destination "/workspaces/worktrees"}}{{.Source}}{{end}}{{end}}' "$CONTAINER_NAME" 2>/dev/null || true)"
+    if [ -n "$current_worktrees" ] && [ "$current_worktrees" != "$WORKTREES" ]; then
+        echo "Container '$CONTAINER_NAME' has a stale /workspaces/worktrees mount:"
+        echo "  $current_worktrees (expected $WORKTREES)"
+        echo "Removing and recreating the container..."
+        docker rm -f "$CONTAINER_NAME" >/dev/null
+        state=""
+    fi
+fi
+
+case "$state" in
+    running) ;;
+    "")
+        echo "Container '$CONTAINER_NAME' does not exist — building devcontainer..."
+        devcontainer up --workspace-folder "$SCRIPT_DIR"
+        ;;
+    *)
+        echo "Container '$CONTAINER_NAME' is $state — starting..."
+        docker start "$CONTAINER_NAME"
+        ;;
+esac
+
+# Install dependencies inside the worktree.
+docker exec "$CONTAINER_NAME" bash -c '
+    cd "/workspaces/worktrees/temba-components/'"$WORKSPACE_NAME"'"
+    pnpm install
+'
+
+echo "Worktree '$WORKSPACE_NAME' ready for development"

package/orca.yaml

@@ -0,0 +1,3 @@
+scripts:
+  setup: |
+    ./orca/setup.sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.157.1",
+  "version": "0.158.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/display/Dropdown.ts

@@ -205,13 +205,22 @@ export class Dropdown extends RapidElement {
         return;
       }
 
+      // Anchor the dropdown to the toggle's viewport coordinates.
+      // The dropdown is `position: fixed`, so viewport coords are
+      // the right reference frame. Without an explicit anchor the
+      // browser resolves `top: auto; left: auto` from the element's
+      // in-flow position, which mis-places the dropdown when the
+      // page is scrolled. Always setting top/left from
+      // getBoundingClientRect makes positioning scroll-invariant.
       const dropdownStyle = {
         border: '1px solid rgba(0,0,0,0.1)',
-        marginTop: '0.5em'
+        marginTop: '0.5em',
+        top: toggleBounds.bottom + 'px',
+        left: toggleBounds.left + 'px'
       };
 
       // if off the the right, bump it left
-      if (dropdownBounds.right > window.innerWidth) {
+      if (toggleBounds.left + dropdownBounds.width > window.innerWidth) {
         dropdownStyle['left'] =
           toggleBounds.right - dropdownBounds.width + 'px';
         delete dropdownStyle['right'];
@@ -219,7 +228,7 @@ export class Dropdown extends RapidElement {
       }
 
       // if off to the bottom, bump it up
-      if (dropdownBounds.bottom > window.innerHeight) {
+      if (toggleBounds.bottom + dropdownBounds.height > window.innerHeight) {
         dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';
         dropdownStyle['marginTop'] = '-0.5em';
         bumpedUp = true;
@@ -237,9 +246,12 @@ export class Dropdown extends RapidElement {
       // anchored to far-left toggles (e.g. rail items) don't rub against
       // the window edge. Shift the dropdown right and slide the arrow
       // back the same amount so it still points at the toggle.
+      // Check against the intended `left` (toggleBounds.left) rather
+      // than the dropdown's currently-rendered bounds, since the new
+      // left is what we're about to set.
       const MIN_LEFT = 8;
-      if (dropdownBounds.left < MIN_LEFT && !bumpedLeft) {
-        const shift = MIN_LEFT - dropdownBounds.left;
+      if (toggleBounds.left < MIN_LEFT && !bumpedLeft) {
+        const shift = MIN_LEFT - toggleBounds.left;
         dropdownStyle['left'] = MIN_LEFT + 'px';
         arrowLeft -= shift;
       }

package/src/events/eventRenderers.ts

@@ -13,6 +13,7 @@ import {
   UpdateFieldEvent,
   URNsChangedEvent
 } from '../events';
+import { getLanguageName } from '../languages';
 import { oxfordFn } from '../utils';
 
 export enum Events {
@@ -291,9 +292,7 @@ export const renderTicketAssigneeChanged = (
   // consistently interactive across open / close / reopen / assigned
   // rows (the contact-history page can show events from any of the
   // contact's tickets, so the jump-to-ticket affordance is useful).
-  const ticketLink = html`<a href="/ticket/all/open/${ticketUUID}/"
-    >ticket</a
-  >`;
+  const ticketLink = html`<a href="/ticket/all/open/${ticketUUID}/">ticket</a>`;
   const ticketLinkCapitalized = html`<a href="/ticket/all/open/${ticketUUID}/"
     >This ticket</a
   >`;
@@ -356,11 +355,7 @@ export const renderContactGroupsEvent = (
   if (event.groups_added) {
     return renderInfoList('Added to', 'Added to', event.groups_added);
   } else if (event.groups_removed) {
-    return renderInfoList(
-      'Removed from',
-      'Removed from',
-      event.groups_removed
-    );
+    return renderInfoList('Removed from', 'Removed from', event.groups_removed);
   }
 };
 
@@ -382,7 +377,7 @@ export const renderContactLanguageChangedEvent = (
     return html`<div style=${eventLineStyle}>Cleared language</div>`;
   }
   return html`<div style=${eventLineStyle}>
-    Language updated to ${valueText(event.language)}
+    Language updated to ${valueText(getLanguageName(event.language))}
   </div>`;
 };
 

package/src/flow/CanvasNode.ts

@@ -219,13 +219,18 @@ export class CanvasNode extends RapidElement {
         background: repeating-linear-gradient(120deg, tomato, tomato 6px, #ff7056 0, #ff7056 18px) !important;
       }
 
-      /* Disable links on actions/nodes with issues */
+      /* Disable links on actions/nodes with issues so clicks fall through
+         to open the editor instead of navigating. */
       .action-content.has-issues .linked-name div,
       .node.has-issues > .router .linked-name div {
         text-decoration: none !important;
         cursor: default !important;
         pointer-events: none;
       }
+      .action-content.has-issues .linked-pill,
+      .node.has-issues > .router .linked-pill {
+        pointer-events: none;
+      }
 
       .action.sortable {
         display: flex;
@@ -1094,13 +1099,16 @@ export class CanvasNode extends RapidElement {
   }
 
   /**
-   * Returns true if the click target is inside a `.linked-name` that is
-   * still active (i.e. the containing action/node has no issues).
-   * When an action/node has issues, links are visually disabled and clicks
-   * should fall through to open the editor instead.
+   * Returns true if the click target is inside a `.linked-name` or
+   * `.linked-pill` whose containing action/node has no issues. Active
+   * links handle their own navigation, so click-vs-drag and node-edit
+   * handlers bail out on them. When the action/node has issues, links are
+   * visually disabled (see CSS) and clicks fall through to open the
+   * editor instead.
    */
   private isActiveLink(target: HTMLElement, action?: Action): boolean {
-    if (!target.closest('.linked-name')) return false;
+    if (!target.closest('.linked-name') && !target.closest('.linked-pill'))
+      return false;
     if (action) return !this.issuesByAction?.has(action.uuid);
     return !(
       this.issuesByNode?.has(this.node.uuid) ||

package/src/flow/DragManager.ts

@@ -127,7 +127,8 @@ export class DragManager {
     if (
       target.classList.contains('exit') ||
       target.closest('.exit') ||
-      target.closest('.linked-name')
+      target.closest('.linked-name') ||
+      target.closest('.linked-pill')
     ) {
       return;
     }
@@ -186,7 +187,8 @@ export class DragManager {
     if (
       target.classList.contains('exit') ||
       target.closest('.exit') ||
-      target.closest('.linked-name')
+      target.closest('.linked-name') ||
+      target.closest('.linked-pill')
     ) {
       return;
     }

package/src/flow/utils.ts

@@ -386,6 +386,7 @@ const renderLinkedObject = (
 
   const pillType = iconToPillType(icon);
   return html`<temba-label
+    class="linked-pill"
     icon=${icon || ''}
     type=${pillType || 'neutral'}
     clickable

package/src/form/DatePicker.ts

@@ -19,6 +19,7 @@ export class DatePicker extends FieldElement {
       .container {
         border-radius: var(--curvature);
         border: 1px solid var(--color-widget-border);
+        background: var(--color-widget-bg);
         display: flex;
         cursor: pointer;
         box-shadow: var(--widget-box-shadow);
@@ -59,7 +60,7 @@ export class DatePicker extends FieldElement {
       }
 
       .tz-wrapper {
-        background: #efefef;
+        background: var(--sunken);
         display: flex;
         flex-direction: row;
         align-items: center;

package/src/interfaces.ts

@@ -323,5 +323,8 @@ export enum CustomEventType {
   RevisionViewed = 'temba-revision-viewed',
   RevisionCancelled = 'temba-revision-cancelled',
   RevisionReverted = 'temba-revision-reverted',
-  RevisionsClosed = 'temba-revisions-closed'
+  RevisionsClosed = 'temba-revisions-closed',
+  RowClick = 'temba-row-click',
+  SelectionChange = 'temba-selection-change',
+  BulkAction = 'temba-bulk-action'
 }

package/src/layout/Tab.ts

@@ -27,24 +27,9 @@ export class Tab extends RapidElement {
   @property({ type: String })
   icon: string;
 
-  @property({ type: String })
-  selectionColor: string;
-
-  @property({ type: String })
-  selectionBackground: string;
-
-  @property({ type: String })
-  borderColor: string = 'var(--color-widget-border)';
-
-  @property({ type: String })
-  activityColor: string = `var(--color-link-primary)`;
-
   @property({ type: Boolean })
   selected = false;
 
-  @property({ type: Boolean })
-  notify = false;
-
   @property({ type: Boolean })
   alert = false;
 

package/src/layout/TabPane.ts

@@ -18,43 +18,48 @@ export class TabPane extends RapidElement {
       .options {
         display: flex;
         align-items: stretch;
-        padding: var(--temba-tabs-options-padding, 0);
-        border-bottom: none;
+        gap: 4px;
+        border-bottom: 1px solid var(--border);
       }
 
       .option {
         user-select: none;
-        padding: 0.5em 0.7em;
-        margin: 0em 0em;
-        cursor: pointer;
         display: flex;
-        font-size: 1.1em;
         align-items: center;
-        border: 1px inset transparent;
-        border-bottom: 0px;
-        border-radius: var(--curvature);
-        border-bottom-right-radius: 0px;
-        border-bottom-left-radius: 0px;
-
-        color: var(--color-text-dark);
-        --icon-color: var(--color-text-dark);
+        cursor: pointer;
+        padding: 8px 14px 10px;
+        margin-bottom: -1px;
+        background: transparent;
+        color: var(--text-2);
+        --icon-color: var(--text-2);
+        font-size: 13px;
+        font-weight: var(--w-medium);
+        border-bottom: 2px solid transparent;
         white-space: nowrap;
-        transition: all 100ms linear;
+        transition:
+          color 100ms linear,
+          border-color 100ms linear;
       }
 
-      .focusedname .option .name {
-        transition: all 0s linear !important;
+      .option:hover {
+        color: var(--text-1);
+        --icon-color: var(--text-1);
       }
 
-      .focusedname .option.selected .name {
-        transition: all 200ms linear !important;
+      .option.selected,
+      .option.selected:hover {
+        cursor: default;
+        color: var(--accent-700);
+        --icon-color: var(--accent-700);
+        border-bottom-color: var(--accent-600);
       }
 
-      .option.hidden {
-        display: none;
+      .unselect .option.selected {
+        cursor: pointer;
       }
 
-      .option temba-icon {
+      .option.hidden {
+        display: none;
       }
 
       .option .name {
@@ -70,6 +75,9 @@ export class TabPane extends RapidElement {
 
       .option .badge {
         margin-left: 0.4em;
+        margin-right: -6px;
+        display: inline-flex;
+        align-items: center;
       }
 
       @media (max-width: 900px) {
@@ -85,9 +93,6 @@ export class TabPane extends RapidElement {
         }
       }
 
-      .focusedname .option.selected {
-      }
-
       .focusedname .option .name {
         max-width: 0px;
         margin: 0;
@@ -101,137 +106,81 @@ export class TabPane extends RapidElement {
         max-width: 200px;
       }
 
-      .option {
-        transform: scale(0.9) translateY(0em);
-        --icon-color: rgba(0, 0, 0, 0.5);
-        color: rgba(0, 0, 0, 0.5);
-      }
-
-      .option.selected {
-      }
-
-      .option.selected,
-      .option.selected:hover {
-        cursor: default;
-        box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);
-
-        background: var(--focused-tab-color, #fff);
-        transform: scale(1) translateY(1px);
-        --icon-color: #666;
-        color: #666;
-        border: 1px inset rgba(0, 0, 0, 0.15);
-        border-bottom: 0px;
-      }
-
-      .option.selected .dot {
-        display: none;
-      }
-
-      .unselect .option.selected {
-        cursor: pointer;
+      .focusedname .option .name {
+        transition: all 0s linear !important;
       }
 
-      .unselect .option.selected:hover {
-        background: var(--unselect-tab-color, #eee);
+      .focusedname .option.selected .name {
+        transition: all 200ms linear !important;
       }
 
-      .option:hover {
-        --icon-color: #666;
-        color: #666;
-        background: rgba(0, 0, 0, 0.02);
+      .option.dirty {
+        font-weight: var(--w-semibold);
       }
 
-      .option.dirty {
-        font-weight: 500;
+      .option.alert {
+        color: var(--danger);
+        --icon-color: var(--danger);
       }
 
       .pane {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        background: var(--focused-tab-color, #fff);
-        border-bottom-left-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
-        overflow: hidden;
-
-        box-shadow: var(
-          --tabs-shadow,
-          rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-          rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
-        );
         min-height: 0;
-      }
-
-      .pane.first {
-        border-top-left-radius: 0px;
         overflow: hidden;
       }
 
       .count {
-        border-radius: 99px;
-        background: rgba(0, 0, 0, 0.1);
-        color: rgba(0, 0, 0, 0.5);
-        font-size: 0.7em;
-        font-weight: 500;
-        min-width: 1.5em;
-        text-align: center;
-      }
-
-      .dot {
-        height: 0.5em;
-        width: 0.5em;
-        margin-left: 0.2em;
-        background: var(--color-primary-dark);
-        border-radius: 99px;
-      }
-
-      .notify .count {
-        background: var(--color-alert);
-        color: #fff;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 16px;
+        padding: 0 2px;
+        color: inherit;
+        opacity: 0.6;
+        font-size: 11px;
+        font-weight: var(--w-medium);
+        font-variant-numeric: tabular-nums;
       }
 
-      .alert {
-        color: var(--color-alert);
-        --icon-color: var(--color-alert);
+      .option.selected .count,
+      .option.alert .count {
+        min-width: 16px;
+        padding: 0 4px;
+        border-radius: 999px;
+        opacity: 1;
       }
 
-      .embedded.pane {
-        box-shadow: none;
-        margin: 0;
-        border-left: none !important;
-        border-right: none !important;
-        border-bottom: none !important;
+      .option.selected .count {
+        background: var(--accent-100);
+        color: var(--accent-700);
+        font-weight: var(--w-semibold);
       }
 
-      .embedded .option {
-        border-bottom: none !important;
-        border-radius: 0em;
-        border-top: none !important;
+      .option.alert .count {
+        background: var(--danger-bg);
+        color: var(--danger);
       }
 
-      .embedded .option.first {
-        margin-left: 0em;
-        border-top: none !important;
-        border-left: none;
+      .dot {
+        height: 0.5em;
+        width: 0.5em;
+        margin-left: 0.2em;
+        background: var(--accent-600);
+        border-radius: 99px;
       }
 
-      .embedded.options .option.selected {
-        box-shadow: none !important;
+      .option.selected .dot {
+        display: none;
       }
 
       .check {
         margin-left: 0.4em;
       }
-
-      .pane {
-        display: flex;
-      }
     `;
   }
 
-  @property({ type: Boolean })
-  embedded = false;
-
   @property({ type: Boolean })
   collapses = false;
 
@@ -277,7 +226,9 @@ export class TabPane extends RapidElement {
       }
     }
     this.options = tabs;
-    this.index = 0;
+    if (this.index < 0 || this.index >= tabs.length) {
+      this.index = 0;
+    }
   }
 
   public firstUpdated(
@@ -367,13 +318,11 @@ export class TabPane extends RapidElement {
   }
 
   public render(): TemplateResult {
-    const activeTab = this.options[this.index];
     return html`
       <div
         class="${getClasses({
           options: true,
           collapses: this.collapses,
-          embedded: this.embedded,
           focusedname: this.focusedName,
           unselect: this.unselect
         })}"
@@ -388,15 +337,9 @@ export class TabPane extends RapidElement {
                 first: index == 0,
                 selected: index == this.index,
                 hidden: tab.hidden,
-                notify: tab.notify,
                 alert: tab.alert,
                 dirty: tab.dirty
               })}"
-              style="${tab.selectionColor && index == this.index
-                ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`
-                : ''} ${tab.selectionBackground && index == this.index
-                ? `background-color:${tab.selectionBackground};`
-                : ''}"
             >
               ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}
               <div class="name">${tab.name} ${tab.dirty ? ` *` : ``}</div>
@@ -405,14 +348,11 @@ export class TabPane extends RapidElement {
                     <div class="badge">
                       ${tab.count > 0 && !tab.activity
                         ? html`<div class="count">
-                            ${tab.activity ? '' : tab.count.toLocaleString()}
+                            ${tab.count.toLocaleString()}
                           </div>`
                         : null}
                       ${tab.activity && tab.count > 0 && !tab.dirty
-                        ? html`<div
-                            class="dot"
-                            style="background:${tab.activityColor}"
-                          ></div>`
+                        ? html`<div class="dot"></div>`
                         : null}
                     </div>
                   `
@@ -429,35 +369,7 @@ export class TabPane extends RapidElement {
           <slot name="tab-right"></slot>
         </div>
       </div>
-      <div
-        @temba-details-changed=${this.handleTabDetailsChanged}
-        style="${activeTab?.borderColor
-          ? `
-            border-top: var(--temba-tabs-border-top, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            border-left: var(--temba-tabs-border-left, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            border-bottom: var(--temba-tabs-border-bottom, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            border-right: var(--temba-tabs-border-right, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            `
-          : ''} ${activeTab?.selectionBackground
-          ? `background:${activeTab?.selectionBackground};`
-          : ``}"
-        class="pane ${getClasses({
-          first: this.index == 0,
-          embedded: this.embedded
-        })}"
-      >
+      <div @temba-details-changed=${this.handleTabDetailsChanged} class="pane">
         <slot></slot>
         <slot name="pane-bottom"></slot>
       </div>