@handled-ai/design-system 0.18.11 → 0.18.12

package/dist/prototype/prototype-shell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { j as PrototypeConfig } from '../signal-priority-popover-BT6CPYNs.js';
+import { j as PrototypeConfig } from '../signal-priority-popover-BEDoPsNE.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';
 import '../components/quick-action-modal.js';

package/dist/{signal-priority-popover-BT6CPYNs.d.ts → signal-priority-popover-BEDoPsNE.d.ts}

@@ -230,6 +230,8 @@ interface InboxViewConfig {
     attentionCount?: number;
     /** Render extra content inline with the detail title. */
     renderTitleExtra?: (item: QueueItem) => React.ReactNode;
+    /** Render a full-width action row below the detail title row. */
+    renderTitleActionRow?: (item: QueueItem) => React.ReactNode;
     /** Render supporting content below the detail title. */
     renderTitleSubtext?: (item: QueueItem) => React.ReactNode;
     /** Sort options for the inbox. When provided, a sort dropdown is rendered in the split view toolbar. */
@@ -397,8 +399,12 @@ 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;
 }

package/package.json

@@ -1,7 +1,6 @@
 {
-
   "name": "@handled-ai/design-system",
-  "version": "0.18.11",
+  "version": "0.18.12",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/account-contacts-popover.test.tsx

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+
+import { AccountContactsPopover } from "../account-contacts-popover"
+import type { SuggestedContact } from "../suggested-actions"
+
+const contacts: SuggestedContact[] = [
+  {
+    name: "Alex Admin",
+    role: "Controller",
+    email: "alex@example.com",
+    confirmed: true,
+  },
+]
+
+describe("AccountContactsPopover", () => {
+  it("keeps default additive row selection behavior", () => {
+    const onSelect = vi.fn()
+    const onSelectTo = vi.fn()
+
+    render(
+      <AccountContactsPopover
+        contacts={contacts}
+        onSelect={onSelect}
+        onSelectTo={onSelectTo}
+        trigger={<button type="button">Contacts</button>}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Contacts" }))
+    fireEvent.click(screen.getByText("Alex Admin"))
+
+    expect(onSelectTo).toHaveBeenCalledWith(contacts[0])
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(screen.queryByRole("button", { name: "Add" })).toBeNull()
+  })
+
+  it("uses switch selection for default row clicks when onSelectSwitch is provided", () => {
+    const onSelect = vi.fn()
+    const onSelectTo = vi.fn()
+    const onSelectSwitch = vi.fn()
+
+    render(
+      <AccountContactsPopover
+        contacts={contacts}
+        onSelect={onSelect}
+        onSelectTo={onSelectTo}
+        onSelectSwitch={onSelectSwitch}
+        trigger={<button type="button">Contacts</button>}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Contacts" }))
+    fireEvent.click(screen.getByRole("button", { name: /switch alex admin/i }))
+
+    expect(onSelectSwitch).toHaveBeenCalledWith(contacts[0])
+    expect(onSelectTo).not.toHaveBeenCalled()
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it("allows custom default select label for switch action copy", () => {
+    const onSelect = vi.fn()
+    const onSelectSwitch = vi.fn()
+
+    render(
+      <AccountContactsPopover
+        contacts={contacts}
+        onSelect={onSelect}
+        onSelectSwitch={onSelectSwitch}
+        defaultSelectLabel="Replace"
+        trigger={<button type="button">Contacts</button>}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Contacts" }))
+    expect(screen.getByRole("button", { name: /replace alex admin/i })).toBeTruthy()
+  })
+})

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

@@ -161,6 +161,14 @@ describe("DataTableConditionFilter", () => {
     fireEvent.click(fieldOption!);
   };
 
+  const expectFieldTriggerHasNoFieldTypeIcon = (container: HTMLElement) => {
+    const fieldTrigger = container.querySelector('[data-slot="condition-row"] [data-slot="select-trigger"]');
+    expect(fieldTrigger).not.toBeNull();
+    expect(fieldTrigger?.querySelector("svg.lucide-ellipsis")).toBeNull();
+    expect(fieldTrigger?.querySelector("svg.lucide-list-filter")).toBeNull();
+    expect(fieldTrigger?.querySelector("svg.lucide-list-checks")).toBeNull();
+  };
+
   it("renders a polished empty panel with Add filter, disabled Add filter group, and quiet Clear filters", () => {
     const { container } = render(
       <DataTableConditionFilter
@@ -244,6 +252,8 @@ describe("DataTableConditionFilter", () => {
     const { container } = renderOptionFilter();
     chooseField(container, "Stage");
 
+    expectFieldTriggerHasNoFieldTypeIcon(container);
+
     expect(getOperators(selectField)).toEqual(["eq", "neq", "is_null", "is_not_null"]);
     fireEvent.click(screen.getByText("Qualified"));
     fireEvent.click(screen.getByText("Apply"));
@@ -295,10 +305,96 @@ describe("DataTableConditionFilter", () => {
     });
   });
 
+  it("uses DataTableFilter threshold semantics for option search", () => {
+    const thresholdField: ConditionFieldDef = {
+      id: "threshold",
+      label: "Threshold",
+      type: "select",
+      searchable: { threshold: 2 },
+      options: [
+        { label: "One", value: "one" },
+        { label: "Two", value: "two" },
+      ],
+    };
+    const aboveThresholdField: ConditionFieldDef = {
+      ...thresholdField,
+      id: "above_threshold",
+      options: [
+        { label: "One", value: "one" },
+        { label: "Two", value: "two" },
+        { label: "Three", value: "three" },
+      ],
+    };
+
+    const { rerender } = render(
+      <DataTableConditionFilter
+        fields={[thresholdField]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    expect(screen.queryByPlaceholderText("Search options...")).toBeNull();
+
+    rerender(
+      <DataTableConditionFilter
+        fields={[aboveThresholdField]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+    expect(screen.getByPlaceholderText("Search options...")).toBeDefined();
+  });
+
+  it("does not apply a stale search query after switching to a non-searchable select field", () => {
+    const searchableOwnerField: ConditionFieldDef = {
+      id: "owner",
+      label: "Owner",
+      type: "select",
+      searchable: true,
+      options: [
+        { label: "Alice Adams", value: "alice@example.com" },
+        { label: "Bob Brown", value: "bob@example.com" },
+      ],
+    };
+    const statusField: ConditionFieldDef = {
+      id: "status",
+      label: "Status",
+      type: "select",
+      searchable: false,
+      options: [
+        { label: "Active", value: "active" },
+        { label: "Inactive", value: "inactive" },
+      ],
+    };
+
+    const { container } = render(
+      <DataTableConditionFilter
+        fields={[searchableOwnerField, statusField]}
+        conditions={[]}
+        onConditionsChange={onConditionsChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Add filter"));
+    fireEvent.change(screen.getByPlaceholderText("Search options..."), {
+      target: { value: "bob" },
+    });
+    chooseField(container, "Status");
+
+    expect(screen.queryByPlaceholderText("Search options...")).toBeNull();
+    expect(screen.getByText("Active")).toBeDefined();
+    expect(screen.getByText("Inactive")).toBeDefined();
+    expect(screen.queryByText("No options")).toBeNull();
+  });
+
   it("renders multi-select checkboxes, toggles multiple options, and commits an in condition", () => {
     const { container } = renderOptionFilter();
     chooseField(container, "Industry");
 
+    expectFieldTriggerHasNoFieldTypeIcon(container);
+
     expect(getOperators(multiSelectField)).toEqual(["in", "is_null", "is_not_null"]);
 
     const financeCheckbox = screen.getByRole("checkbox", { name: "Finance" });

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

@@ -367,4 +367,49 @@ describe("DataTableFilter", () => {
 
     expect(screen.getByText("Advanced filters")).toBeDefined();
   });
+
+  it("renders badge with bg-muted and text-foreground when activeCount > 0", () => {
+    render(
+      <DataTableFilter
+        categories={[
+          {
+            id: "status",
+            label: "Status",
+            icon: ListFilter,
+            options: ["Open", "Closed"],
+          },
+        ]}
+        selectedFilters={{ status: ["Open"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const badge = screen.getByText("1");
+    expect(badge.tagName).toBe("SPAN");
+    expect(badge.className).toContain("bg-muted");
+    expect(badge.className).toContain("text-foreground");
+  });
+
+  it("does not render badge when activeCount is 0", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={[
+          {
+            id: "status",
+            label: "Status",
+            icon: ListFilter,
+            options: ["Open", "Closed"],
+          },
+        ]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    // The button should contain "Filter" text but no badge span with a count
+    const spans = button!.querySelectorAll("span.bg-muted");
+    expect(spans.length).toBe(0);
+  });
 });

package/src/components/__tests__/entity-panel-header.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+
+import { EntityPanel, EntityPanelHeader } from "../entity-panel"
+
+function renderHeader(node: React.ReactNode) {
+  return render(
+    <EntityPanel isOpen onClose={vi.fn()}>
+      {node}
+    </EntityPanel>,
+  )
+}
+
+describe("EntityPanelHeader", () => {
+  it("preserves headerAction and panel controls", () => {
+    renderHeader(
+      <EntityPanelHeader
+        title="Acme Corp"
+        headerAction={<button type="button">Mercury Admin</button>}
+      />,
+    )
+
+    expect(screen.getByText("Acme Corp")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Mercury Admin" })).toBeTruthy()
+    expect(screen.getByTitle("Copy Link")).toBeTruthy()
+    expect(screen.getByTitle("Wide")).toBeTruthy()
+    expect(screen.getByTitle("Close")).toBeTruthy()
+  })
+
+  it("renders subtitle and secondary action on the secondary row", () => {
+    renderHeader(
+      <EntityPanelHeader
+        title="Acme Corp"
+        subtitle="Preferred account · Treasury"
+        headerSecondaryAction={<button type="button">Quick action</button>}
+      />,
+    )
+
+    expect(screen.getByText("Preferred account · Treasury")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Quick action" })).toBeTruthy()
+    expect(screen.getByTitle("Copy Link")).toBeTruthy()
+  })
+})

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

@@ -157,6 +157,36 @@ describe("SignalPriorityPopover", () => {
     expect(neutralRow.textContent).toContain("50")
   })
 
+
+  it("keeps default direction and score labels unchanged", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const row = screen.getByTestId("factor-row-test_severity")
+    expect(row.textContent).toContain("Raises")
+    expect(row.textContent).toContain("85")
+    expect(row.textContent).toContain("/100")
+  })
+
+  it("renders custom direction and display value labels", () => {
+    const customFactors: PriorityFactor[] = [
+      {
+        ...mockFactors[0],
+        directionLabel: "Raises urgency",
+        displayValueLabel: "Open window",
+        score: 0,
+      },
+    ]
+
+    render(<SignalPriorityPopover {...defaultProps} factors={customFactors} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const row = screen.getByTestId("factor-row-test_severity")
+    expect(row.textContent).toContain("Raises urgency")
+    expect(row.textContent).toContain("Open window")
+    expect(row.textContent).not.toContain("Raises0/100")
+  })
+
   it("renders Contributing factors section label", () => {
     render(<SignalPriorityPopover {...defaultProps} />)
     fireEvent.click(screen.getByTestId("priority-popover-trigger"))

package/src/components/account-contacts-popover.tsx

@@ -32,6 +32,10 @@ export interface AccountContactsPopoverProps {
   onSelectTo?: (contact: SuggestedContact) => void
   onSelectCc?: (contact: SuggestedContact) => void
   onSelectBcc?: (contact: SuggestedContact) => void
+  /** Label for the default contact row action. Defaults to "Add" or "Switch" when onSelectSwitch is provided. */
+  defaultSelectLabel?: string
+  /** Optional replacement-selection callback. When provided, row clicks call this instead of additive onSelect/onSelectTo. */
+  onSelectSwitch?: (contact: SuggestedContact) => void
   onViewAll?: () => void
   onOpenRecentActivity?: () => void
   trigger: React.ReactNode
@@ -44,6 +48,8 @@ export function AccountContactsPopover({
   onSelectTo,
   onSelectCc,
   onSelectBcc,
+  defaultSelectLabel,
+  onSelectSwitch,
   onViewAll,
   onOpenRecentActivity,
   trigger,
@@ -52,6 +58,15 @@ export function AccountContactsPopover({
   const [open, setOpen] = React.useState(false)
   const triggerRef = React.useRef<HTMLDivElement>(null)
   const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})
+  const resolvedDefaultSelectLabel = defaultSelectLabel ?? (onSelectSwitch ? "Switch" : undefined)
+  const handleDefaultSelect = React.useCallback((contact: SuggestedContact) => {
+    if (onSelectSwitch) {
+      onSelectSwitch(contact)
+    } else {
+      (onSelectTo ?? onSelect)(contact)
+    }
+    setOpen(false)
+  }, [onSelect, onSelectSwitch, onSelectTo])
 
   React.useEffect(() => {
     if (open && triggerRef.current) {
@@ -84,7 +99,8 @@ export function AccountContactsPopover({
                 <div
                   key={i}
                   role="button"
-                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}
+                  onClick={() => handleDefaultSelect(c)}
+                  aria-label={resolvedDefaultSelectLabel ? `${resolvedDefaultSelectLabel} ${c.name}` : undefined}
                   className="flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer"
                 >
                   <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0">
@@ -115,6 +131,18 @@ export function AccountContactsPopover({
                     )}
                   </div>
                   <div className="ml-2 flex items-center gap-1.5 shrink-0">
+                    {resolvedDefaultSelectLabel && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDefaultSelect(c)
+                        }}
+                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
+                      >
+                        {resolvedDefaultSelectLabel}
+                      </button>
+                    )}
                     {onSelectTo && (
                       <button
                         type="button"

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

@@ -2,16 +2,11 @@
 
 import * as React from "react"
 import {
-  CalendarDays,
   Check,
-  DollarSign,
   Eye,
-  Hash,
   MoreHorizontal,
   Plus,
   Trash2,
-  Type,
-  type LucideIcon,
 } from "lucide-react"
 
 import { cn } from "../lib/utils"
@@ -103,6 +98,22 @@ 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,
@@ -241,19 +252,6 @@ function getCommittedConditions(
     .filter((condition) => isCompleteCondition(condition, fields))
 }
 
-const FIELD_ICON_BY_TYPE: Record<ConditionFieldDef["type"], LucideIcon> = {
-  text: Type,
-  number: Hash,
-  currency: DollarSign,
-  date: CalendarDays,
-  select: MoreHorizontal,
-  multi_select: MoreHorizontal,
-}
-
-function getFieldIcon(type: ConditionFieldDef["type"]): LucideIcon {
-  return FIELD_ICON_BY_TYPE[type]
-}
-
 // ── Condition Row ──────────────────────────────────────────────
 
 function getInputType(fieldType: ConditionFieldDef["type"]): "text" | "number" | "date" {
@@ -278,18 +276,6 @@ interface ConditionValueInputProps {
   onCommit: () => void
 }
 
-function shouldShowOptionSearch(
-  fieldDef: ConditionFieldDef,
-  optionCount: number,
-): boolean {
-  if (fieldDef.searchable === true) return true
-  if (fieldDef.searchable === false) return false
-  if (typeof fieldDef.searchable === "object") {
-    return optionCount >= (fieldDef.searchable.threshold ?? 8)
-  }
-  return false
-}
-
 function SelectConditionValueInput({
   condition,
   fieldDef,
@@ -297,11 +283,15 @@ function SelectConditionValueInput({
 }: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onSelectValueChange">) {
   const [query, setQuery] = React.useState("")
   const options = normalizeFieldOptions(fieldDef)
-  const normalizedQuery = query.trim().toLowerCase()
+  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
-  const showSearch = shouldShowOptionSearch(fieldDef, options.length)
+
+  React.useEffect(() => {
+    setQuery("")
+  }, [fieldDef.id])
 
   return (
     <Select
@@ -318,7 +308,11 @@ function SelectConditionValueInput({
               value={query}
               onChange={(event) => setQuery(event.target.value)}
               onClick={(event) => event.stopPropagation()}
-              onKeyDown={(event) => event.stopPropagation()}
+              onKeyDown={(event) => {
+                if (!NAV_KEYS.has(event.key)) {
+                  event.stopPropagation()
+                }
+              }}
               placeholder="Search options..."
               className="h-7 text-xs"
             />
@@ -453,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
@@ -512,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>
 

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"
@@ -160,7 +161,7 @@ export function DataTableFilter({
           <ListFilter className="h-3.5 w-3.5" />
           Filter
           {activeCount > 0 ? (
-            <span className="rounded bg-muted px-1.5 py-0 text-[10px] font-semibold">
+            <span className="rounded bg-muted px-1.5 py-0 text-[10px] font-semibold text-foreground">
               {activeCount}
             </span>
           ) : null}
@@ -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