@nyaruka/temba-components 0.156.18 → 0.157.0

package/src/flow/nodes/shared.ts

@@ -69,6 +69,14 @@ const advancedSection = {
     !!(formData.localizeRules || formData.localizeCategories)
 };
 
+const categoriesLocalizationSection = {
+  label: 'Localization',
+  localizable: false,
+  items: ['localizeCategories'],
+  collapsed: true,
+  getValueCount: (formData: FormData) => !!formData.localizeCategories
+};
+
 export const nodeOptionsAccordion: AccordionLayoutConfig = {
   type: 'accordion',
   multi: true,
@@ -81,6 +89,12 @@ export const nodeOptionsAccordionSimple: AccordionLayoutConfig = {
   sections: [resultNameSection]
 };
 
+export const nodeOptionsAccordionCategoriesOnly: AccordionLayoutConfig = {
+  type: 'accordion',
+  multi: true,
+  sections: [resultNameSection, categoriesLocalizationSection]
+};
+
 /**
  * Shared category localization functions for router nodes.
  * These provide a consistent way to localize category names across all router types.

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,16 +1,25 @@
-import { FormData, NodeConfig, ACTION_GROUPS, Features } from '../types';
+import {
+  FormData,
+  NodeConfig,
+  ACTION_GROUPS,
+  FlowTypes
+} from '../types';
 import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
 import { validateWith } from '../utils';
 import { LLMModel, hasLLMRole } from '../flow-utils';
+import {
+  resultNameField,
+  localizeCategoriesField,
+  nodeOptionsAccordionCategoriesOnly
+} from './shared';
 
 export const split_by_llm_categorize: NodeConfig = {
   type: 'split_by_llm_categorize',
   name: 'Split by AI',
   group: ACTION_GROUPS.services,
-  flowTypes: [],
-  features: [Features.AI],
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   form: {
     llm: {
       type: 'select',
@@ -49,9 +58,11 @@ export const split_by_llm_categorize: NodeConfig = {
           required: true
         }
       }
-    }
+    },
+    result_name: resultNameField,
+    localizeCategories: localizeCategoriesField
   },
-  layout: ['llm', 'input', 'categories'],
+  layout: ['llm', 'input', 'categories', nodeOptionsAccordionCategoriesOnly],
   validate: validateWith((formData, errors) => {
     if (!formData.categories || !Array.isArray(formData.categories)) return;
 
@@ -91,7 +102,7 @@ export const split_by_llm_categorize: NodeConfig = {
       <div class="body">Categorize with ${callLlmAction.llm.name}</div>
     `;
   },
-  toFormData: (node: Node) => {
+  toFormData: (node: Node, nodeUI?: any) => {
     // Extract data from the existing node structure
     const callLlmAction = node.actions?.find(
       (action) => action.type === 'call_llm'
@@ -105,9 +116,18 @@ export const split_by_llm_categorize: NodeConfig = {
       uuid: node.uuid,
       llm: callLlmAction?.llm ? [callLlmAction.llm] : [],
       input: callLlmAction?.input || '@input',
-      categories: categories
+      categories: categories,
+      result_name: node.router?.result_name || '',
+      localizeCategories: nodeUI?.config?.localizeCategories || false
     };
   },
+  toUIConfig: (formData: FormData) => {
+    const config: Record<string, any> = {};
+    config.localizeCategories = formData.result_name
+      ? !!formData.localizeCategories
+      : false;
+    return config;
+  },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get LLM selection
     const llmSelection =
@@ -158,11 +178,16 @@ export const split_by_llm_categorize: NodeConfig = {
       existingCases
     );
 
+    const finalRouter: any = { ...router };
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      finalRouter.result_name = formData.result_name.trim();
+    }
+
     // Return the complete node
     return {
       uuid: originalNode.uuid,
       actions: [callLlmAction],
-      router: router,
+      router: finalRouter,
       exits: exits
     };
   },

package/src/flow/utils.ts

@@ -1,4 +1,5 @@
 import { html, TemplateResult } from 'lit-html';
+import { iconToPillType } from '../styles/pillVariants';
 import { Action, NamedObject, FlowPosition } from '../store/flow-definition';
 import { FlowIssue, zustand } from '../store/AppState';
 import { CustomEventType } from '../interfaces';
@@ -256,6 +257,15 @@ export const renderClamped = (
   </div>`;
 };
 
+/**
+ * Inline margin for stacked pills — the previous implementation used
+ * `class="mr-1 mb-1"` (Tailwind utility classes), but this package
+ * doesn't ship Tailwind, so the classes resolved to no-ops in any host
+ * page that didn't already include it. Inline style is predictable
+ * across hosts.
+ */
+const PILL_MARGIN_STYLE = 'margin: 0 4px 4px 0;';
+
 /**
  * Renders a single line item with optional icon.
  * Content can be plain text or a TemplateResult (e.g. highlighted text).
@@ -265,17 +275,14 @@ export const renderLineItem = (
   icon?: string,
   content?: TemplateResult
 ) => {
-  return html`<div style="display:flex;align-items:center;">
-    ${icon
-      ? html`<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
-      : null}
-    <div
-      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;"
-      title="${name}"
-    >
-      ${content || name}
-    </div>
-  </div>`;
+  const pillType = iconToPillType(icon);
+  return html`<temba-label
+    icon=${icon || ''}
+    type=${pillType || 'neutral'}
+    style=${PILL_MARGIN_STYLE}
+    title="${name}"
+    >${content || name}</temba-label
+  >`;
 };
 
 /**
@@ -319,12 +326,9 @@ export const renderStringList = (
   if (items.length > maxDisplay && items.length !== 4) {
     const remainingCount = items.length - maxDisplay;
     itemElements.push(
-      html`<div style="display:flex;align-items:center;margin-top:0.2em;">
-        ${icon
-          ? html`<div style="margin-right:0.4em; width: 1em;"></div>` // spacing placeholder
-          : null}
-        <div style="font-size:0.8em">+${remainingCount} more</div>
-      </div>`
+      html`<temba-label type="neutral" style=${PILL_MARGIN_STYLE}
+        >+${remainingCount} more</temba-label
+      >`
     );
   }
   return itemElements;
@@ -368,17 +372,16 @@ export const renderMixedList = (items: MixedListItem[]) => {
   if (items.length > maxDisplay && items.length !== 4) {
     const remainingCount = items.length - maxDisplay;
     itemElements.push(
-      html`<div style="display:flex;align-items:center;margin-top:0.2em;">
-        <div style="margin-right:0.4em; width: 1em;"></div>
-        <div style="font-size:0.8em">+${remainingCount} more</div>
-      </div>`
+      html`<temba-label type="neutral" style=${PILL_MARGIN_STYLE}
+        >+${remainingCount} more</temba-label
+      >`
     );
   }
   return itemElements;
 };
 
 /**
- * Renders a named object as a clickable link that fires a custom event
+ * Renders a named object as a clickable DS pill that fires a custom event
  */
 const renderLinkedObject = (
   obj: NamedObject,
@@ -400,18 +403,16 @@ const renderLinkedObject = (
     }
   };
 
-  return html`<div style="display:flex;align-items:center;max-width:100%;">
-    ${icon
-      ? html`<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
-      : null}
-    <div
-      class="linked-name"
-      @click=${handleClick}
-      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; text-decoration: underline; cursor: pointer;"
-    >
-      ${obj.name}
-    </div>
-  </div>`;
+  const pillType = iconToPillType(icon);
+  return html`<temba-label
+    icon=${icon || ''}
+    type=${pillType || 'neutral'}
+    clickable
+    style=${PILL_MARGIN_STYLE}
+    title="${obj.name}"
+    @click=${handleClick}
+    >${obj.name}</temba-label
+  >`;
 };
 
 /**
@@ -436,12 +437,9 @@ const renderLinkedObjects = (
   if (objects.length > maxDisplay && objects.length !== 4) {
     const remainingCount = objects.length - maxDisplay;
     itemElements.push(
-      html`<div style="display:flex;align-items:center;margin-top:0.2em;">
-        ${icon
-          ? html`<div style="margin-right:0.4em; width: 1em;"></div>`
-          : null}
-        <div style="font-size:0.8em">+${remainingCount} more</div>
-      </div>`
+      html`<temba-label type="neutral" style=${PILL_MARGIN_STYLE}
+        >+${remainingCount} more</temba-label
+      >`
     );
   }
   return itemElements;

package/src/form/ArrayEditor.ts

@@ -604,12 +604,11 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
             class="remove-btn"
             style="
               padding: 4px;
-              border: 1px solid #ccc;
-              border-radius: 4px;
-              background: white;
+              border: 1px solid var(--color-widget-border);
+              border-radius: var(--curvature-widget);
+              background: var(--surface);
               cursor: pointer;
-              background: #fefefe;
-              color: #999;
+              color: var(--text-3);
               font-size: 14px;
             "
             ?disabled=${!canRemove}
@@ -651,21 +650,20 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
       .add-btn,
       .remove-btn {
         padding: 4px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        background: white;
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
+        background: var(--surface);
         cursor: pointer;
         font-size: 14px;
       }
 
       .add-btn:hover,
       .remove-btn:hover {
-        background: #f8f8f8;
+        background: var(--sunken);
       }
 
       .remove-btn {
-        background: #fefefe;
-        color: #999;
+        color: var(--text-3);
       }
 
       .removable .remove-btn {

package/src/form/Checkbox.ts

@@ -25,7 +25,7 @@ export class Checkbox extends FieldElement {
         width: 12px;
         height: 12px;
         background: var(--checkbox-background, rgba(255, 255, 255, 0.8));
-        border-radius: 2px;
+        border-radius: var(--r-xs);
       }
 
       .wrapper.label {
@@ -34,7 +34,7 @@ export class Checkbox extends FieldElement {
       }
 
       .wrapper.label:hover {
-        background: var(--checkbox-hover-bg, #f9f9f9);
+        background: var(--checkbox-hover-bg, var(--sunken));
       }
 
       .checkbox-container {

package/src/form/Compose.ts

@@ -104,7 +104,7 @@ export class Compose extends FieldElement {
         --curvature-widget: 0px;
         --color-options-bg: #fff;
         border: 1px solid var(--color-widget-border);
-        border-radius: 6px;
+        border-radius: var(--curvature-widget);
         background: var(--color-widget-bg, #fff);
         box-shadow: var(--options-shadow);
         z-index: 1000003;

package/src/form/FieldElement.ts

@@ -2,6 +2,7 @@ import { TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { renderMarkdownInline } from '../markdown';
+import { designTokens } from '../styles/designTokens';
 
 /**
  * FieldElement is a base class for form components that provides built-in
@@ -62,26 +63,25 @@ export abstract class FieldElement extends RapidElement {
 
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         font-family: var(--font-family);
       }
 
       label {
-        margin-bottom: 5px;
-        margin-left: 4px;
+        margin-bottom: 6px;
         display: block;
-        font-weight: 400;
-        font-size: var(--label-size);
-        letter-spacing: 0.05em;
+        font-weight: var(--w-medium);
+        font-size: 12.5px;
         line-height: normal;
-        color: var(--color-label, #777);
+        color: var(--color-label);
       }
 
       .help-text {
-        font-size: var(--help-text-size);
+        font-size: 12px;
         line-height: normal;
         color: var(--color-text-help);
-        margin-left: var(--help-text-margin-left);
         margin-top: 6px;
         opacity: 1;
       }

package/src/form/KeyValueEditor.ts

@@ -282,10 +282,10 @@ export class KeyValueEditor extends BaseListEditor<KeyValueItem> {
       .remove-btn {
         width: 32px;
         height: 32px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        background: #f8f8f8;
-        color: #666;
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
+        background: var(--sunken);
+        color: var(--text-2);
         cursor: pointer;
         display: flex;
         align-items: center;

package/src/form/MessageEditor.ts

@@ -23,7 +23,7 @@ export class MessageEditor extends FieldElement {
       .message-editor-container {
         border: 1px solid var(--color-widget-border);
         border-radius: var(--curvature-widget);
-        background: #fff;
+        background: var(--surface);
         position: relative;
         transition:
           border-color 0.2s ease-in-out,
@@ -75,10 +75,9 @@ export class MessageEditor extends FieldElement {
 
       .media-wrapper {
         padding: 4px 8px;
-        background: rgba(0, 0, 0, 0.03);
+        background: var(--sunken);
         border-top: 1px solid var(--color-widget-border);
         border-radius: 0 0 var(--curvature-widget) var(--curvature-widget);
-        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
         margin-top: 3px;
         display: none;
       }

package/src/form/RangePicker.ts

@@ -16,21 +16,21 @@ export class RangePicker extends RapidElement {
       cursor: pointer;
       padding: 0.2em 0.5em;
       margin: 0.6em 0;
-      border-radius: 4px;
+      border-radius: var(--curvature-widget);
       border: 1px solid transparent;
       transition: border 0.2s;
     }
 
     .date-display:hover {
-      border: 1px solid var(--color-widget-border, #bbb);
-      background: var(--color-widget-hover, #f5f5f5);
+      border: 1px solid var(--color-widget-border);
+      background: var(--sunken);
     }
 
     input[type='date'] {
       font-size: 1em;
       padding: 0.2em 0.5em;
-      border-radius: 4px;
-      border: 1px solid #bbb;
+      border-radius: var(--curvature-widget);
+      border: 1px solid var(--color-widget-border);
     }
 
     .navigation-container {
@@ -40,10 +40,10 @@ export class RangePicker extends RapidElement {
     }
 
     .nav-arrow {
-      background: #f5f5f5;
-      border: 1px solid #bbb;
+      background: var(--sunken);
+      border: 1px solid var(--color-widget-border);
 
-      border-radius: var(--curvature);
+      border-radius: var(--curvature-widget);
       padding: 0em 0em;
       cursor: pointer;
       font-size: 0.6em;
@@ -59,14 +59,14 @@ export class RangePicker extends RapidElement {
     }
 
     .nav-arrow:hover:not(:disabled) {
-      background: #e0eaff;
-      border-color: #3399ff;
+      background: var(--accent-50);
+      border-color: var(--accent);
     }
 
     .nav-arrow:disabled {
       opacity: 0.5;
       cursor: not-allowed;
-      background: #f9f9f9;
+      background: var(--sunken);
     }
 
     .nav-arrow.hidden {
@@ -78,8 +78,8 @@ export class RangePicker extends RapidElement {
       margin-left: 0em;
     }
     .range-btn {
-      background: #f5f5f5;
-      border: 1px solid #bbb;
+      background: var(--sunken);
+      border: 1px solid var(--color-widget-border);
       border-radius: 0px;
       margin-left: -1px;
       padding: 0.2em 0.8em;
@@ -91,17 +91,17 @@ export class RangePicker extends RapidElement {
     }
 
     .button-group .range-btn:first-child {
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--curvature-widget) 0 0 var(--curvature-widget);
     }
 
     .button-group .range-btn:last-child {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 var(--curvature-widget) var(--curvature-widget) 0;
     }
 
     .range-btn.selected,
     .range-btn:active {
-      background: #e0eaff;
-      border-color: #3399ff;
+      background: var(--accent-50);
+      border-color: var(--accent);
     }
   `;
 

