@nyaruka/temba-components 0.156.17 → 0.157.0

package/src/styles/pillVariants.ts

@@ -0,0 +1,136 @@
+import { css } from 'lit';
+
+/**
+ * TextIt Design System pill color variants — single source of truth.
+ *
+ * Provides the color triple (background / foreground / border) keyed
+ * off `.pill-{type}` plus the JS-side taxonomy (`PILL_TYPES`,
+ * `PILL_TYPE_ICONS`, `iconToPillType`) consumed by Select.ts and
+ * flow/utils.ts.
+ *
+ * Variant theming:
+ *   - .pill-contact / .pill-group: full ramp derived from --accent
+ *     via `color-mix(in oklab, …)`. Override --accent to re-theme.
+ *   - .pill-flow, .pill-channel: bg/border derived from --flow /
+ *     --channel via color-mix; text + icon use the anchor directly.
+ *   - .pill-field: bg/border are fixed at the Tailwind yellow ramp
+ *     (yellow-100 / yellow-300) because yellow has too little
+ *     contrast against white to color-mix into a recognizable swatch.
+ *     Text uses yellow-900 for readability; the icon uses --field
+ *     directly, which is the only knob a host page can re-theme.
+ *   - .pill-neutral / .pill-label / .pill-keyword: greys; not
+ *     anchor-driven.
+ *
+ * Shape (height, padding, radius, icon spacing) is the consumer's
+ * concern, since pill use-cases differ: Select chips have a remove
+ * button on the right, ContactDetails pills are clickable links, etc.
+ *
+ * To add a new variant: extend `PILL_TYPES`, optionally add an entry
+ * to `PILL_TYPE_ICONS` / `ICON_TO_PILL_TYPE`, append a `.pill-{type}`
+ * block below, and reference an anchor in `designTokens.ts`.
+ */
+
+/** Recognized pill variants. Anything outside this set falls back to
+ * `pill-neutral` (or is rejected by callers as not a pill at all). */
+export const PILL_TYPES: ReadonlySet<string> = new Set([
+  'neutral',
+  'flow',
+  'group',
+  'contact',
+  'field',
+  'label',
+  'keyword',
+  'channel'
+]);
+
+/** Default icon name for each pill variant. Used when a consumer
+ * specifies `type` but not `icon` — keeps Omnibox-style options and
+ * Django-form-rendered options visually consistent without making the
+ * data layer set both fields. */
+export const PILL_TYPE_ICONS: Readonly<Record<string, string>> = {
+  group: 'group',
+  contact: 'contact',
+  field: 'fields',
+  flow: 'flow',
+  label: 'label'
+};
+
+/** Inverse mapping: icon name (alias or resolved SVG id) → pill type.
+ * Both forms are valid since flow-action items pass through either. */
+const ICON_TO_PILL_TYPE: Readonly<Record<string, string>> = {
+  flow: 'flow',
+  group: 'group',
+  contact: 'contact',
+  contacts: 'contact',
+  field: 'field',
+  fields: 'field',
+  label: 'label',
+  // resolved Icon enum SVG ids
+  'users-01': 'group',
+  'atom-01': 'group',
+  'user-01': 'contact',
+  'tag-01': 'label'
+};
+
+export const iconToPillType = (icon?: string): string | undefined => {
+  if (!icon) return undefined;
+  if (ICON_TO_PILL_TYPE[icon]) return ICON_TO_PILL_TYPE[icon];
+  // Legacy alias prefix (e.g. 'group_smart' → 'group').
+  if (icon.startsWith('group')) return 'group';
+  return undefined;
+};
+
+export const pillVariants = css`
+  .pill-neutral {
+    background: var(--sunken);
+    color: var(--text-1);
+    border-color: var(--border);
+    --icon-color: var(--text-2);
+  }
+  .pill-flow {
+    background: color-mix(in oklab, var(--flow) 12%, white);
+    color: var(--flow);
+    border-color: color-mix(in oklab, var(--flow) 25%, white);
+    --icon-color: var(--flow);
+  }
+  /* Recipient color — shared by contacts and groups. */
+  .pill-contact,
+  .pill-group {
+    background: var(--accent-100);
+    color: var(--accent-700);
+    border-color: var(--accent-200);
+    --icon-color: var(--accent-700);
+  }
+  .pill-channel {
+    background: color-mix(in oklab, var(--channel) 12%, white);
+    color: var(--channel);
+    border-color: color-mix(in oklab, var(--channel) 25%, white);
+    --icon-color: var(--channel);
+  }
+  .pill-field {
+    /* Yellow has very low contrast against white, so the color-mix
+       approach used by other variants washes out at any readable mix
+       percentage. We use the Tailwind yellow ramp directly for bg
+       (yellow-100) / border (yellow-300) / text (yellow-900). The
+       icon hue stays anchored to --field so a host page can still
+       re-theme the variant by overriding that one token. */
+    background: #fef9c3;
+    color: #854d0e;
+    border-color: #fde68a;
+    --icon-color: var(--field);
+  }
+  .pill-keyword {
+    background: var(--sunken);
+    color: var(--text-1);
+    border-color: var(--border);
+    --icon-color: var(--text-2);
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+  }
+  .pill-label {
+    background: var(--sunken);
+    color: var(--text-2);
+    border-color: var(--border);
+    --icon-color: var(--text-2);
+  }
+`;

