@nyaruka/temba-components 0.163.0 → 0.165.0

package/orca/setup.sh

@@ -3,7 +3,7 @@
 # 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.
+# bun dependencies inside the worktree.
 #
 # Usage:
 #   ./orca/setup.sh                  # run directly
@@ -75,7 +75,7 @@ esac
 # Install dependencies inside the worktree.
 docker exec "$CONTAINER_NAME" bash -c '
     cd "/workspaces/worktrees/temba-components/'"$WORKSPACE_NAME"'"
-    pnpm install
+    bun install
 '
 
 echo "Worktree '$WORKSPACE_NAME' ready for development"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.163.0",
+  "version": "0.165.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -9,25 +9,25 @@
   "license": "AGPL-3.0-only",
   "repository": "https://github.com/nyaruka/temba-components/",
   "scripts": {
-    "start": "concurrently --kill-others --names tsc,web-dev-server \"pnpm tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --watch --port 3010 --esbuild-target auto\"",
+    "start": "concurrently --kill-others --names tsc,web-dev-server \"bun run tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --watch --port 3010 --esbuild-target auto\"",
     "tsc:watch": "tsc --watch",
-    "build": "rimraf dist && pnpm svg && tsc && rollup -c rollup.components.mjs ",
+    "build": "rimraf dist && bun run svg && tsc && rollup -c rollup.components.mjs ",
     "build-wc": "rollup -c rollup.webchat.mjs",
-    "dev": "pnpm build && cp -R ./dist/* ../temba/rapidpro/node_modules/@nyaruka/temba-components/dist/ && cp -R ./dist/* ../floweditor/node_modules/@nyaruka/temba-components/dist/",
-    "pre-commit": "pnpm locale:extract && pnpm locale:build && pnpm svg && git add ./src/Icons.ts ./static/svg/index.svg ./xliff ./src/locales && lint-staged",
+    "dev": "bun run build && cp -R ./dist/* ../temba/rapidpro/node_modules/@nyaruka/temba-components/dist/ && cp -R ./dist/* ../floweditor/node_modules/@nyaruka/temba-components/dist/",
+    "pre-commit": "bun run locale:extract && bun run locale:build && bun run svg && git add ./src/Icons.ts ./static/svg/index.svg ./xliff ./src/locales && lint-staged",
     "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore --ignore-pattern \"src/locales/\"",
     "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" \"!src/locales/**\" --config .prettierrc --write --ignore-path .gitignore",
-    "format": "pnpm format:eslint && pnpm format:prettier",
+    "format": "bun run format:eslint && bun run format:prettier",
     "test": "wtr --node-resolve",
     "test:fast": "wtr --node-resolve --fast",
     "test:coverage": "wtr --node-resolve --coverage",
     "check-coverage": "node check-coverage.js",
-    "validate": "pnpm format && pnpm build && pnpm test:coverage && pnpm check-coverage",
+    "validate": "bun run format && bun run build && bun run test:coverage && bun run check-coverage",
     "test:watch": "wtr --node-resolve --watch",
     "stress-test": "node stress-test.js",
     "svg": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/index.svg' --usage='./src/Icons.ts'",
     "svg-wc": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/webchat.svg' --usage='./src/webchat/index.ts'",
-    "version": "pnpm run build && auto-changelog -p && git add CHANGELOG.md",
+    "version": "bun run build && auto-changelog -p && git add CHANGELOG.md",
     "locale:extract": "lit-localize extract --config localize.config.json",
     "locale:build": "echo 'Building localizations..' && lit-localize build --config localize.config.json > dist/locale.out 2>&1",
     "dev-data:sync": "node scripts/dev-data-sync.mjs copy",
@@ -112,14 +112,9 @@
     "typescript": "5.9.3",
     "yargs": "^17.7.2"
   },
-  "pnpm": {
-    "overrides": {
-      "trim": "^0.0.3",
-      "prismjs": "^1.23.0",
-      "@open-wc/testing-helpers": "3.0.0",
-      "@types/minimatch": "5.1.2",
-      "@types/chai": "4.3.20"
-    }
-  },
-  "packageManager": "pnpm@9.15.4"
+  "overrides": {
+    "@open-wc/testing-helpers": "3.0.0",
+    "@types/minimatch": "5.1.2",
+    "@types/chai": "4.3.20"
+  }
 }

package/scripts/dev-data-sync.mjs

@@ -117,7 +117,7 @@ function showStatus() {
   
   if (!fs.existsSync(DEV_DATA_DIR)) {
     console.log('❌ No development data directory found');
-    console.log('💡 Run the dev server to initialize, or use "pnpm dev-data:reset"');
+    console.log('💡 Run the dev server to initialize, or use "bun run dev-data:reset"');
     return;
   }
 
@@ -175,8 +175,8 @@ switch (command) {
     console.log('  reset/wipe  - Wipe dev data and restore defaults');
     console.log('  status      - Show current status');
     console.log('');
-    console.log('Usage: pnpm dev-data:copy');
-    console.log('       pnpm dev-data:reset');
-    console.log('       pnpm dev-data:status');
+    console.log('Usage: bun run dev-data:copy');
+    console.log('       bun run dev-data:reset');
+    console.log('       bun run dev-data:status');
     process.exit(1);
 }

package/src/Icons.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
-// for cache busting we dynamically generate a fingerprint, use pnpm svg to update
-export const SVG_FINGERPRINT = '45268f1573f1e352c7d62232863725bb';
+// for cache busting we dynamically generate a fingerprint, use bun run svg to update
+export const SVG_FINGERPRINT = '27198f759c371df944f8ec5de0a29dd6';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -132,6 +132,7 @@ export enum Icon {
   progress_spinner = 'refresh-cw-04',
   refresh = 'refresh-cw-05',
   featured = 'star-01',
+  featured_filled = 'star-filled',
   quick_replies = 'dotpoints-01',
   recording = 'microphone-01',
   resend = 'refresh-cw-05',

package/src/display/Chat.ts

@@ -5,6 +5,7 @@ import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { TicketEvent } from '../events';
 import { DEFAULT_AVATAR } from '../webchat/assets';
+import { attachmentAsString } from '../utils';
 
 const BATCH_TIME_WINDOW = 60 * 60 * 1000;
 const SCROLL_FETCH_BUFFER = 200; // pixels from top
@@ -1446,7 +1447,7 @@ export class Chat extends RapidElement {
 
     // check if message has location attachment and text is just coordinates
     const hasLocationAttachment = message.msg.attachments?.some((att) =>
-      att.startsWith('geo:')
+      attachmentAsString(att).startsWith('geo:')
     );
     const textIsCoordinates =
       hasLocationAttachment &&
@@ -1510,7 +1511,7 @@ export class Chat extends RapidElement {
           ${(message.msg.attachments || []).map(
             (attachment) =>
               html`<temba-thumbnail
-                attachment="${attachment}"
+                attachment="${attachmentAsString(attachment)}"
               ></temba-thumbnail>`
           )}
         </div>

package/src/display/Lightbox.ts

@@ -1,59 +1,65 @@
 import { css, html, PropertyValueMap } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
-import { styleMap } from 'lit-html/directives/style-map.js';
 
 /**
- * This component relies on a bit of sleight of hand magic
- * to achieve it's effect. As such, it requires the use of
- * computed animation times and window.setTimeout().
+ * A full-screen viewer for an image attachment. `showElement` is handed the
+ * element that was clicked (a raw <img> or a temba-thumbnail exposing a `url`),
+ * and we present that image centered and contained within the viewport with a
+ * short fade / scale-in. Clicking anywhere dismisses it.
  */
 export class Lightbox extends RapidElement {
   static get styles() {
     return css`
       :host {
-        z-index: 10000;
-        position: absolute;
+        position: fixed;
         top: 0;
         left: 0;
+        z-index: 10000;
       }
 
-      .mask {
+      /* a full-viewport layer that centers the image, catches the dismiss
+         click, and lays a light translucent mask over the page behind */
+      .backdrop {
+        position: fixed;
+        inset: 0;
         display: flex;
-        opacity: 0;
+        align-items: center;
+        justify-content: center;
         background: rgba(0, 0, 0, 0.5);
-        position: absolute;
-        height: 100svh;
-        width: 100svw;
+        opacity: 0;
         pointer-events: none;
+        transition: opacity var(--anim) ease;
       }
 
-      .zoom .mask {
+      .backdrop.zoom {
         opacity: 1;
         pointer-events: auto;
       }
 
-      .matte {
-        position: absolute;
-        transform: translate(400, 400) scale(3, 3);
-        border-radius: 2%;
-        overflow: hidden;
-        box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
+      img {
+        /* contain the image within the viewport at any aspect ratio, on
+           its own solid backing (so transparent images aren't see-through) */
+        box-sizing: border-box;
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: contain;
+        background: #fff;
+        padding: 6px;
+        border-radius: calc(var(--curvature) * 1.5);
+        box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.4);
+        transform: scale(0.85);
+        opacity: 0;
+        transition:
+          transform var(--anim) ease,
+          opacity var(--anim) ease;
       }
 
-      .download {
-        background: rgba(0, 0, 0, 0.5);
-        position: absolute;
-        display:flex;
-        align-items:center;
-        color:#fff;
-        padding:0.5em;
-        border-radius:var(--curvature);
-        background:rgba(0,0,0,0.5);
+      .zoom img {
+        transform: scale(1);
+        opacity: 1;
       }
-
-  }
     `;
   }
 
@@ -66,77 +72,41 @@ export class Lightbox extends RapidElement {
   @property({ type: Boolean })
   zoom = false;
 
-  @property({ type: Number })
-  zoomPct = 0.9;
-
-  private ele: HTMLElement;
-  private left: number;
-  private top: number;
-  private height: number;
-  private width: number;
-  private scale = 1;
-  private xTrans = 0;
-  private yTrans = 0;
+  @state()
+  private url = '';
 
   protected updated(
     changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
+    // mount first (opacity 0 / scaled down), then flip to zoom on the next
+    // tick so the transition to the visible state actually animates
     if (changed.has('show') && this.show) {
       window.setTimeout(() => {
         this.zoom = true;
       }, 0);
     }
 
+    // once zoomed out, wait for the fade to finish before unmounting the image
     if (changed.has('zoom') && !this.zoom && this.show) {
       window.setTimeout(() => {
-        this.show = false;
+        // unless a re-open during the fade-out already zoomed us back in
+        if (!this.zoom) {
+          this.show = false;
+        }
       }, this.animationTime);
     }
   }
 
   public showElement(ele: HTMLElement) {
-    // size our matte according to the ele's boundaries
-    const bounds = ele.getBoundingClientRect();
-    this.ele = ele.cloneNode() as HTMLElement;
-    (this.ele as any).zoom = true;
-
-    this.left = bounds.left;
-    this.top = bounds.top;
-    this.width = bounds.width;
-    this.height = bounds.height;
-
-    this.xTrans = 0;
-    this.yTrans = 0;
-    this.scale = 1;
-
-    let desiredWidth = this.width;
-    let desiredHeight = this.height;
-    let desiredScale = this.scale;
-
-    const maxHeight = window.innerHeight * this.zoomPct;
-    const maxWidth = window.innerWidth * this.zoomPct;
-
-    // if the width fits, constrain by height
-    if (this.width * (maxHeight / this.height) < maxWidth) {
-      desiredHeight = window.innerHeight * this.zoomPct;
-      desiredScale = desiredHeight / this.height;
-      desiredWidth = this.width * desiredScale;
+    // the clicked element is either a raw <img> or a temba-thumbnail that
+    // exposes the attachment url; take whichever gives us an image source
+    this.url = (ele as HTMLImageElement).src || (ele as any).url || '';
+    if (this.show) {
+      // already mounted (e.g. re-opened mid-dismissal) — re-zoom in place
+      this.zoom = true;
     } else {
-      desiredWidth = window.innerWidth * this.zoomPct;
-      desiredScale = desiredWidth / this.width;
-      desiredHeight = this.height * desiredScale;
+      this.show = true; // updated() flips zoom on the next tick
     }
-
-    const xGrowth = (desiredWidth - this.width) / 2;
-    const xDest = (window.innerWidth - desiredWidth) / 2;
-    this.xTrans = xDest - this.left + xGrowth;
-
-    const yGrowth = (desiredHeight - this.height) / 2;
-    const yDest = (window.innerHeight - desiredHeight) / 2;
-    this.yTrans = yDest - this.top + yGrowth;
-
-    this.scale = desiredScale;
-    this.show = true;
   }
 
   public handleClick() {
@@ -144,37 +114,15 @@ export class Lightbox extends RapidElement {
   }
 
   public render() {
-    const styles = {
-      transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`
-    };
-
-    if (this.show) {
-      styles['left'] = this.left + 'px';
-      styles['top'] = this.top + 'px';
-      styles['width'] = this.width + 'px';
-    }
-
-    if (this.zoom) {
-      styles['transform'] =
-        `translate(${this.xTrans}px, ${this.yTrans}px) scale(${this.scale}, ${this.scale})`;
-    }
-
     return html`
       <div
-        class=${getClasses({
-          container: true,
-          show: this.show,
-          zoom: this.zoom
-        })}
+        class=${getClasses({ backdrop: true, zoom: this.zoom })}
+        style="--anim: ${this.animationTime}ms"
         @click=${this.handleClick}
       >
-        <div
-          class=${getClasses({ mask: true })}
-          style="transition: all ${this.animationTime}ms; ease"
-        ></div>
-        <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>
-          ${this.show ? html`${this.ele}` : null}
-        </div>
+        ${this.show && this.url
+          ? html`<img src=${this.url} alt="attachment" />`
+          : null}
       </div>
     `;
   }

package/src/display/ProgressBar.ts

@@ -108,6 +108,12 @@ export class ProgressBar extends RapidElement {
       transition: flex-basis 2s;
     }
 
+    /* At 0% an animated meter keeps a sliver of bar so its moving
+       stripes show the work is underway rather than a dead track. */
+    .meter.zero > span {
+      min-width: 1.25em;
+    }
+
     .meter .incomplete {
       flex-grow: 1;
     }
@@ -163,6 +169,11 @@ export class ProgressBar extends RapidElement {
   @property({ type: Boolean })
   showPercentage = false;
 
+  /** Suppresses the trailing percentage / countdown box outright —
+   * for compact placements where the meter alone is the display. */
+  @property({ type: Boolean })
+  hidePercentage = false;
+
   @property({ type: String })
   message: string;
 
@@ -194,7 +205,8 @@ export class ProgressBar extends RapidElement {
     const meterClasses = [
       'meter',
       this.done ? 'done' : '',
-      this.animated ? '' : 'static'
+      this.animated ? '' : 'static',
+      this.animated && !this.done && this.pct === 0 ? 'zero' : ''
     ]
       .filter(Boolean)
       .join(' ');
@@ -208,7 +220,8 @@ export class ProgressBar extends RapidElement {
         <div class="incomplete"></div>
       </div>
 
-      ${this.showPercentage || this.showEstimatedCompletion
+      ${(this.showPercentage || this.showEstimatedCompletion) &&
+      !this.hidePercentage
         ? html`<div class="etc">
             <div>
               ${this.estimatedCompletionDate &&

package/src/display/Thumbnail.ts

@@ -182,6 +182,11 @@ export class Thumbnail extends RapidElement {
   // audio player state
   private audio: HTMLAudioElement | null = null;
 
+  // set when an image attachment fails to load, so we fall back to an
+  // icon instead of the browser's broken-image glyph
+  @state()
+  private imageError = false;
+
   @state()
   private audioPlaying = false;
 
@@ -264,6 +269,8 @@ export class Thumbnail extends RapidElement {
 
     // convert our attachment to a url and label
     if (changes.has('attachment')) {
+      // a new attachment gets a fresh shot at loading its image
+      this.imageError = false;
       if (this.attachment) {
         const splitIndex = this.attachment.indexOf(':');
         if (splitIndex === -1) {
@@ -337,12 +344,27 @@ export class Thumbnail extends RapidElement {
     }
   }
 
-  public handleThumbnailClicked() {
-    if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {
-      window.setTimeout(() => {
-        const lightbox = document.querySelector('temba-lightbox') as Lightbox;
-        lightbox.showElement(this);
-      }, 100);
+  public handleThumbnailClicked(e?: Event) {
+    // a thumbnail click is a self-contained action (lightbox / open / play);
+    // don't let it bubble to a clickable ancestor (e.g. a list row that would
+    // otherwise navigate away instead of showing the attachment)
+    e?.stopPropagation();
+    if (
+      this.contentType === ThumbnailContentType.IMAGE &&
+      this.preview &&
+      !this.imageError
+    ) {
+      const lightbox = document.querySelector('temba-lightbox') as Lightbox;
+      if (lightbox) {
+        window.setTimeout(() => {
+          lightbox.showElement(this);
+        }, 100);
+      } else {
+        // no lightbox mounted on this page — just open the image. This must
+        // happen synchronously inside the click's user activation or popup
+        // blockers will eat it.
+        window.open(this.url, '_blank');
+      }
     } else if (this.contentType === ThumbnailContentType.LOCATION) {
       // open location in openstreetmap
       const osmUrl = `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=15/${this.latitude}/${this.longitude}`;
@@ -372,12 +394,17 @@ export class Thumbnail extends RapidElement {
           : ''}"
         url=${this.url}
       >
-        ${this.contentType === ThumbnailContentType.IMAGE && this.preview
+        ${this.contentType === ThumbnailContentType.IMAGE &&
+        this.preview &&
+        !this.imageError
           ? html`<div class=""><div class="download" @click=${this.handleDownload.bind(
               this
             )}><temba-icon size="1" style="color:#fff;" name="download"></temba-icon></div><img
           class="observe thumb ${this.contentType}"
           src="${this.url}"
+          @error=${() => {
+            this.imageError = true;
+          }}
         ></img></div>`
           : this.contentType === ThumbnailContentType.AUDIO
             ? html`<div class="audio-player">

package/src/form/Compose.ts

@@ -406,11 +406,25 @@ export class Compose extends FieldElement {
     if (!this.hasAttribute('tabindex')) {
       this.setAttribute('tabindex', '-1');
     }
+    // both phases: capture claims a send-Enter before the rich editor's
+    // own keydown inserts a newline (which would flash before the send
+    // clears it); bubble keeps Enter-to-send working from anywhere else
+    // in the compose after inner widgets have had their shot at it
+    this.addEventListener(
+      'keydown',
+      this.handleHostKeyDown as EventListener,
+      true
+    );
     this.addEventListener('keydown', this.handleHostKeyDown as EventListener);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener(
+      'keydown',
+      this.handleHostKeyDown as EventListener,
+      true
+    );
     this.removeEventListener(
       'keydown',
       this.handleHostKeyDown as EventListener
@@ -449,10 +463,23 @@ export class Compose extends FieldElement {
     }
 
     if (evt.key === 'Enter' && !evt.shiftKey) {
+      // an Enter confirming an IME composition belongs to the editor
+      if (evt.isComposing || evt.keyCode === 229) {
+        return;
+      }
       if (this.showShortcuts) {
         return;
       }
       const editor = this.getMessageEditor();
+      // during capture only editor presses are claimed — anything else
+      // (quick replies, attachments) waits for the bubble so the widget
+      // it targets keeps first claim on the event
+      if (
+        evt.eventPhase === Event.CAPTURING_PHASE &&
+        !(editor && evt.composedPath().includes(editor))
+      ) {
+        return;
+      }
       if (editor) {
         const richEdit = editor.getRichEditor();
         if (richEdit && richEdit.hasVisibleOptions()) {
@@ -460,7 +487,10 @@ export class Compose extends FieldElement {
         }
       }
       evt.preventDefault();
-      evt.stopPropagation();
+      // immediate: the handler is registered for both phases, and an
+      // at-target event would otherwise reach the second registration
+      // and send twice
+      evt.stopImmediatePropagation();
       this.triggerSend();
     }
   };