package/src/form/TembaSlider.ts

@@ -13,9 +13,9 @@ export class TembaSlider extends FieldElement {
 
       .track {
         height: 2px;
-        border-top: 0.5em solid #fff;
-        border-bottom: 0.5em solid #fff;
-        background: #ddd;
+        border-top: 0.5em solid var(--surface);
+        border-bottom: 0.5em solid var(--surface);
+        background: var(--border-strong);
         flex-grow: 1;
       }
 
@@ -24,11 +24,11 @@ export class TembaSlider extends FieldElement {
         margin-left: -0.5em;
         width: 0.75em;
         height: 0.75em;
-        border: 2px solid #999;
+        border: 2px solid var(--border-strong);
         border-radius: 999px;
         position: relative;
-        background: #fff;
-        box-shadow: 0 0 0 4px rgb(255, 255, 255);
+        background: var(--surface);
+        box-shadow: 0 0 0 4px var(--surface);
         transition: transform 200ms ease-in-out;
       }
 
@@ -37,13 +37,13 @@ export class TembaSlider extends FieldElement {
       }
 
       :hover .circle {
-        border-color: #777;
+        border-color: var(--text-2);
         cursor: pointer;
       }
 
       .grabbed .circle {
-        border-color: var(--color-primary-dark);
-        background: #fff;
+        border-color: var(--accent);
+        background: var(--surface);
       }
 
       .grabbed .circle {
@@ -58,7 +58,7 @@ export class TembaSlider extends FieldElement {
       .pre,
       .post {
         font-size: 0.9em;
-        color: #999;
+        color: var(--text-3);
         padding: 0em 1em;
       }
     `;

package/src/form/TemplateEditor.ts

@@ -99,9 +99,9 @@ export class TemplateEditor extends FieldElement {
       }
 
       .button {
-        background: #fff;
+        background: var(--surface);
         padding: 0.3em 1em;
-        border: 1px solid #e6e6e6;
+        border: 1px solid var(--color-widget-border);
         border-radius: var(--curvature);
         min-height: 23px;
         display: flex;
@@ -118,7 +118,7 @@ export class TemplateEditor extends FieldElement {
 
       .button .display {
         margin-right: 0.5em;
-        background: #f9f9f9;
+        background: var(--sunken);
         padding: 0.25em 1em;
         border-radius: var(--curvature);
       }
@@ -130,7 +130,7 @@ export class TemplateEditor extends FieldElement {
       }
 
       .template {
-        background: #fff;
+        background: var(--surface);
         border-radius: var(--curvature);
         border: 1px solid var(--color-widget-border);
         padding: 1em;

package/src/form/TextInput.ts

@@ -26,13 +26,32 @@ export class TextInput extends FieldElement {
         display: flex;
         flex-direction: row;
         align-items: stretch;
+        min-height: var(--temba-textinput-min-height, var(--input-h));
         box-shadow: var(--widget-box-shadow);
         caret-color: var(--input-caret);
+        /* Establish a stable containing block for slotted absolutely-
+           positioned children (e.g. ContactFieldEditor's embedded
+           prefix label). Setting position: relative only on
+           :focus-within would re-anchor the prefix when focused,
+           visually shifting the label. */
+        position: relative;
+      }
+
+      .input-container.textarea,
+      .input-container:has(textarea) {
+        min-height: 0;
       }
 
       .xsmall {
         --temba-textinput-padding: 6px 8px;
         --temba-textinput-font-size: 13px;
+        /* Opt out of the 34px --input-h floor so an xsmall textinput
+           lines up with RichEditor xsmall (the "evaluated" argument
+           input in rule editor rows) and with Select xsmall, neither
+           of which carry the floor. Without this, a [operator select
+           | rich-edit argument | textinput category] row renders the
+           category ~4px taller than its neighbors. */
+        --temba-textinput-min-height: 0;
       }
 
       .small {
@@ -66,7 +85,6 @@ export class TextInput extends FieldElement {
         border-color: var(--color-focus);
         background: var(--color-widget-bg-focused);
         box-shadow: var(--widget-box-shadow-focused);
-        position: relative;
       }
 
       .input-container:hover {

package/src/form/select/Omnibox.ts

@@ -105,28 +105,31 @@ export class Omnibox extends Select<OmniOption> {
     return null;
   }
 
-  /** Selection in the multi-select select box */
+  /**
+   * Chip rendering — icon + name, plus the group count when the option
+   * is a Group. Counts are intentionally suppressed in the base Select
+   * chip (noise for action editors like Add to Group), but Omnibox is
+   * the start-flow recipients picker where group size is a key part
+   * of the chip's identity. Contacts skip the post-name URN that the
+   * dropdown shows — chips already have a tight footprint.
+   */
   public renderSelectedItemDefault(option: OmniOption): TemplateResult {
-    return html`
-      <div
-        style="flex:1 1 auto; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;"
+    const base = super.renderOptionDefault(option);
+    if (
+      option.type === OmniType.Group &&
+      option.count !== undefined &&
+      option.count !== null
+    ) {
+      return html`<div
+        style="display:flex; align-items:center; gap:6px;"
       >
-        <div style="align-self: center; padding: 0px 7px; color: #bbb">
-          ${this.getIcon(option)}
-        </div>
-        <div
-          class="name"
-          style="align-self: center; padding: 0px; font-size: 12px;"
+        ${base}<span
+          style="opacity:0.7; font-size:11px; font-variant-numeric: tabular-nums; font-weight: var(--w-medium);"
+          >${option.count.toLocaleString()}</span
         >
-          ${option.name}
-        </div>
-        <div
-          style="background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center"
-        >
-          ${this.getPostName(option)}
-        </div>
-      </div>
-    `;
+      </div>`;
+    }
+    return base;
   }
 
   private getIcon(option: OmniOption): TemplateResult {