package/static/css/temba-components.css

@@ -6,7 +6,80 @@
 
   html {
 
-    --font-family: 'Roboto', Helvetica, Arial, sans-serif;
+    /* ─── TextIt Design System tokens ─────────────────────────────────────
+       Single source of truth. Cascades through Shadow DOM into every
+       component. Legacy tokens below are aliased to these — keep both in
+       sync if the design system evolves. */
+
+    /* accent ramp — derived from a single anchor via OKLab mixing */
+    --accent:      #2A6FB5;
+    --accent-50:   color-mix(in oklab, var(--accent) 6%,  white);
+    --accent-100:  color-mix(in oklab, var(--accent) 12%, white);
+    --accent-200:  color-mix(in oklab, var(--accent) 25%, white);
+    --accent-300:  color-mix(in oklab, var(--accent) 45%, white);
+    --accent-400:  color-mix(in oklab, var(--accent) 75%, white);
+    --accent-500:  var(--accent);
+    --accent-600:  color-mix(in oklab, var(--accent) 88%, black);
+    --accent-700:  color-mix(in oklab, var(--accent) 75%, black);
+    --accent-800:  color-mix(in oklab, var(--accent) 60%, black);
+    --accent-900:  color-mix(in oklab, var(--accent) 45%, black);
+
+    /* neutrals */
+    --bg:            #F6F7F9;
+    --surface:       #FFFFFF;
+    --sunken:        #F1F3F5;
+    --border:        #E6E8EC;
+    --border-strong: #D2D6DC;
+    --text-1:        #1A1F26;
+    --text-2:        #4D5664;
+    --text-3:        #7B8593;
+    --text-4:        #A2ABB8;
+
+    /* status — full set */
+    --success:        #16A34A;
+    --success-bg:     #E8F6EE;
+    --success-border: #BFE5CD;
+    --info:           #2563EB;
+    --info-bg:        #E8F0FE;
+    --info-border:    #C7D7F8;
+    --warning:        #B45309;
+    --warning-bg:     #FDF3E2;
+    --warning-border: #F2D9A9;
+    --danger:         #D03F3F;
+    --danger-bg:      #FCEBEB;
+    --danger-border:  #F4C8C8;
+    --neutral:        #6B7280;
+    --neutral-bg:     #EEF0F3;
+    --neutral-border: #D8DCE2;
+
+    /* type */
+    --font:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --w-regular:   400;
+    --w-medium:    500;
+    --w-semibold:  600;
+    --w-bold:      700;
+
+    /* shape */
+    --r:      8px;
+    --r-xs:   2px;
+    --r-sm:   4px;
+    --r-lg:   12px;
+
+    /* density */
+    --row-h:   36px;
+    --input-h: 34px;
+    --pad:     10px;
+    --gap:     14px;
+
+    /* shadows */
+    --shadow-1: 0 1px 1px rgba(15, 22, 36, 0.04), 0 1px 2px rgba(15, 22, 36, 0.04);
+    --shadow-2: 0 1px 1px rgba(15, 22, 36, 0.04), 0 4px 12px rgba(15, 22, 36, 0.06);
+    --shadow-3: 0 6px 20px rgba(15, 22, 36, 0.10), 0 2px 6px rgba(15, 22, 36, 0.06);
+
+    /* ─── legacy aliases — point at the DS tokens above ────────────────── */
+
+    --font-family: var(--font);
     --primary-rgb: 35, 135, 202;
     --secondary-rgb: 140, 51, 140;
     --tertiary-rgb: 135, 202, 35;
@@ -21,37 +94,41 @@
     --select-input-height: inherit;
 
     --disabled-opacity: 0.6;
-    --curvature: 6px;
-    --curvature-widget: 6px;
-    --color-focus: #a4cafe;
-    --color-widget-bg: #fff;
-    --color-widget-bg-focused: #fff;
-    --color-widget-border: rgb(225, 225, 225);
-
-    --color-options-bg: var(--color-widget-bg);
+    --curvature: var(--r-sm);
+    --curvature-widget: var(--r-sm);
+    --focus: #5b9ce5;
+    --focus-muted: color-mix(in oklab, var(--focus) 60%, white);
+    --focus-halo: 0 0 0 3px
+      color-mix(in oklab, var(--focus) 30%, transparent);
+    --color-focus: var(--focus-muted);
+    --color-widget-bg: var(--surface);
+    --color-widget-bg-focused: var(--surface);
+    --color-widget-border: var(--border-strong);
+
+    --color-options-bg: var(--surface);
 
     /* primary colors, should be dark */
-    --color-selection: #f0f6ff;
-    --color-success: #3ca96a;
+    --color-selection: var(--accent-50);
+    --color-success: var(--success);
 
-    --widget-box-shadow: rgba(-1, -1, 0, .15) 0px 1px 7px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-    --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, .45);
+    --widget-box-shadow: none;
+    --widget-box-shadow-focused: var(--focus-halo);
     --widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
 
