@handled-ai/design-system 0.18.43 → 0.18.44

package/dist/components/badge.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/components/email-recipient-field.js

@@ -24,7 +24,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import {
-  Check,
   ChevronDown,
   CornerDownLeft,
   Plus,
@@ -50,16 +49,21 @@ function RecipientChipPill({
   onConfirm,
   onRemove
 }) {
-  const display = recipient.name || recipient.email;
+  const primary = recipient.name || recipient.email;
+  const secondary = recipient.name ? recipient.email : "";
+  const display = primary || recipient.email;
   if (!recipient.confirmed) {
-    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-amber-300 bg-amber-50 text-amber-900", children: [
-      /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: display }),
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded text-xs border border-amber-300 bg-amber-50 px-2 py-0.5 text-amber-800", children: [
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 inline-flex items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium max-w-[150px]", children: primary }),
+        secondary ? /* @__PURE__ */ jsx("span", { className: "truncate max-w-[190px] text-amber-800/70", children: secondary }) : null
+      ] }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: onConfirm,
-          className: "text-[10.5px] font-semibold px-[7px] py-0.5 rounded bg-amber-300/50 hover:bg-amber-300/85",
+          className: "ml-1 rounded bg-amber-200/60 px-2 py-0.5 text-xs font-semibold text-amber-800 hover:bg-amber-200",
           children: "Confirm"
         }
       ),
@@ -69,22 +73,24 @@ function RecipientChipPill({
           type: "button",
           "aria-label": `Remove ${display}`,
           onClick: onRemove,
-          className: "inline-flex items-center justify-center size-[17px] rounded text-amber-700/80 hover:bg-amber-300/40",
+          className: "inline-flex size-4 items-center justify-center rounded text-amber-700/80 hover:bg-amber-200/70",
           children: /* @__PURE__ */ jsx(X, { className: "size-3" })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground", children: [
-    /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700", children: /* @__PURE__ */ jsx(Check, { className: "size-3" }) }),
-    /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: display }),
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded border border-border bg-background px-2 py-0.5 text-xs text-foreground", children: [
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 inline-flex items-baseline gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-medium max-w-[150px]", children: primary }),
+      secondary ? /* @__PURE__ */ jsx("span", { className: "truncate max-w-[190px] text-muted-foreground", children: secondary }) : null
+    ] }),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-label": `Remove ${display}`,
         onClick: onRemove,
-        className: "inline-flex items-center justify-center size-[17px] rounded text-muted-foreground hover:bg-muted",
+        className: "inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
         children: /* @__PURE__ */ jsx(X, { className: "size-3" })
       }
     )
