@nyaruka/temba-components 0.171.0 → 0.173.0

package/src/store/Store.ts

@@ -25,8 +25,10 @@ import { RapidElement } from '../RapidElement';
 import {
   RealtimeSubscription,
   setRealtimeContext,
-  subscribeToOrganization
+  subscribeToOrganization,
+  OrganizationEvent
 } from '../live/Realtime';
+import { Watchers } from '../live/Watchers';
 import { lru } from 'tiny-lru';
 import { DateTime } from 'luxon';
 import { css, html } from 'lit';
@@ -229,7 +231,7 @@ export class Store extends RapidElement {
   private shortcuts: Shortcut[] = [];
   private workspace: Workspace;
   private featuredFields: ContactField[] = [];
-  private assetWatchers: AssetWatcher[] = [];
+  private assetWatchers = new Watchers<AssetWatcher>('store asset watcher');
   // canonical names, the identities we've already asked about (including ones
   // the endpoint had no asset for) and their last-write versions, all bounded
   // so a long-lived page doesn't keep every asset it has ever rendered
@@ -729,19 +731,12 @@ export class Store extends RapidElement {
         })),
       onEvent
     };
-    this.assetWatchers.push(watcher);
-    Promise.resolve().then(() => {
-      if (this.assetWatchers.includes(watcher)) {
-        this.deliverAssetEvent(watcher, null);
-      }
-    });
+    this.assetWatchers.add(watcher);
+    this.assetWatchers.prime(watcher, () => watcher.onEvent(null));
 
     return {
       unsubscribe: () => {
-        const index = this.assetWatchers.indexOf(watcher);
-        if (index >= 0) {
-          this.assetWatchers.splice(index, 1);
-        }
+        this.assetWatchers.remove(watcher);
       }
     };
   }
@@ -754,7 +749,7 @@ export class Store extends RapidElement {
    */
   private async refreshAssetCache(): Promise<void> {
     const interests = new Map<string, StoreAssetReference>();
-    for (const watcher of this.assetWatchers) {
+    for (const watcher of this.assetWatchers.all()) {
       for (const interest of watcher.interests) {
         const identity = assetIdentity(interest);
         if (identity) {
@@ -765,9 +760,7 @@ export class Store extends RapidElement {
     if (interests.size > 0) {
       await this.resolveAssets([...interests.values()], true);
     }
-    for (const watcher of this.assetWatchers) {
-      this.deliverAssetEvent(watcher, null);
-    }
+    this.assetWatchers.each((watcher) => watcher.onEvent(null));
   }
 
   private async fetchAssetBatch(
@@ -863,8 +856,8 @@ export class Store extends RapidElement {
     this.assetVersions.set(identity, ++this.assetVersion);
   }
 
-  private handleOrganizationEvent(event: any): void {
-    const asset = event?.asset as StoreAsset;
+  private handleOrganizationEvent(event: OrganizationEvent): void {
+    const asset = event?.asset;
     const identity = assetIdentity(asset);
     if (
       event?.type !== 'asset_changed' ||
@@ -875,7 +868,7 @@ export class Store extends RapidElement {
     }
 
     const changed = { ...asset };
-    const interested = this.assetWatchers.filter((watcher) =>
+    const interested = this.assetWatchers.some((watcher) =>
       watchesAsset(watcher, changed)
     );
     const previouslyResolved = this.resolvedAssetIdentities.has(identity);
@@ -892,7 +885,7 @@ export class Store extends RapidElement {
         name: changed.name
       };
     }
-    if (!previouslyResolved && !pending && interested.length === 0) {
+    if (!previouslyResolved && !pending && !interested) {
       return;
     }
 
@@ -904,20 +897,10 @@ export class Store extends RapidElement {
       type: 'asset_changed',
       asset: changed
     };
-    for (const watcher of interested) {
-      this.deliverAssetEvent(watcher, publication);
-    }
-  }
-
-  private deliverAssetEvent(
-    watcher: AssetWatcher,
-    event: StoreAssetChangedEvent | null
-  ): void {
-    try {
-      watcher.onEvent(event);
-    } catch (error) {
-      console.error('store asset watcher failed', error);
-    }
+    this.assetWatchers.each(
+      (watcher) => watcher.onEvent(publication),
+      (watcher) => watchesAsset(watcher, changed)
+    );
   }
 
   public isDynamicGroup(uuid: string): boolean {

package/src/styles/designTokens.ts

@@ -20,16 +20,21 @@ export const designTokens = css`
        Fallback matches the design-system.css default so component-
        only test harnesses pick up the same brand colour. */
     --accent: rgb(var(--primary-rgb, 73, 127, 206));
-    --accent-50: color-mix(in srgb, var(--accent) 6%, white);
-    --accent-100: color-mix(in srgb, var(--accent) 16%, white);
-    --accent-200: color-mix(in srgb, var(--accent) 32%, white);
-    --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+    /* Static ramp values are pre-mixed from the default anchor for
+       browsers without color-mix() (pre-Chrome 111, e.g. the last
+       Chrome available on Windows 7/8.1). The @supports block below
+       re-derives them from --accent so host re-theming still works
+       where color-mix() is available. */
+    --accent-50: #f4f7fc;
+    --accent-100: #e2ebf7;
+    --accent-200: #c5d6ef;
+    --accent-300: #92b2e2;
     --accent-400: var(--accent);
-    --accent-500: color-mix(in srgb, var(--accent) 90%, black);
-    --accent-600: color-mix(in srgb, var(--accent) 80%, black);
-    --accent-700: color-mix(in srgb, var(--accent) 65%, black);
-    --accent-800: color-mix(in srgb, var(--accent) 50%, black);
-    --accent-900: color-mix(in srgb, var(--accent) 35%, black);
+    --accent-500: #4272b9;
+    --accent-600: #3a66a5;
+    --accent-700: #2f5386;
+    --accent-800: #244067;
+    --accent-900: #1a2c48;
 
     /* neutrals */
     --bg: #f6f7f9;
@@ -98,6 +103,17 @@ export const designTokens = css`
     --pad: 10px;
     --gap: 14px;
 
+    /* Page header strip. --header-h is the height of a header bar over a
+       single-line title (the tickets / contact chat strip). --title-line is
+       one line of that title, declared here rather than inside
+       temba-page-header because temba-header-bar derives its balanced inset
+       from it — keeping both on one definition means restyling the title
+       can't silently unbalance the strip. */
+    --header-h: 53px;
+    --title-size: 15.5px;
+    --title-leading: 1.25;
+    --title-line: calc(var(--title-size) * var(--title-leading));
+
     /* shadows */
     --shadow-1:
       0 1px 1px rgba(15, 22, 36, 0.04), 0 1px 2px rgba(15, 22, 36, 0.04);
@@ -124,14 +140,19 @@ export const designTokens = css`
        error state (e.g. the dropdown popup) reference --focus-muted
        / --focus-halo directly to skip that override. */
     --focus: rgb(var(--focus-rgb, 91, 156, 229));
-    --focus-50: color-mix(in srgb, var(--focus) 12%, white);
-    --focus-100: color-mix(in srgb, var(--focus) 24%, white);
-    --focus-200: color-mix(in srgb, var(--focus) 40%, white);
-    --focus-300: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-600: color-mix(in srgb, var(--focus) 60%, black);
-    --focus-700: color-mix(in srgb, var(--focus) 45%, black);
-    --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-halo: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
+    /* Static values pre-mixed from the default focus hue for browsers
+       without color-mix(); re-derived in the @supports block below. */
+    --focus-50: #ebf3fc;
+    --focus-100: #d8e7f9;
+    --focus-200: #bdd7f5;
+    --focus-300: #9dc4ef;
+    --focus-600: #375e89;
+    --focus-700: #294667;
+    --focus-muted: #9dc4ef;
+    /* The halo is a translucent wash, so unlike the opaque ramp steps
+       it can keep tracking the theme without color-mix() — rgba(var())
+       substitution works wherever custom properties do. */
+    --focus-halo: 0 0 0 3px rgba(var(--focus-rgb, 91, 156, 229), 0.3);
     --color-focus: var(--focus-muted);
     --widget-box-shadow-focused: var(--focus-halo);
 
@@ -160,4 +181,34 @@ export const designTokens = css`
     --temba-select-selected-font-size: 13.5px;
     --temba-select-min-height: var(--input-h);
   }
+
+  /* Where color-mix() is supported, derive the accent / focus ramps
+     from their anchors so host pages can re-theme by overriding just
+     --primary-rgb / --focus-rgb. Browsers without color-mix() keep the
+     static pre-mixed values above. Note the static values can't act as
+     per-declaration fallbacks — a custom property is never invalid at
+     parse time, so the last declaration always wins — hence the
+     @supports gate. */
+  @supports (color: color-mix(in srgb, red, red)) {
+    :host {
+      --accent-50: color-mix(in srgb, var(--accent) 6%, white);
+      --accent-100: color-mix(in srgb, var(--accent) 16%, white);
+      --accent-200: color-mix(in srgb, var(--accent) 32%, white);
+      --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+      --accent-500: color-mix(in srgb, var(--accent) 90%, black);
+      --accent-600: color-mix(in srgb, var(--accent) 80%, black);
+      --accent-700: color-mix(in srgb, var(--accent) 65%, black);
+      --accent-800: color-mix(in srgb, var(--accent) 50%, black);
+      --accent-900: color-mix(in srgb, var(--accent) 35%, black);
+
+      --focus-50: color-mix(in srgb, var(--focus) 12%, white);
+      --focus-100: color-mix(in srgb, var(--focus) 24%, white);
+      --focus-200: color-mix(in srgb, var(--focus) 40%, white);
+      --focus-300: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-600: color-mix(in srgb, var(--focus) 60%, black);
+      --focus-700: color-mix(in srgb, var(--focus) 45%, black);
+      --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-halo: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
+    }
+  }
 `;

package/src/styles/pillVariants.ts

@@ -100,10 +100,14 @@ export const pillVariants = css`
     border-color: var(--pill-border, var(--border));
     --icon-color: var(--text-2);
   }
+  /* Anchor-derived variants carry static pre-mixed bg/border values
+     for browsers without color-mix() (pre-Chrome 111); the @supports
+     block at the bottom re-derives them from the anchors so host
+     re-theming still works where color-mix() is available. */
   .pill-flow {
-    background: color-mix(in srgb, var(--flow) 12%, white);
+    background: #e3f4e9;
     color: var(--flow);
-    border-color: color-mix(in srgb, var(--flow) 25%, white);
+    border-color: #c5e8d2;
     --icon-color: var(--flow);
   }
   /* Recipient color — shared by contacts and groups. Anchored to
@@ -111,27 +115,27 @@ export const pillVariants = css`
      identity even when the host page re-themes via --primary-rgb. */
   .pill-contact,
   .pill-group {
-    background: color-mix(in srgb, var(--recipient) 12%, white);
+    background: #e5eef6;
     color: var(--recipient);
-    border-color: color-mix(in srgb, var(--recipient) 25%, white);
+    border-color: #cadbec;
     --icon-color: var(--recipient);
   }
   .pill-channel {
-    background: color-mix(in srgb, var(--channel) 12%, white);
+    background: #ede4f5;
     color: var(--channel);
-    border-color: color-mix(in srgb, var(--channel) 25%, white);
+    border-color: #dac8e9;
     --icon-color: var(--channel);
   }
   .pill-topic {
-    background: color-mix(in srgb, var(--topic) 12%, white);
+    background: #faefe1;
     color: var(--topic);
-    border-color: color-mix(in srgb, var(--topic) 25%, white);
+    border-color: #f6ddc1;
     --icon-color: var(--topic);
   }
   .pill-campaign {
-    background: color-mix(in srgb, var(--campaign) 12%, white);
+    background: #e1f2f6;
     color: var(--campaign);
-    border-color: color-mix(in srgb, var(--campaign) 25%, white);
+    border-color: #c1e4ec;
     --icon-color: var(--campaign);
   }
   .pill-field {
@@ -171,4 +175,32 @@ export const pillVariants = css`
     border-color: var(--pill-border, var(--border));
     --icon-color: var(--text-2);
   }
+
+  /* Anchor-derived bg/border for browsers with color-mix(). These
+     can't be simple same-rule fallbacks: a declaration containing
+     var() isn't dropped at parse time, it goes invalid at
+     computed-value time and takes the earlier declaration with it. */
+  @supports (color: color-mix(in srgb, red, red)) {
+    .pill-flow {
+      background: color-mix(in srgb, var(--flow) 12%, white);
+      border-color: color-mix(in srgb, var(--flow) 25%, white);
+    }
+    .pill-contact,
+    .pill-group {
+      background: color-mix(in srgb, var(--recipient) 12%, white);
+      border-color: color-mix(in srgb, var(--recipient) 25%, white);
+    }
+    .pill-channel {
+      background: color-mix(in srgb, var(--channel) 12%, white);
+      border-color: color-mix(in srgb, var(--channel) 25%, white);
+    }
+    .pill-topic {
+      background: color-mix(in srgb, var(--topic) 12%, white);
+      border-color: color-mix(in srgb, var(--topic) 25%, white);
+    }
+    .pill-campaign {
+      background: color-mix(in srgb, var(--campaign) 12%, white);
+      border-color: color-mix(in srgb, var(--campaign) 25%, white);
+    }
+  }
 `;

package/static/css/design-system.css

@@ -20,18 +20,22 @@
   --primary-rgb: 73, 127, 206;
 
   /* accent ramp — derived from --primary-rgb via sRGB mixing.
-     400 == primary; the ramp computes outward in both directions. */
+     400 == primary; the ramp computes outward in both directions.
+     Static values pre-mixed from the default anchor come first for
+     browsers without color-mix() (pre-Chrome 111); the @supports
+     block below re-derives them from --accent so re-theming via
+     --primary-rgb still works where color-mix() is available. */
   --accent:      rgb(var(--primary-rgb));
-  --accent-50:   color-mix(in srgb, var(--accent) 6%,  white);
-  --accent-100:  color-mix(in srgb, var(--accent) 16%, white);
-  --accent-200:  color-mix(in srgb, var(--accent) 32%, white);
-  --accent-300:  color-mix(in srgb, var(--accent) 60%, white);
+  --accent-50:   #f4f7fc;
+  --accent-100:  #e2ebf7;
+  --accent-200:  #c5d6ef;
+  --accent-300:  #92b2e2;
   --accent-400:  var(--accent);
-  --accent-500:  color-mix(in srgb, var(--accent) 90%, black);
-  --accent-600:  color-mix(in srgb, var(--accent) 80%, black);
-  --accent-700:  color-mix(in srgb, var(--accent) 65%, black);
-  --accent-800:  color-mix(in srgb, var(--accent) 50%, black);
-  --accent-900:  color-mix(in srgb, var(--accent) 35%, black);
+  --accent-500:  #4272b9;
+  --accent-600:  #3a66a5;
+  --accent-700:  #2f5386;
+  --accent-800:  #244067;
+  --accent-900:  #1a2c48;
 
   /* neutrals */
   --bg:            #F6F7F9;
@@ -94,6 +98,24 @@
   --section-w-collapsed:  56px;
 }
 
+/* Where color-mix() is supported, derive the accent ramp from --accent
+   so re-theming via --primary-rgb works without design-system.js.
+   Custom properties can't fall back per-declaration (they're never
+   invalid at parse time), hence the @supports gate. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --accent-50:  color-mix(in srgb, var(--accent) 6%,  white);
+    --accent-100: color-mix(in srgb, var(--accent) 16%, white);
+    --accent-200: color-mix(in srgb, var(--accent) 32%, white);
+    --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+    --accent-500: color-mix(in srgb, var(--accent) 90%, black);
+    --accent-600: color-mix(in srgb, var(--accent) 80%, black);
+    --accent-700: color-mix(in srgb, var(--accent) 65%, black);
+    --accent-800: color-mix(in srgb, var(--accent) 50%, black);
+    --accent-900: color-mix(in srgb, var(--accent) 35%, black);
+  }
+}
+
 /* ─── base ───────────────────────────────────────────────────────────── */
 .ds * { box-sizing: border-box; }
 .ds {
@@ -364,7 +386,13 @@
   color: white;
 }
 .ds .btn-danger:hover {
-  background: color-mix(in srgb, var(--danger) 88%, black);
+  /* pre-mixed fallback for browsers without color-mix() */
+  background: #b73737;
+}
+@supports (color: color-mix(in srgb, red, red)) {
+  .ds .btn-danger:hover {
+    background: color-mix(in srgb, var(--danger) 88%, black);
+  }
 }
 .ds .btn.is-disabled,
 .ds .btn:disabled { opacity: 0.45; cursor: not-allowed; }
@@ -533,7 +561,14 @@
 .ds .input:focus-within {
   outline: 0;
   border-color: var(--accent-300);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+  /* translucent-ring fallback for browsers without color-mix() */
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
+}
+@supports (color: color-mix(in srgb, red, red)) {
+  .ds .input:focus,
+  .ds .input:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+  }
 }
 
 .ds .input-tokens {

package/static/css/temba-components.css

@@ -41,15 +41,19 @@
     --curvature: 6px;
     --curvature-widget: 6px;
     --focus: rgb(var(--focus-rgb, 91, 156, 229));
-    --focus-50: color-mix(in srgb, var(--focus) 12%, white);
-    --focus-100: color-mix(in srgb, var(--focus) 24%, white);
-    --focus-200: color-mix(in srgb, var(--focus) 40%, white);
-    --focus-300: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-600: color-mix(in srgb, var(--focus) 60%, black);
-    --focus-700: color-mix(in srgb, var(--focus) 45%, black);
-    --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
-    --focus-halo: 0 0 0 3px
-      color-mix(in srgb, var(--focus) 30%, transparent);
+    /* Static values pre-mixed from the default focus hue for browsers
+       without color-mix(); re-derived in the @supports block below. */
+    --focus-50: #ebf3fc;
+    --focus-100: #d8e7f9;
+    --focus-200: #bdd7f5;
+    --focus-300: #9dc4ef;
+    --focus-600: #375e89;
+    --focus-700: #294667;
+    --focus-muted: #9dc4ef;
+    /* The halo is a translucent wash, so unlike the opaque ramp steps
+       it can keep tracking the theme without color-mix() — rgba(var())
+       substitution works wherever custom properties do. */
+    --focus-halo: 0 0 0 3px rgba(var(--focus-rgb, 91, 156, 229), 0.3);
     --color-focus: #a4cafe;
     --color-widget-bg: #fff;
     --color-widget-bg-focused: #fff;
@@ -201,6 +205,24 @@
 
   }
 
+  /* Where color-mix() is supported, derive the focus ramp from --focus
+     so re-theming via --focus-rgb works. Custom properties can't fall
+     back per-declaration (they're never invalid at parse time), hence
+     the @supports gate. */
+  @supports (color: color-mix(in srgb, red, red)) {
+    html {
+      --focus-50: color-mix(in srgb, var(--focus) 12%, white);
+      --focus-100: color-mix(in srgb, var(--focus) 24%, white);
+      --focus-200: color-mix(in srgb, var(--focus) 40%, white);
+      --focus-300: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-600: color-mix(in srgb, var(--focus) 60%, black);
+      --focus-700: color-mix(in srgb, var(--focus) 45%, black);
+      --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
+      --focus-halo: 0 0 0 3px
+        color-mix(in srgb, var(--focus) 30%, transparent);
+    }
+  }
+
   temba-button {
     --button-bg: var(--accent-500);
     --button-text: var(--color-text-light);