-    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    --shadow-widget: 0 3px 20px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
+    --shadow: var(--shadow-1);
+    --shadow-widget: var(--shadow-1);
 
     /* page text, borders, widgets */
-    --color-text: #333;;
-    --color-widget-text: #333;
-    --color-borders: rgba(0, 0, 0, 0.07);
-    --color-placeholder: rgb(167, 167, 167);
+    --color-text: var(--text-1);
+    --color-widget-text: var(--text-1);
+    --color-borders: var(--border);
+    --color-placeholder: var(--text-3);
 
     /* light colors, panel backgrounds, selection, etc */
-    --color-primary-light: #eee;
+    --color-primary-light: var(--sunken);
     --color-secondary-light: #ccc;
 
-    --color-label: #333;
+    --color-label: var(--text-1);
 
     /* dark colors, nav bar, buttons, etc */
     --color-primary-dark: rgb(var(--primary-rgb));
@@ -61,12 +138,11 @@
     --color-text-light: rgba(255, 255, 255, 1);
     --color-text-dark: rgba(0, 0, 0, 0.8);
     --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
-    --color-text-help: rgb(120, 120, 120);
+    --color-text-help: var(--text-3);
     --color-tertiary: rgb(var(--tertiary-rgb));
 
     --help-text-size: 0.85em;
     --help-text-margin-left: 0.3em;
-    --color-text-help: rgb(120, 120, 120);
 
     /* solid overlays with text */
     --color-overlay-dark: rgba(0, 0, 0, 0.2);
@@ -116,9 +192,10 @@
 
     --transition-speed: 250ms;
     --event-padding: 0.5em 1em;
-    --temba-select-selected-padding: 9px;
-    --temba-select-selected-line-height: 16px;
-    --temba-select-selected-font-size: 13px;
+    --temba-select-selected-padding: 0 var(--pad);
+    --temba-select-selected-line-height: 1.4;
+    --temba-select-selected-font-size: 13.5px;
+    --temba-select-min-height: var(--input-h);
 
     --font-size: 14px;
     --button-font-size: 1.125rem;
@@ -126,8 +203,9 @@
     --header-bg: var(--color-primary-dark);
     --header-text: var(--color-text-light);
 
-    --temba-textinput-padding: 9px 14px;
-    --temba-textinput-font-size: 14px;
+    --temba-textinput-padding: 7px var(--pad);
+    --temba-textinput-font-size: 13.5px;
+    --temba-textinput-min-height: var(--input-h);
 
     --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
     --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

package/web-test-runner.config.mjs

@@ -2,6 +2,100 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 process.env.PUPPETEER_DISABLE_HEADLESS_WARNING = '1';
 import { puppeteerLauncher } from '@web/test-runner-puppeteer';
+import { defaultReporter, summaryReporter } from '@web/test-runner';
+
+// Workaround for a wtr OOM under coverage on this branch. With our
+// volume of instrumented code, the merged istanbul-coverage payload
+// across all 121 test sessions overflows V8's max string length
+// (~512MB) when `getTestCoverage` deep-clones it via
+// `JSON.parse(JSON.stringify(coverages))`. That clone exists only to
+// insulate watch mode from istanbul's in-place mutation of the
+// originals — in non-watch coverage mode the clone is dead weight.
+// The throw is caught inside `onSessionFinished`'s try/catch, which
+// calls `runner.stop(error)` and silently exits 1 (the `console.error`
+// it logs is swallowed by wtr's BufferedLogger before the final
+// reportEnd flush ever runs).
+//
+// We can't import `getTestCoverage` directly (it's a transitive dep
+// not re-exported by `@web/test-runner`), so we shim JSON.parse: when
+// it's handed the sentinel produced by our JSON.stringify shim, it
+// returns the original `coverages` array instead of the stringified
+// copy. The shim is intentionally narrow:
+//
+//   - Gated on `WTR_COVERAGE_SHIM` (defaults on when --coverage is in
+//     argv; can be force-disabled by setting it to "0") so it never
+//     runs in plain `pnpm test`, only in the coverage path.
+//   - Sentinel is a runtime-random string, so a fixture/cached body
+//     containing the literal can't collide.
+//   - `__pendingCoverages` is cleared on every parse — matched OR not —
+//     so the ~512MB reference never lingers past one call pair, and
+//     mismatched call sequences never silently corrupt other parses.
+//   - The shape check `__looksLikeCoverageArray` only matches arrays
+//     whose first element is an object keyed by absolute file paths
+//     pointing at istanbul-shaped entries; it can't be triggered by
+//     ordinary JSON the orchestrator stringifies (HTTP responses, etc.)
+//
+// A wtr update that changes how getTestCoverage clones would make the
+// shim a no-op (`__looksLikeCoverageArray` returns false) — we'd then
+// regress to the original OOM rather than silently corrupt data, and
+// the next coverage run would surface it immediately. Long-term, the
+// right fix is patch-package on `@web/test-runner-core`'s
+// `getTestCoverage` to skip the clone in non-watch mode; this shim is
+// scoped to keep that scope-creep out of this PR.
+const __WTR_COVERAGE_SHIM_ON =
+  process.env.WTR_COVERAGE_SHIM !== '0' &&
+  (process.env.WTR_COVERAGE_SHIM === '1' ||
+    process.argv.some((a) => a === '--coverage' || a === '--watch-coverage'));
+
+if (__WTR_COVERAGE_SHIM_ON) {
+  const __origStringify = JSON.stringify;
+  const __origParse = JSON.parse;
+  // Random sentinel so the literal string in user content can't
+  // accidentally trigger the parse shim.
+  const __CLONE_SENTINEL =
+    '__WTR_COVERAGE_CLONE__' + Math.random().toString(36).slice(2);
+  let __pendingCoverages = null;
+
+  const __looksLikeCoverageArray = (value) => {
+    if (!Array.isArray(value) || value.length === 0) return false;
+    const first = value[0];
+    if (!first || typeof first !== 'object' || Array.isArray(first)) {
+      return false;
+    }
+    const keys = Object.keys(first);
+    if (keys.length === 0) return false;
+    if (!keys.every((k) => k.startsWith('/') || /^[a-zA-Z]:[\\/]/.test(k))) {
+      return false;
+    }
+    const entry = first[keys[0]];
+    return (
+      entry &&
+      typeof entry === 'object' &&
+      (entry.statementMap || entry.fnMap || entry.b || entry.s)
+    );
+  };
+
+  JSON.stringify = function (value, ...rest) {
+    if (__looksLikeCoverageArray(value)) {
+      // A second matched stringify before a matched parse would
+      // otherwise silently drop the first payload — clear first.
+      __pendingCoverages = value;
+      return __CLONE_SENTINEL;
+    }
+    return __origStringify(value, ...rest);
+  };
+  JSON.parse = function (text, ...rest) {
+    // Always clear pending on parse (matched or not). Keeps the ~512MB
+    // reference from outliving a single call pair even if the matched
+    // parse never arrives (e.g. wtr throws between the two calls).
+    const pending = __pendingCoverages;
+    __pendingCoverages = null;
+    if (text === __CLONE_SENTINEL && pending) {
+      return pending;
+    }
+    return __origParse(text, ...rest);
+  };
+}
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import fs from 'fs';
 import * as path from 'path';
@@ -346,6 +440,10 @@ export default {
   coverageConfig: {
     include: ['src/**']
   },
+  reporters: [
+    defaultReporter({ reportTestResults: true, reportTestProgress: true }),
+    summaryReporter({ flatten: true })
+  ],
   testFramework: {
     config: {
       timeout: '10000'