@@ -215,22 +221,31 @@ function EmailRecipientField({
   const amberRow = state === "amber";
   const added = addedEmails != null ? addedEmails : /* @__PURE__ */ new Set();
   const resolvedPlaceholder = placeholder != null ? placeholder : recipients.length > 0 ? "Add another..." : "Add email...";
+  const committedByKeyRef = React.useRef(null);
   function addEmail(email) {
     const trimmed = email.trim();
-    if (!isValidEmail(trimmed)) return;
-    if (added.has(trimmed.toLowerCase())) return;
+    if (!isValidEmail(trimmed)) return false;
+    if (added.has(trimmed.toLowerCase())) return false;
     onRecipientsChange([
       ...recipients,
       { id: trimmed, email: trimmed, name: "", confirmed: false }
     ]);
     setValue("");
+    return true;
   }
   function handleKeyDown(event) {
-    if ((event.key === "Enter" || event.key === ",") && isValidEmail(value)) {
+    if ((event.key === "Enter" || event.key === ",") && value.trim()) {
       event.preventDefault();
       addEmail(value);
       return;
     }
+    if (event.key === "Tab" && value.trim()) {
+      const trimmed = value.trim();
+      if (addEmail(trimmed)) {
+        committedByKeyRef.current = trimmed.toLowerCase();
+      }
+      return;
+    }
     if (event.key === "Backspace" && value === "" && recipients.length > 0) {
       event.preventDefault();
       onRecipientsChange(recipients.slice(0, -1));
@@ -291,7 +306,12 @@ function EmailRecipientField({
                 onChange: (event) => setValue(event.target.value),
                 onKeyDown: handleKeyDown,
                 onBlur: () => {
-                  if (isValidEmail(value)) addEmail(value);
+                  const trimmed = value.trim().toLowerCase();
+                  if (trimmed && committedByKeyRef.current === trimmed) {
+                    committedByKeyRef.current = null;
+                    return;
+                  }
+                  addEmail(value);
                 },
                 placeholder: resolvedPlaceholder,
                 className: "min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground"

package/dist/components/email-recipient-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/email-recipient-field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\nimport {\n  Check,\n  ChevronDown,\n  CornerDownLeft,\n  Plus,\n  Search,\n  Users,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport type { SuggestedContact } from \"./suggested-actions\"\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nfunction isValidEmail(value: string): boolean {\n  return EMAIL_REGEX.test(value.trim())\n}\n\nfunction contactEmail(contact: SuggestedContact): string | undefined {\n  return contact.email ?? contact.emails?.[0]\n}\n\nfunction getInitials(name: string, fallback: string): string {\n  const source = name?.trim() || fallback\n  return source\n    .split(/[\\s@.]+/)\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nexport interface RecipientChip {\n  id: string\n  email: string\n  name: string\n  confirmed: boolean\n}\n\nexport interface EmailRecipientFieldProps {\n  label: string\n  recipients: RecipientChip[]\n  onRecipientsChange: (recipients: RecipientChip[]) => void\n  amber?: boolean\n  contacts?: SuggestedContact[]\n  showPicker?: boolean\n  showCcBcc?: boolean\n  ccBccOpen?: boolean\n  onCcBccToggle?: () => void\n  addedEmails?: Set<string>\n  placeholder?: string\n  contactToRecipient?: (contact: SuggestedContact) => RecipientChip\n  /**\n   * Async search mode. When provided, the picker forwards the typed query to\n   * this callback (the caller debounces + fetches) and treats `contacts` as the\n   * already server-filtered result set instead of filtering it client-side.\n   */\n  onSearch?: (query: string) => void\n  /** Shows a \"Searching contacts...\" indicator while async results load. */\n  searchLoading?: boolean\n}\n\nfunction RecipientChipPill({\n  recipient,\n  onConfirm,\n  onRemove,\n}: {\n  recipient: RecipientChip\n  onConfirm: () => void\n  onRemove: () => void\n}) {\n  const display = recipient.name || recipient.email\n\n  if (!recipient.confirmed) {\n    return (\n      <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-amber-300 bg-amber-50 text-amber-900\">\n        <span className=\"truncate max-w-[180px]\">{display}</span>\n        <button\n          type=\"button\"\n          onClick={onConfirm}\n          className=\"text-[10.5px] font-semibold px-[7px] py-0.5 rounded bg-amber-300/50 hover:bg-amber-300/85\"\n        >\n          Confirm\n        </button>\n        <button\n          type=\"button\"\n          aria-label={`Remove ${display}`}\n          onClick={onRemove}\n          className=\"inline-flex items-center justify-center size-[17px] rounded text-amber-700/80 hover:bg-amber-300/40\"\n        >\n          <X className=\"size-3\" />\n        </button>\n      </span>\n    )\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground\">\n      <span className=\"inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700\">\n        <Check className=\"size-3\" />\n      </span>\n      <span className=\"truncate max-w-[180px]\">{display}</span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${display}`}\n        onClick={onRemove}\n        className=\"inline-flex items-center justify-center size-[17px] rounded text-muted-foreground hover:bg-muted\"\n      >\n        <X className=\"size-3\" />\n      </button>\n    </span>\n  )\n}\n\n// Contents of the contact picker dropdown. Rendered inside a Radix\n// `Popover.Content` so its focus scope pushes onto the focus-scope stack and\n// PAUSES any parent modal's scope (e.g. the quick-action Dialog). This is what\n// makes the search input typeable: a plain `createPortal(..., document.body)`\n// element renders outside the Dialog's `DialogContent`, so the Dialog's\n// FocusScope kept yanking focus back (input un-typeable) and its modal\n// `pointer-events: none` on <body> left the portal click-dead. A stacked Radix\n// Popover layer gets `pointer-events: auto` and its own (paused-parent) focus\n// scope, fixing both. See WIT-800 / WIT-770.\nfunction ContactPickerContents({\n  contacts,\n  addedEmails,\n  onSelect,\n  onAddEmail,\n  onSearch,\n  searchLoading = false,\n}: {\n  contacts: SuggestedContact[]\n  addedEmails: Set<string>\n  onSelect: (contact: SuggestedContact) => void\n  onAddEmail: (email: string) => void\n  onSearch?: (query: string) => void\n  searchLoading?: boolean\n}) {\n  const [query, setQuery] = React.useState(\"\")\n\n  const asyncMode = typeof onSearch === \"function\"\n\n  // Keep the latest onSearch in a ref so the search effect below fires only when\n  // the query (or async mode) changes, not when the callback identity changes.\n  // This lets callers pass an inline handler without triggering duplicate\n  // fetches on unrelated parent re-renders.\n  const onSearchRef = React.useRef(onSearch)\n  React.useEffect(() => {\n    onSearchRef.current = onSearch\n  }, [onSearch])\n\n  // Async mode: forward the query upward (caller debounces + fetches) and treat\n  // `contacts` as the already server-filtered result set. Local mode: filter the\n  // static `contacts` array client-side.\n  React.useEffect(() => {\n    if (asyncMode) {\n      onSearchRef.current?.(query)\n    }\n  }, [asyncMode, query])\n\n  const normalizedQuery = query.trim().toLowerCase()\n  const filtered = asyncMode\n    ? contacts\n    : normalizedQuery\n      ? contacts.filter((contact) => {\n          const email = contactEmail(contact) ?? \"\"\n          return (\n            contact.name.toLowerCase().includes(normalizedQuery) ||\n            contact.role.toLowerCase().includes(normalizedQuery) ||\n            email.toLowerCase().includes(normalizedQuery)\n          )\n        })\n      : contacts\n\n  const queryIsEmail = isValidEmail(query)\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\" && queryIsEmail) {\n      event.preventDefault()\n      onAddEmail(query.trim())\n      setQuery(\"\")\n    }\n  }\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 px-3 py-2.5 border-b border-border/50\">\n        <Search className=\"size-4 text-muted-foreground shrink-0\" />\n        <input\n          autoFocus\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          onKeyDown={handleKeyDown}\n          className=\"flex-1 text-[13px] bg-transparent outline-none\"\n          placeholder=\"Search contacts...\"\n        />\n      </div>\n\n      <div role=\"listbox\" className=\"max-h-[208px] overflow-y-auto p-1\">\n        {searchLoading ? (\n          <div className=\"px-3 py-5 text-center text-[13px] text-muted-foreground\">\n            Searching contacts...\n          </div>\n        ) : asyncMode && normalizedQuery.length === 0 ? (\n          <div className=\"px-3 py-5 text-center text-[13px] text-muted-foreground\">\n            Type a name or email to search contacts.\n          </div>\n        ) : !asyncMode && contacts.length === 0 ? (\n          <div className=\"px-3 py-5 text-center text-[13px] text-muted-foreground\">\n            <div className=\"font-medium text-foreground/80\">\n              No contacts for this account\n            </div>\n            <div className=\"mt-1\">\n              Type an email address above and press Enter to add a recipient.\n            </div>\n          </div>\n        ) : filtered.length === 0 ? (\n          <div className=\"px-3 py-4 text-center text-[13px] text-muted-foreground\">\n            <div>No contact matches &lsquo;{query}&rsquo;.</div>\n            {queryIsEmail ? (\n              <div className=\"mt-1\">Press Enter to add {query}.</div>\n            ) : null}\n          </div>\n        ) : (\n          filtered.map((contact, index) => {\n            const email = contactEmail(contact)\n            const noEmail = !email || !isValidEmail(email)\n            const alreadyAdded = email\n              ? addedEmails.has(email.toLowerCase())\n              : false\n            const disabled = noEmail || alreadyAdded\n\n            return (\n              <div\n                key={`${contact.name}-${email ?? index}`}\n                role=\"option\"\n                aria-selected={false}\n                aria-disabled={disabled}\n                onClick={() => {\n                  if (!disabled) onSelect(contact)\n                }}\n                className={cn(\n                  \"flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer hover:bg-muted/60\",\n                  disabled && \"opacity-45 pointer-events-none\",\n                )}\n              >\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-muted text-[11px] font-medium text-muted-foreground\">\n                  {getInitials(contact.name, email ?? \"?\")}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <span className=\"truncate text-[13px] font-medium text-foreground\">\n                      {contact.name}\n                    </span>\n                    <span className=\"truncate text-[11px] text-muted-foreground\">\n                      {contact.role}\n                    </span>\n                  </div>\n                  {email ? (\n                    <div className=\"truncate text-[11px] text-muted-foreground\">\n                      {email}\n                    </div>\n                  ) : null}\n                </div>\n                {alreadyAdded ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    Added\n                  </span>\n                ) : noEmail ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    No email\n                  </span>\n                ) : null}\n              </div>\n            )\n          })\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-1.5 px-3 py-2 border-t border-border/50 text-[11px] text-muted-foreground\">\n        <CornerDownLeft className=\"size-3 shrink-0\" />\n        <span>Type an address and press Enter to add someone not listed.</span>\n      </div>\n    </>\n  )\n}\n\nexport function EmailRecipientField({\n  label,\n  recipients,\n  onRecipientsChange,\n  amber = false,\n  contacts = [],\n  showPicker = false,\n  showCcBcc = false,\n  ccBccOpen = false,\n  onCcBccToggle,\n  addedEmails,\n  placeholder,\n  contactToRecipient,\n  onSearch,\n  searchLoading,\n}: EmailRecipientFieldProps) {\n  const [value, setValue] = React.useState(\"\")\n  const [pickerOpen, setPickerOpen] = React.useState(false)\n\n  const hasUnconfirmed = recipients.some((r) => !r.confirmed)\n  const state: \"default\" | \"amber\" =\n    amber && hasUnconfirmed ? \"amber\" : \"default\"\n  const amberRow = state === \"amber\"\n\n  const added = addedEmails ?? new Set<string>()\n\n  const resolvedPlaceholder =\n    placeholder ?? (recipients.length > 0 ? \"Add another...\" : \"Add email...\")\n\n  function addEmail(email: string) {\n    const trimmed = email.trim()\n    if (!isValidEmail(trimmed)) return\n    if (added.has(trimmed.toLowerCase())) return\n    onRecipientsChange([\n      ...recipients,\n      { id: trimmed, email: trimmed, name: \"\", confirmed: false },\n    ])\n    setValue(\"\")\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if ((event.key === \"Enter\" || event.key === \",\") && isValidEmail(value)) {\n      event.preventDefault()\n      addEmail(value)\n      return\n    }\n    if (event.key === \"Backspace\" && value === \"\" && recipients.length > 0) {\n      event.preventDefault()\n      onRecipientsChange(recipients.slice(0, -1))\n    }\n  }\n\n  function confirmRecipient(id: string) {\n    onRecipientsChange(\n      recipients.map((r) => (r.id === id ? { ...r, confirmed: true } : r)),\n    )\n  }\n\n  function removeRecipient(id: string) {\n    onRecipientsChange(recipients.filter((r) => r.id !== id))\n  }\n\n  function selectContact(contact: SuggestedContact) {\n    const recipient =\n      contactToRecipient?.(contact) ??\n      ({\n        id: contactEmail(contact) ?? contact.name,\n        email: contactEmail(contact) ?? \"\",\n        name: contact.name,\n        confirmed: true,\n      } satisfies RecipientChip)\n    onRecipientsChange([...recipients, recipient])\n    setPickerOpen(false)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-start text-sm\",\n        amberRow && \"bg-amber-50/35 border-amber-200/80\",\n      )}\n    >\n      <div\n        className={cn(\n          \"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground pt-[7px]\",\n          amberRow && \"text-amber-700\",\n        )}\n      >\n        {label}\n      </div>\n\n      <div className=\"min-w-0\">\n        <div className=\"flex flex-wrap gap-1.5 items-center\">\n          {recipients.map((recipient) => (\n            <RecipientChipPill\n              key={recipient.id}\n              recipient={recipient}\n              onConfirm={() => confirmRecipient(recipient.id)}\n              onRemove={() => removeRecipient(recipient.id)}\n            />\n          ))}\n          <input\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n            onKeyDown={handleKeyDown}\n            onBlur={() => {\n              // Commit any valid pending email so it is not silently dropped\n              // when the user clicks Send without pressing Enter/comma first.\n              if (isValidEmail(value)) addEmail(value)\n            }}\n            placeholder={resolvedPlaceholder}\n            className=\"min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        {showPicker || showCcBcc ? (\n          <div className=\"flex gap-1.5 mt-2\">\n            {showPicker ? (\n              <PopoverPrimitive.Root open={pickerOpen} onOpenChange={setPickerOpen}>\n                <PopoverPrimitive.Trigger asChild>\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n                  >\n                    <Users className=\"size-3\" />\n                    Contacts\n                    <ChevronDown className=\"size-3\" />\n                  </button>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                  <PopoverPrimitive.Content\n                    side=\"bottom\"\n                    align=\"start\"\n                    sideOffset={4}\n                    collisionPadding={16}\n                    className=\"z-50 w-[min(448px,calc(100vw-2rem))] rounded-lg border bg-background shadow-xl p-0\"\n                  >\n                    <ContactPickerContents\n                      contacts={contacts}\n                      addedEmails={added}\n                      onSelect={selectContact}\n                      onAddEmail={(email) => {\n                        addEmail(email)\n                        setPickerOpen(false)\n                      }}\n                      onSearch={onSearch}\n                      searchLoading={searchLoading}\n                    />\n                  </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n              </PopoverPrimitive.Root>\n            ) : null}\n            {showCcBcc ? (\n              <button\n                type=\"button\"\n                onClick={onCcBccToggle}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Plus className=\"size-3\" />\n                {ccBccOpen ? \"Hide Cc/Bcc\" : \"Add Cc/Bcc\"}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/email-recipient-field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\nimport {\n  ChevronDown,\n  CornerDownLeft,\n  Plus,\n  Search,\n  Users,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport type { SuggestedContact } from \"./suggested-actions\"\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nfunction isValidEmail(value: string): boolean {\n  return EMAIL_REGEX.test(value.trim())\n}\n\nfunction contactEmail(contact: SuggestedContact): string | undefined {\n  return contact.email ?? contact.emails?.[0]\n}\n\nfunction getInitials(name: string, fallback: string): string {\n  const source = name?.trim() || fallback\n  return source\n    .split(/[\\s@.]+/)\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nexport interface RecipientChip {\n  id: string\n  email: string\n  name: string\n  confirmed: boolean\n}\n\nexport interface EmailRecipientFieldProps {\n  label: string\n  recipients: RecipientChip[]\n  onRecipientsChange: (recipients: RecipientChip[]) => void\n  amber?: boolean\n  contacts?: SuggestedContact[]\n  showPicker?: boolean\n  showCcBcc?: boolean\n  ccBccOpen?: boolean\n  onCcBccToggle?: () => void\n  addedEmails?: Set<string>\n  placeholder?: string\n  contactToRecipient?: (contact: SuggestedContact) => RecipientChip\n  /**\n   * Async search mode. When provided, the picker forwards the typed query to\n   * this callback (the caller debounces + fetches) and treats `contacts` as the\n   * already server-filtered result set instead of filtering it client-side.\n   */\n  onSearch?: (query: string) => void\n  /** Shows a \"Searching contacts...\" indicator while async results load. */\n  searchLoading?: boolean\n}\n\nfunction RecipientChipPill({\n  recipient,\n  onConfirm,\n  onRemove,\n}: {\n  recipient: RecipientChip\n  onConfirm: () => void\n  onRemove: () => void\n}) {\n  const primary = recipient.name || recipient.email\n  const secondary = recipient.name ? recipient.email : \"\"\n  const display = primary || recipient.email\n\n  if (!recipient.confirmed) {\n    return (\n      <span className=\"inline-flex max-w-full items-center gap-1 rounded text-xs border border-amber-300 bg-amber-50 px-2 py-0.5 text-amber-800\">\n        <span className=\"min-w-0 inline-flex items-baseline gap-1\">\n          <span className=\"truncate font-medium max-w-[150px]\">{primary}</span>\n          {secondary ? (\n            <span className=\"truncate max-w-[190px] text-amber-800/70\">\n              {secondary}\n            </span>\n          ) : null}\n        </span>\n        <button\n          type=\"button\"\n          onClick={onConfirm}\n          className=\"ml-1 rounded bg-amber-200/60 px-2 py-0.5 text-xs font-semibold text-amber-800 hover:bg-amber-200\"\n        >\n          Confirm\n        </button>\n        <button\n          type=\"button\"\n          aria-label={`Remove ${display}`}\n          onClick={onRemove}\n          className=\"inline-flex size-4 items-center justify-center rounded text-amber-700/80 hover:bg-amber-200/70\"\n        >\n          <X className=\"size-3\" />\n        </button>\n      </span>\n    )\n  }\n\n  return (\n    <span className=\"inline-flex max-w-full items-center gap-1 rounded border border-border bg-background px-2 py-0.5 text-xs text-foreground\">\n      <span className=\"min-w-0 inline-flex items-baseline gap-1\">\n        <span className=\"truncate font-medium max-w-[150px]\">{primary}</span>\n        {secondary ? (\n          <span className=\"truncate max-w-[190px] text-muted-foreground\">\n            {secondary}\n          </span>\n        ) : null}\n      </span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${display}`}\n        onClick={onRemove}\n        className=\"inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n      >\n        <X className=\"size-3\" />\n      </button>\n    </span>\n  )\n}\n\n// Contents of the contact picker dropdown. Rendered inside a Radix\n// `Popover.Content` so its focus scope pushes onto the focus-scope stack and\n// PAUSES any parent modal's scope (e.g. the quick-action Dialog). This is what\n// makes the search input typeable: a plain `createPortal(..., document.body)`\n// element renders outside the Dialog's `DialogContent`, so the Dialog's\n// FocusScope kept yanking focus back (input un-typeable) and its modal\n// `pointer-events: none` on <body> left the portal click-dead. A stacked Radix\n// Popover layer gets `pointer-events: auto` and its own (paused-parent) focus\n// scope, fixing both. See WIT-800 / WIT-770.\nfunction ContactPickerContents({\n  contacts,\n  addedEmails,\n  onSelect,\n  onAddEmail,\n  onSearch,\n  searchLoading = false,\n}: {\n  contacts: SuggestedContact[]\n  addedEmails: Set<string>\n  onSelect: (contact: SuggestedContact) => void\n  onAddEmail: (email: string) => void\n  onSearch?: (query: string) => void\n  searchLoading?: boolean\n}) {\n  const [query, setQuery] = React.useState(\"\")\n\n  const asyncMode = typeof onSearch === \"function\"\n\n  // Keep the latest onSearch in a ref so the search effect below fires only when\n  // the query (or async mode) changes, not when the callback identity changes.\n  // This lets callers pass an inline handler without triggering duplicate\n  // fetches on unrelated parent re-renders.\n  const onSearchRef = React.useRef(onSearch)\n  React.useEffect(() => {\n    onSearchRef.current = onSearch\n  }, [onSearch])\n\n  // Async mode: forward the query upward (caller debounces + fetches) and treat\n  // `contacts` as the already server-filtered result set. Local mode: filter the\n  // static `contacts` array client-side.\n  React.useEffect(() => {\n    if (asyncMode) {\n      onSearchRef.current?.(query)\n    }\n  }, [asyncMode, query])\n\n  const normalizedQuery = query.trim().toLowerCase()\n  const filtered = asyncMode\n    ? contacts\n    : normalizedQuery\n      ? contacts.filter((contact) => {\n          const email = contactEmail(contact) ?? \"\"\n          return (\n            contact.name.toLowerCase().includes(normalizedQuery) ||\n            contact.role.toLowerCase().includes(normalizedQuery) ||\n            email.toLowerCase().includes(normalizedQuery)\n          )\n        })\n      : contacts\n\n  const queryIsEmail = isValidEmail(query)\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\" && queryIsEmail) {\n      event.preventDefault()\n      onAddEmail(query.trim())\n      setQuery(\"\")\n    }\n  }\n\n  return (\n    <>\n      <div className=\"flex items-center gap-2 px-3 py-2.5 border-b border-border/50\">\n        <Search className=\"size-4 text-muted-foreground shrink-0\" />\n        <input\n          autoFocus\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          onKeyDown={handleKeyDown}\n          className=\"flex-1 text-[13px] bg-transparent outline-none\"\n          placeholder=\"Search contacts...\"\n        />\n      </div>\n\n      <div role=\"listbox\" className=\"max-h-[208px] overflow-y-auto p-1\">\n        {searchLoading ? (\n          <div className=\"px-3 py-5 text-center text-[13px] text-muted-foreground\">\n            Searching contacts...\n          </div>\n        ) : asyncMode && normalizedQuery.length === 0 ? (\n          <div className=\"px-3 py-5 text-center text-[13px] text-muted-foreground\">\n            Type a name or email to search contacts.\n          </div>\n        ) : !asyncMode && contacts.length === 0 ? (\n          <div className=\"px-3 py-5 text-center text-[13px] text-muted-foreground\">\n            <div className=\"font-medium text-foreground/80\">\n              No contacts for this account\n            </div>\n            <div className=\"mt-1\">\n              Type an email address above and press Enter to add a recipient.\n            </div>\n          </div>\n        ) : filtered.length === 0 ? (\n          <div className=\"px-3 py-4 text-center text-[13px] text-muted-foreground\">\n            <div>No contact matches &lsquo;{query}&rsquo;.</div>\n            {queryIsEmail ? (\n              <div className=\"mt-1\">Press Enter to add {query}.</div>\n            ) : null}\n          </div>\n        ) : (\n          filtered.map((contact, index) => {\n            const email = contactEmail(contact)\n            const noEmail = !email || !isValidEmail(email)\n            const alreadyAdded = email\n              ? addedEmails.has(email.toLowerCase())\n              : false\n            const disabled = noEmail || alreadyAdded\n\n            return (\n              <div\n                key={`${contact.name}-${email ?? index}`}\n                role=\"option\"\n                aria-selected={false}\n                aria-disabled={disabled}\n                onClick={() => {\n                  if (!disabled) onSelect(contact)\n                }}\n                className={cn(\n                  \"flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer hover:bg-muted/60\",\n                  disabled && \"opacity-45 pointer-events-none\",\n                )}\n              >\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-muted text-[11px] font-medium text-muted-foreground\">\n                  {getInitials(contact.name, email ?? \"?\")}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <span className=\"truncate text-[13px] font-medium text-foreground\">\n                      {contact.name}\n                    </span>\n                    <span className=\"truncate text-[11px] text-muted-foreground\">\n                      {contact.role}\n                    </span>\n                  </div>\n                  {email ? (\n                    <div className=\"truncate text-[11px] text-muted-foreground\">\n                      {email}\n                    </div>\n                  ) : null}\n                </div>\n                {alreadyAdded ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    Added\n                  </span>\n                ) : noEmail ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    No email\n                  </span>\n                ) : null}\n              </div>\n            )\n          })\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-1.5 px-3 py-2 border-t border-border/50 text-[11px] text-muted-foreground\">\n        <CornerDownLeft className=\"size-3 shrink-0\" />\n        <span>Type an address and press Enter to add someone not listed.</span>\n      </div>\n    </>\n  )\n}\n\nexport function EmailRecipientField({\n  label,\n  recipients,\n  onRecipientsChange,\n  amber = false,\n  contacts = [],\n  showPicker = false,\n  showCcBcc = false,\n  ccBccOpen = false,\n  onCcBccToggle,\n  addedEmails,\n  placeholder,\n  contactToRecipient,\n  onSearch,\n  searchLoading,\n}: EmailRecipientFieldProps) {\n  const [value, setValue] = React.useState(\"\")\n  const [pickerOpen, setPickerOpen] = React.useState(false)\n\n  const hasUnconfirmed = recipients.some((r) => !r.confirmed)\n  const state: \"default\" | \"amber\" =\n    amber && hasUnconfirmed ? \"amber\" : \"default\"\n  const amberRow = state === \"amber\"\n\n  const added = addedEmails ?? new Set<string>()\n\n  const resolvedPlaceholder =\n    placeholder ?? (recipients.length > 0 ? \"Add another...\" : \"Add email...\")\n\n  const committedByKeyRef = React.useRef<string | null>(null)\n\n  function addEmail(email: string): boolean {\n    const trimmed = email.trim()\n    if (!isValidEmail(trimmed)) return false\n    if (added.has(trimmed.toLowerCase())) return false\n    onRecipientsChange([\n      ...recipients,\n      { id: trimmed, email: trimmed, name: \"\", confirmed: false },\n    ])\n    setValue(\"\")\n    return true\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if ((event.key === \"Enter\" || event.key === \",\") && value.trim()) {\n      event.preventDefault()\n      addEmail(value)\n      return\n    }\n    if (event.key === \"Tab\" && value.trim()) {\n      const trimmed = value.trim()\n      if (addEmail(trimmed)) {\n        committedByKeyRef.current = trimmed.toLowerCase()\n      }\n      return\n    }\n    if (event.key === \"Backspace\" && value === \"\" && recipients.length > 0) {\n      event.preventDefault()\n      onRecipientsChange(recipients.slice(0, -1))\n    }\n  }\n\n  function confirmRecipient(id: string) {\n    onRecipientsChange(\n      recipients.map((r) => (r.id === id ? { ...r, confirmed: true } : r)),\n    )\n  }\n\n  function removeRecipient(id: string) {\n    onRecipientsChange(recipients.filter((r) => r.id !== id))\n  }\n\n  function selectContact(contact: SuggestedContact) {\n    const recipient =\n      contactToRecipient?.(contact) ??\n      ({\n        id: contactEmail(contact) ?? contact.name,\n        email: contactEmail(contact) ?? \"\",\n        name: contact.name,\n        confirmed: true,\n      } satisfies RecipientChip)\n    onRecipientsChange([...recipients, recipient])\n    setPickerOpen(false)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-start text-sm\",\n        amberRow && \"bg-amber-50/35 border-amber-200/80\",\n      )}\n    >\n      <div\n        className={cn(\n          \"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground pt-[7px]\",\n          amberRow && \"text-amber-700\",\n        )}\n      >\n        {label}\n      </div>\n\n      <div className=\"min-w-0\">\n        <div className=\"flex flex-wrap gap-1.5 items-center\">\n          {recipients.map((recipient) => (\n            <RecipientChipPill\n              key={recipient.id}\n              recipient={recipient}\n              onConfirm={() => confirmRecipient(recipient.id)}\n              onRemove={() => removeRecipient(recipient.id)}\n            />\n          ))}\n          <input\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n            onKeyDown={handleKeyDown}\n            onBlur={() => {\n              const trimmed = value.trim().toLowerCase()\n              if (trimmed && committedByKeyRef.current === trimmed) {\n                committedByKeyRef.current = null\n                return\n              }\n              // Commit any valid pending email so it is not silently dropped\n              // when the user clicks Send without pressing Enter/comma first.\n              addEmail(value)\n            }}\n            placeholder={resolvedPlaceholder}\n            className=\"min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        {showPicker || showCcBcc ? (\n          <div className=\"flex gap-1.5 mt-2\">\n            {showPicker ? (\n              <PopoverPrimitive.Root open={pickerOpen} onOpenChange={setPickerOpen}>\n                <PopoverPrimitive.Trigger asChild>\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n                  >\n                    <Users className=\"size-3\" />\n                    Contacts\n                    <ChevronDown className=\"size-3\" />\n                  </button>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                  <PopoverPrimitive.Content\n                    side=\"bottom\"\n                    align=\"start\"\n                    sideOffset={4}\n                    collisionPadding={16}\n                    className=\"z-50 w-[min(448px,calc(100vw-2rem))] rounded-lg border bg-background shadow-xl p-0\"\n                  >\n                    <ContactPickerContents\n                      contacts={contacts}\n                      addedEmails={added}\n                      onSelect={selectContact}\n                      onAddEmail={(email) => {\n                        addEmail(email)\n                        setPickerOpen(false)\n                      }}\n                      onSearch={onSearch}\n                      searchLoading={searchLoading}\n                    />\n                  </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n              </PopoverPrimitive.Root>\n            ) : null}\n            {showCcBcc ? (\n              <button\n                type=\"button\"\n                onClick={onCcBccToggle}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Plus className=\"size-3\" />\n                {ccBccOpen ? \"Hide Cc/Bcc\" : \"Add Cc/Bcc\"}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/pill.d.ts

@@ -12,7 +12,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
 declare const pillVariants: (props?: ({
-    variant?: "error" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "neutral" | "info" | "success" | "warning" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "neutral" | "info" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
 }

package/dist/components/tabs.d.ts

@@ -5,7 +5,7 @@ import { Tabs as Tabs$1 } from 'radix-ui';
 
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof Tabs$1.Root>): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "line" | "default" | null | undefined;
+    variant?: "default" | "line" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;

package/package.json

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

package/src/components/__tests__/email-recipient-field.test.tsx

@@ -58,6 +58,53 @@ describe("EmailRecipientField", () => {
     ])
   })
 
+  it("adds an unconfirmed chip on Tab without trapping focus", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField label="To" recipients={[]} onRecipientsChange={onChange} />,
+    )
+
+    const input = getInput()
+    fireEvent.change(input, { target: { value: "tab@example.com" } })
+    const wasNotCancelled = fireEvent.keyDown(input, { key: "Tab" })
+
+    expect(wasNotCancelled).toBe(true)
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "tab@example.com", email: "tab@example.com", name: "", confirmed: false },
+    ])
+  })
+
+  it("adds an unconfirmed chip on blur", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField label="To" recipients={[]} onRecipientsChange={onChange} />,
+    )
+
+    const input = getInput()
+    fireEvent.change(input, { target: { value: "blur@example.com" } })
+    fireEvent.blur(input)
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "blur@example.com", email: "blur@example.com", name: "", confirmed: false },
+    ])
+  })
+
+  it("uses the roomy confirmation chip treatment for unconfirmed recipients", () => {
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[{ id: "a@b.com", email: "a@b.com", name: "Ada Lovelace", confirmed: false }]}
+        onRecipientsChange={vi.fn()}
+      />,
+    )
+
+    const confirmButton = screen.getByRole("button", { name: "Confirm" })
+    expect(confirmButton.className).toContain("bg-amber-200/60")
+    expect(confirmButton.className).toContain("px-2")
+    expect(screen.getByText("Ada Lovelace").className).toContain("font-medium")
+    expect(screen.getByText("a@b.com").className).toContain("text-amber-800/70")
+  })
+
   it("does not add an invalid email", () => {
     const onChange = vi.fn()
     render(

package/src/components/email-recipient-field.tsx

@@ -3,7 +3,6 @@
 import * as React from "react"
 import { Popover as PopoverPrimitive } from "radix-ui"
 import {
-  Check,
   ChevronDown,
   CornerDownLeft,
   Plus,
@@ -75,16 +74,25 @@ function RecipientChipPill({
   onConfirm: () => void
   onRemove: () => void
 }) {
-  const display = recipient.name || recipient.email
+  const primary = recipient.name || recipient.email
+  const secondary = recipient.name ? recipient.email : ""
+  const display = primary || recipient.email
 
   if (!recipient.confirmed) {
     return (
-      <span className="inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-amber-300 bg-amber-50 text-amber-900">
-        <span className="truncate max-w-[180px]">{display}</span>
+      <span className="inline-flex max-w-full items-center gap-1 rounded text-xs border border-amber-300 bg-amber-50 px-2 py-0.5 text-amber-800">
+        <span className="min-w-0 inline-flex items-baseline gap-1">
+          <span className="truncate font-medium max-w-[150px]">{primary}</span>
+          {secondary ? (
+            <span className="truncate max-w-[190px] text-amber-800/70">
+              {secondary}
+            </span>
+          ) : null}
+        </span>
         <button
           type="button"
           onClick={onConfirm}
-          className="text-[10.5px] font-semibold px-[7px] py-0.5 rounded bg-amber-300/50 hover:bg-amber-300/85"
+          className="ml-1 rounded bg-amber-200/60 px-2 py-0.5 text-xs font-semibold text-amber-800 hover:bg-amber-200"
         >
           Confirm
         </button>
@@ -92,7 +100,7 @@ function RecipientChipPill({
           type="button"
           aria-label={`Remove ${display}`}
           onClick={onRemove}
-          className="inline-flex items-center justify-center size-[17px] rounded text-amber-700/80 hover:bg-amber-300/40"
+          className="inline-flex size-4 items-center justify-center rounded text-amber-700/80 hover:bg-amber-200/70"
         >
           <X className="size-3" />
         </button>
@@ -101,16 +109,20 @@ function RecipientChipPill({
   }
 
   return (
-    <span className="inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground">
-      <span className="inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700">
-        <Check className="size-3" />
+    <span className="inline-flex max-w-full items-center gap-1 rounded border border-border bg-background px-2 py-0.5 text-xs text-foreground">
+      <span className="min-w-0 inline-flex items-baseline gap-1">
+        <span className="truncate font-medium max-w-[150px]">{primary}</span>
+        {secondary ? (
+          <span className="truncate max-w-[190px] text-muted-foreground">
+            {secondary}
+          </span>
+        ) : null}
       </span>
-      <span className="truncate max-w-[180px]">{display}</span>
       <button
         type="button"
         aria-label={`Remove ${display}`}
         onClick={onRemove}
-        className="inline-flex items-center justify-center size-[17px] rounded text-muted-foreground hover:bg-muted"
+        className="inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
       >
         <X className="size-3" />
       </button>
@@ -320,23 +332,33 @@ export function EmailRecipientField({
   const resolvedPlaceholder =
     placeholder ?? (recipients.length > 0 ? "Add another..." : "Add email...")
 
-  function addEmail(email: string) {
+  const committedByKeyRef = React.useRef<string | null>(null)
+
+  function addEmail(email: string): boolean {
     const trimmed = email.trim()
-    if (!isValidEmail(trimmed)) return
-    if (added.has(trimmed.toLowerCase())) return
+    if (!isValidEmail(trimmed)) return false
+    if (added.has(trimmed.toLowerCase())) return false
     onRecipientsChange([
       ...recipients,
       { id: trimmed, email: trimmed, name: "", confirmed: false },
     ])
     setValue("")
+    return true
   }
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-    if ((event.key === "Enter" || event.key === ",") && isValidEmail(value)) {
+    if ((event.key === "Enter" || event.key === ",") && value.trim()) {
       event.preventDefault()
       addEmail(value)
       return
     }
+    if (event.key === "Tab" && value.trim()) {
+      const trimmed = value.trim()
+      if (addEmail(trimmed)) {
+        committedByKeyRef.current = trimmed.toLowerCase()
+      }
+      return
+    }
     if (event.key === "Backspace" && value === "" && recipients.length > 0) {
       event.preventDefault()
       onRecipientsChange(recipients.slice(0, -1))
@@ -397,9 +419,14 @@ export function EmailRecipientField({
             onChange={(event) => setValue(event.target.value)}
             onKeyDown={handleKeyDown}
             onBlur={() => {
+              const trimmed = value.trim().toLowerCase()
+              if (trimmed && committedByKeyRef.current === trimmed) {
+                committedByKeyRef.current = null
+                return
+              }
               // Commit any valid pending email so it is not silently dropped
               // when the user clicks Send without pressing Enter/comma first.
-              if (isValidEmail(value)) addEmail(value)
+              addEmail(value)
             }}
             placeholder={resolvedPlaceholder}
             className="min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground"