@handled-ai/design-system 0.18.10 → 0.18.12

package/src/components/data-table-condition-filter.tsx

@@ -2,14 +2,11 @@
 
 import * as React from "react"
 import {
-  CalendarDays,
-  DollarSign,
+  Check,
   Eye,
-  Hash,
   MoreHorizontal,
   Plus,
   Trash2,
-  Type,
 } from "lucide-react"
 
 import { cn } from "../lib/utils"
@@ -36,15 +33,26 @@ export type ConditionOperator =
   | "is_null"
   | "is_not_null"
 
+export interface ConditionOptionObject {
+  label: string
+  value: string
+}
+
+export type ConditionFieldOption = string | ConditionOptionObject
+
 export interface ConditionFieldDef {
   /** Unique field key (e.g., "Account_Balance__c") */
   id: string
   /** Display label (e.g., "Account Balance") */
   label: string
   /** Field data type — determines which operators are available and how the value input renders */
-  type: "text" | "number" | "currency" | "date"
+  type: "text" | "number" | "currency" | "date" | "select" | "multi_select"
   /** Allowed operators for this field. Defaults based on type if not provided. */
   operators?: ConditionOperator[]
+  /** Options used by select and multi-select fields. Strings use the same label and value. */
+  options?: ConditionFieldOption[]
+  /** Show a search box for option-backed value inputs. */
+  searchable?: boolean | { threshold?: number }
 }
 
 export interface ConditionFilterValue {
@@ -52,7 +60,7 @@ export interface ConditionFilterValue {
   id: string
   field: string
   operator: ConditionOperator
-  value: string | number | null
+  value: string | number | string[] | null
 }
 
 interface DataTableConditionFilterProps {
@@ -74,7 +82,7 @@ const OPERATOR_LABELS: Record<ConditionOperator, string> = {
   gte: "≥",
   lt: "<",
   lte: "≤",
-  in: "contains",
+  in: "is any of",
   is_null: "is empty",
   is_not_null: "is not empty",
 }
@@ -90,11 +98,29 @@ const NUMERIC_OPERATORS: ConditionOperator[] = [
   "is_not_null",
 ]
 
+const NAV_KEYS = new Set(["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"])
+
+export function shouldShowOptionSearch(
+  searchable: ConditionFieldDef["searchable"],
+  optionCount: number,
+  defaultThreshold = 8,
+): boolean {
+  if (searchable === true) return true
+  if (searchable === false) return false
+  const threshold =
+    typeof searchable === "object"
+      ? (searchable.threshold ?? defaultThreshold)
+      : defaultThreshold
+  return optionCount > threshold
+}
+
 const DEFAULT_OPERATORS: Record<ConditionFieldDef["type"], ConditionOperator[]> = {
   text: ["eq", "neq", "is_null", "is_not_null"],
   number: NUMERIC_OPERATORS,
   currency: NUMERIC_OPERATORS,
   date: ["gt", "gte", "lt", "lte", "eq", "neq", "is_null", "is_not_null"],
+  select: ["eq", "neq", "is_null", "is_not_null"],
+  multi_select: ["in", "is_null", "is_not_null"],
 }
 
 /** Generate a stable unique ID for a new condition row. */
@@ -108,7 +134,7 @@ function generateConditionId(): string {
 // ── Helpers ────────────────────────────────────────────────────
 
 function getOperators(field: ConditionFieldDef): ConditionOperator[] {
-  return (field.operators ?? DEFAULT_OPERATORS[field.type]).filter((op) => op !== "in")
+  return field.operators ?? DEFAULT_OPERATORS[field.type]
 }
 
 function isUnaryOperator(op: ConditionOperator): boolean {
@@ -128,6 +154,18 @@ function createDraftCondition(field: ConditionFieldDef): ConditionFilterValue {
   }
 }
 
+function normalizeConditionValue(
+  value: ConditionFilterValue["value"],
+  field: ConditionFieldDef,
+  operator: ConditionOperator,
+): ConditionFilterValue["value"] {
+  if (isUnaryOperator(operator)) return null
+  if (field.type === "multi_select") {
+    return Array.isArray(value) ? value : null
+  }
+  return Array.isArray(value) ? null : value
+}
+
 function normalizeCondition(
   condition: ConditionFilterValue,
   fields: ConditionFieldDef[],
@@ -144,7 +182,7 @@ function normalizeCondition(
     ...condition,
     field: field.id,
     operator,
-    value: isUnaryOperator(operator) ? null : condition.value,
+    value: normalizeConditionValue(condition.value, field, operator),
   }
 }
 
@@ -168,18 +206,40 @@ function isCompleteCondition(
   if (!field) return false
   if (!getOperators(field).includes(condition.operator)) return false
   if (isUnaryOperator(condition.operator)) return true
-  return condition.value !== null && condition.value !== ""
+  if (field.type === "multi_select") {
+    return Array.isArray(condition.value) && condition.value.length > 0
+  }
+  return condition.value !== null && condition.value !== "" && !Array.isArray(condition.value)
+}
+
+function getConditionValueSignature(value: ConditionFilterValue["value"]): string {
+  return Array.isArray(value) ? JSON.stringify(value) : String(value)
 }
 
 function getConditionsSignature(conditions: ConditionFilterValue[]): string {
   return conditions
-    .map((condition) => `${condition.id}:${condition.field}:${condition.operator}:${String(condition.value)}`)
+    .map((condition) => `${condition.id}:${condition.field}:${condition.operator}:${getConditionValueSignature(condition.value)}`)
     .join(";")
 }
 
+function normalizeFieldOptions(field: ConditionFieldDef): ConditionOptionObject[] {
+  return (field.options ?? []).map((option) =>
+    typeof option === "string" ? { label: option, value: option } : option,
+  )
+}
+
 function getFieldsSignature(fields: ConditionFieldDef[]): string {
   return fields
-    .map((field) => `${field.id}:${field.type}:${field.label}:${(field.operators ?? []).join("|")}`)
+    .map((field) => {
+      const optionsSignature = normalizeFieldOptions(field)
+        .map((option) => `${option.label}:${option.value}`)
+        .join("|")
+      const searchSignature =
+        typeof field.searchable === "object"
+          ? `threshold:${field.searchable.threshold ?? ""}`
+          : String(field.searchable ?? "")
+      return `${field.id}:${field.type}:${field.label}:${(field.operators ?? []).join("|")}:${optionsSignature}:${searchSignature}`
+    })
     .join(";")
 }
 
@@ -192,14 +252,180 @@ function getCommittedConditions(
     .filter((condition) => isCompleteCondition(condition, fields))
 }
 
-function getFieldIcon(type: ConditionFieldDef["type"]) {
-  if (type === "currency") return DollarSign
-  if (type === "number") return Hash
-  if (type === "date") return CalendarDays
-  return Type
+// ── Condition Row ──────────────────────────────────────────────
+
+function getInputType(fieldType: ConditionFieldDef["type"]): "text" | "number" | "date" {
+  if (fieldType === "number" || fieldType === "currency") return "number"
+  if (fieldType === "date") return "date"
+  return "text"
+}
+
+function getInputPlaceholder(fieldType: ConditionFieldDef["type"]): string {
+  if (fieldType === "currency") return "Amount"
+  if (fieldType === "number") return "Enter number..."
+  if (fieldType === "date") return ""
+  return "Enter value..."
 }
 
-// ── Condition Row ──────────────────────────────────────────────
+interface ConditionValueInputProps {
+  condition: ConditionFilterValue
+  fieldDef: ConditionFieldDef
+  onValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onSelectValueChange: (value: string) => void
+  onMultiSelectValueToggle: (value: string) => void
+  onCommit: () => void
+}
+
+function SelectConditionValueInput({
+  condition,
+  fieldDef,
+  onSelectValueChange,
+}: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onSelectValueChange">) {
+  const [query, setQuery] = React.useState("")
+  const options = normalizeFieldOptions(fieldDef)
+  const showSearch = shouldShowOptionSearch(fieldDef.searchable, options.length)
+  const normalizedQuery = showSearch ? query.trim().toLowerCase() : ""
+  const filteredOptions = normalizedQuery
+    ? options.filter((option) => option.label.toLowerCase().includes(normalizedQuery))
+    : options
+
+  React.useEffect(() => {
+    setQuery("")
+  }, [fieldDef.id])
+
+  return (
+    <Select
+      value={typeof condition.value === "string" ? condition.value : ""}
+      onValueChange={onSelectValueChange}
+    >
+      <SelectTrigger className="h-8 w-full" size="sm">
+        <SelectValue placeholder="Select value..." />
+      </SelectTrigger>
+      <SelectContent>
+        {showSearch ? (
+          <div className="sticky top-0 z-10 border-b border-border bg-popover p-1.5">
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={(event) => {
+                if (!NAV_KEYS.has(event.key)) {
+                  event.stopPropagation()
+                }
+              }}
+              placeholder="Search options..."
+              className="h-7 text-xs"
+            />
+          </div>
+        ) : null}
+        {filteredOptions.length > 0 ? (
+          filteredOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))
+        ) : (
+          <div className="px-2 py-1.5 text-xs text-muted-foreground">No options</div>
+        )}
+      </SelectContent>
+    </Select>
+  )
+}
+
+function MultiSelectConditionValueInput({
+  condition,
+  fieldDef,
+  onMultiSelectValueToggle,
+}: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onMultiSelectValueToggle">) {
+  const selectedValues = Array.isArray(condition.value) ? condition.value : []
+  const options = normalizeFieldOptions(fieldDef)
+
+  return (
+    <div className="max-h-28 overflow-y-auto rounded-md border border-border bg-background p-1">
+      {options.length > 0 ? (
+        options.map((option) => {
+          const checked = selectedValues.includes(option.value)
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role="checkbox"
+              aria-checked={checked}
+              className={cn(
+                "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left text-xs hover:bg-muted",
+                checked && "text-brand-purple",
+              )}
+              onClick={(event) => {
+                event.stopPropagation()
+                onMultiSelectValueToggle(option.value)
+              }}
+            >
+              <span
+                className={cn(
+                  "flex h-3.5 w-3.5 items-center justify-center rounded-sm border border-border",
+                  checked && "border-brand-purple bg-brand-purple text-white",
+                )}
+                aria-hidden="true"
+              >
+                {checked ? <Check className="h-3 w-3" /> : null}
+              </span>
+              <span className="min-w-0 flex-1 truncate">{option.label}</span>
+            </button>
+          )
+        })
+      ) : (
+        <div className="px-2 py-1 text-xs text-muted-foreground">No options</div>
+      )}
+    </div>
+  )
+}
+
+function ScalarConditionValueInput({
+  condition,
+  fieldDef,
+  onValueChange,
+  onCommit,
+}: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onValueChange" | "onCommit">) {
+  return (
+    <div className="relative flex items-center">
+      {fieldDef.type === "currency" ? (
+        <span className="pointer-events-none absolute left-2 text-sm text-muted-foreground">
+          $
+        </span>
+      ) : null}
+      <Input
+        type={getInputType(fieldDef.type)}
+        value={
+          condition.value != null && !Array.isArray(condition.value)
+            ? String(condition.value)
+            : ""
+        }
+        onChange={onValueChange}
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          event.stopPropagation()
+          if (event.key === "Enter") {
+            onCommit()
+          }
+        }}
+        placeholder={getInputPlaceholder(fieldDef.type)}
+        className={cn("h-8", fieldDef.type === "currency" && "pl-6")}
+      />
+    </div>
+  )
+}
+
+function ConditionValueInput(props: ConditionValueInputProps) {
+  if (props.fieldDef.type === "select") {
+    return <SelectConditionValueInput {...props} />
+  }
+
+  if (props.fieldDef.type === "multi_select") {
+    return <MultiSelectConditionValueInput {...props} />
+  }
+
+  return <ScalarConditionValueInput {...props} />
+}
 
 interface ConditionRowProps {
   condition: ConditionFilterValue
@@ -221,8 +447,6 @@ function ConditionRow({
   const fieldDef = fields.find((f) => f.id === condition.field) ?? fields[0]
   const operators = getOperators(fieldDef)
   const isUnary = isUnaryOperator(condition.operator)
-  const FieldIcon = getFieldIcon(fieldDef.type)
-
   const handleFieldChange = (newFieldId: string) => {
     const newFieldDef = fields.find((f) => f.id === newFieldId) ?? fields[0]
     if (!newFieldDef) return
@@ -238,7 +462,7 @@ function ConditionRow({
     onChange({
       ...condition,
       operator: newOp,
-      value: isUnaryOperator(newOp) ? null : condition.value,
+      value: normalizeConditionValue(condition.value, fieldDef, newOp),
     })
   }
 
@@ -249,6 +473,26 @@ function ConditionRow({
     })
   }
 
+  const handleSelectValueChange = (value: string) => {
+    onChange({
+      ...condition,
+      value,
+    })
+  }
+
+  const handleMultiSelectValueToggle = (value: string) => {
+    const currentValues = Array.isArray(condition.value) ? condition.value : []
+    const nextValues = currentValues.includes(value)
+      ? currentValues.filter((currentValue) => currentValue !== value)
+      : [...currentValues, value]
+
+    onChange({
+      ...condition,
+      value: nextValues,
+    })
+  }
+
+
   return (
     <div
       className="grid grid-cols-[52px_minmax(150px,1fr)_120px_minmax(140px,1fr)_auto] items-center gap-2 rounded-lg border border-border/70 bg-background p-2 shadow-sm"
@@ -260,21 +504,14 @@ function ConditionRow({
 
       <Select value={condition.field} onValueChange={handleFieldChange}>
         <SelectTrigger className="h-8 w-full justify-start gap-2" size="sm">
-          <FieldIcon className="h-3.5 w-3.5 text-muted-foreground" />
           <SelectValue placeholder={fieldDef.label} />
         </SelectTrigger>
         <SelectContent>
-          {fields.map((field) => {
-            const Icon = getFieldIcon(field.type)
-            return (
-              <SelectItem key={field.id} value={field.id}>
-                <span className="inline-flex items-center gap-2">
-                  <Icon className="h-3.5 w-3.5 text-muted-foreground" />
-                  {field.label}
-                </span>
-              </SelectItem>
-            )
-          })}
+          {fields.map((field) => (
+            <SelectItem key={field.id} value={field.id}>
+              {field.label}
+            </SelectItem>
+          ))}
         </SelectContent>
       </Select>
 
@@ -299,41 +536,14 @@ function ConditionRow({
           No value needed
         </div>
       ) : (
-        <div className="relative flex items-center">
-          {fieldDef.type === "currency" ? (
-            <span className="pointer-events-none absolute left-2 text-sm text-muted-foreground">
-              $
-            </span>
-          ) : null}
-          <Input
-            type={
-              fieldDef.type === "number" || fieldDef.type === "currency"
-                ? "number"
-                : fieldDef.type === "date"
-                  ? "date"
-                  : "text"
-            }
-            value={condition.value != null ? String(condition.value) : ""}
-            onChange={handleValueChange}
-            onClick={(event) => event.stopPropagation()}
-            onKeyDown={(event) => {
-              event.stopPropagation()
-              if (event.key === "Enter") {
-                onCommit()
-              }
-            }}
-            placeholder={
-              fieldDef.type === "currency"
-                ? "Amount"
-                : fieldDef.type === "number"
-                  ? "Enter number..."
-                  : fieldDef.type === "date"
-                    ? ""
-                    : "Enter value..."
-            }
-            className={cn("h-8", fieldDef.type === "currency" && "pl-6")}
-          />
-        </div>
+        <ConditionValueInput
+          condition={condition}
+          fieldDef={fieldDef}
+          onValueChange={handleValueChange}
+          onSelectValueChange={handleSelectValueChange}
+          onMultiSelectValueToggle={handleMultiSelectValueToggle}
+          onCommit={onCommit}
+        />
       )}
 
       <div className="flex items-center gap-1">

package/src/components/data-table-filter.tsx

@@ -9,6 +9,7 @@ import { cn } from "../lib/utils"
 import { Button } from "./button"
 import {
   DataTableConditionFilter,
+  shouldShowOptionSearch,
   type ConditionFieldDef,
   type ConditionFilterValue,
 } from "./data-table-condition-filter"
@@ -214,15 +215,11 @@ export function DataTableFilter({
                   getOptionLabel(opt).toLowerCase().includes(subQuery)
                 )
               : category.options
-            const shouldShowSubmenuSearch = (() => {
-              if (category.searchable === true) return true
-              if (category.searchable === false) return false
-              const threshold =
-                typeof category.searchable === "object"
-                  ? (category.searchable.threshold ?? optionSearchThreshold)
-                  : optionSearchThreshold
-              return category.options.length > threshold
-            })()
+            const shouldShowSubmenuSearch = shouldShowOptionSearch(
+              category.searchable,
+              category.options.length,
+              optionSearchThreshold,
+            )
 
             return (
               <DropdownMenuSub

package/src/components/entity-panel.tsx

@@ -135,14 +135,16 @@ export function EntityPanelHeader({
   icon,
   title,
   badgeLabel,
-  subtitle: _subtitle,
+  subtitle,
   headerAction,
+  headerSecondaryAction,
 }: {
   icon?: React.ReactNode
   title: string
   badgeLabel?: string
   subtitle?: string
   headerAction?: React.ReactNode
+  headerSecondaryAction?: React.ReactNode
 }) {
   const { panelMode, cyclePanelMode, onClose } = useEntityPanel()
 
@@ -150,49 +152,63 @@ export function EntityPanelHeader({
     panelMode === 'default' ? 'Wide' : panelMode === 'wide' ? 'Fullscreen' : 'Exit fullscreen'
 
   return (
-    <div className="flex items-center justify-between mb-3">
-      <div className="flex items-center gap-2 min-w-0">
-        {icon ?? <CalendarDays className="w-5 h-5 text-muted-foreground shrink-0" />}
-        <h2 className="text-[16px] font-semibold text-foreground truncate">{title}</h2>
-        {badgeLabel && (
-          <Badge
-            variant="outline"
-            className="text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0"
+    <div className="mb-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          {icon ?? <CalendarDays className="w-5 h-5 text-muted-foreground shrink-0" />}
+          <h2 className="text-[16px] font-semibold text-foreground truncate">{title}</h2>
+          {badgeLabel && (
+            <Badge
+              variant="outline"
+              className="text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0"
+            >
+              {badgeLabel}
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-1 shrink-0 ml-4 text-muted-foreground">
+          {headerAction}
+          <button
+            type="button"
+            className="p-1.5 rounded-md hover:bg-secondary transition-colors"
+            title="Copy Link"
+          >
+            <LinkIcon className="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            onClick={cyclePanelMode}
+            className="p-1.5 rounded-md hover:bg-secondary transition-colors"
+            title={sizeButtonTitle}
           >
-            {badgeLabel}
-          </Badge>
-        )}
+            {panelMode === 'fullscreen' ? (
+              <Minimize2 className="w-4 h-4" />
+            ) : (
+              <Maximize2 className="w-4 h-4" />
+            )}
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-md hover:bg-secondary transition-colors"
+            title="Close"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
       </div>
-      <div className="flex items-center gap-1 shrink-0 ml-4 text-muted-foreground">
-        {headerAction}
-        <button
-          type="button"
-          className="p-1.5 rounded-md hover:bg-secondary transition-colors"
-          title="Copy Link"
-        >
-          <LinkIcon className="w-4 h-4" />
-        </button>
-        <button
-          type="button"
-          onClick={cyclePanelMode}
-          className="p-1.5 rounded-md hover:bg-secondary transition-colors"
-          title={sizeButtonTitle}
-        >
-          {panelMode === 'fullscreen' ? (
-            <Minimize2 className="w-4 h-4" />
+      {(subtitle || headerSecondaryAction) && (
+        <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
+          {subtitle ? (
+            <p className="min-w-0 flex-1 text-xs text-muted-foreground">{subtitle}</p>
           ) : (
-            <Maximize2 className="w-4 h-4" />
+            <div className="min-w-0 flex-1" />
           )}
-        </button>
-        <button
-          type="button"
-          onClick={onClose}
-          className="p-1.5 rounded-md hover:bg-secondary transition-colors"
-          title="Close"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
+          {headerSecondaryAction ? (
+            <div className="flex shrink-0 items-center gap-2">{headerSecondaryAction}</div>
+          ) : null}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/signal-priority-popover.tsx

@@ -40,8 +40,12 @@ export interface PriorityFactor {
   tone: "alert" | "warn" | "info"
   /** Explicit semantic label - NOT inferred from score+weight. */
   direction: "raises" | "lowers" | "neutral"
+  /** Optional display label for the direction text. Keeps semantic direction icon/color unchanged. */
+  directionLabel?: string
   /** 0-100 */
   score: number
+  /** Optional display label rendered instead of the numeric score cell. */
+  displayValueLabel?: string
   /** Evidence text (e.g. "$3.4M moved in 8h - current treasury balance $0.00"). */
   rationale: string
 }
@@ -168,12 +172,13 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
   const IconComponent = FACTOR_ICONS[factor.icon] ?? Activity
   const toneClasses = TONE_ICON_CLASSES[factor.tone]
   const directionClasses = DIRECTION_CLASSES[factor.direction]
-  const directionLabel =
+  const directionLabel = factor.directionLabel ?? (
     factor.direction === "raises"
       ? "Raises"
       : factor.direction === "lowers"
         ? "Lowers"
         : "Neutral"
+  )
 
   return (
     <div
@@ -206,10 +211,16 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
         </span>
       </div>
 
-      {/* Score number */}
+      {/* Score number / display label */}
       <div className="flex items-center text-right">
-        <span className="text-sm font-bold tabular-nums">{factor.score}</span>
-        <span className="text-xs font-normal text-muted-foreground">/100</span>
+        {factor.displayValueLabel ? (
+          <span className="text-xs font-semibold text-foreground">{factor.displayValueLabel}</span>
+        ) : (
+          <>
+            <span className="text-sm font-bold tabular-nums">{factor.score}</span>
+            <span className="text-xs font-normal text-muted-foreground">/100</span>
+          </>
+        )}
       </div>
 
       {/* empty grid cell under icon column */}