@handled-ai/design-system 0.18.55 → 0.18.57

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/data-table-filter.d.ts

@@ -24,6 +24,14 @@ interface DataTableOptionFilterCategory extends DataTableFilterCategoryBase {
     options: (string | FilterOption)[];
     /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
     type?: "multi" | "single" | "boolean";
+    /**
+     * When true, the submenu search box is parent-driven: typing fires
+     * `onOptionSearch(categoryId, query)` and the parent is responsible for
+     * supplying the matching `options` (e.g. a server-backed lookup over a large
+     * set). The built-in client-side option filtering is skipped, the search box
+     * is always shown, and `optionSearchLoading[categoryId]` drives a loading row.
+     */
+    remoteSearch?: boolean;
 }
 interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {
     /** Free-text filter behavior. Renders a top-level submenu with a text input. */
@@ -59,7 +67,16 @@ interface DataTableFilterProps {
     textFilters?: Record<string, string>;
     /** Callback when a free-text filter value is applied or cleared. */
     onTextFilterChange?: (categoryId: string, value: string) => void;
+    /**
+     * Fired when the submenu search input changes for a category with
+     * `remoteSearch: true`. The parent should debounce, fetch matching options,
+     * and feed them back via that category's `options`. The empty string is sent
+     * when the box is cleared (or the submenu re-opens) so the parent can reset.
+     */
+    onOptionSearch?: (categoryId: string, query: string) => void;
+    /** Per-category loading state for remote option search, keyed by category id. */
+    optionSearchLoading?: Record<string, boolean>;
 }
-declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, className, optionSearchThreshold, presetFilters, onTogglePreset, presetLabel, conditionFields, conditionFilters, onConditionFiltersChange, conditionBuilderLabel, textFilters, onTextFilterChange, }: DataTableFilterProps): React.JSX.Element;
+declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, className, optionSearchThreshold, presetFilters, onTogglePreset, presetLabel, conditionFields, conditionFilters, onConditionFiltersChange, conditionBuilderLabel, textFilters, onTextFilterChange, onOptionSearch, optionSearchLoading, }: DataTableFilterProps): React.JSX.Element;
 
 export { DataTableFilter, type DataTableFilterCategory, type DataTableFilterProps, type DataTableOptionFilterCategory, type DataTableTextFilterCategory, type FilterOption };

package/dist/components/data-table-filter.js

@@ -163,7 +163,9 @@ function DataTableFilter({
   onConditionFiltersChange,
   conditionBuilderLabel = "Add filter",
   textFilters = {},
-  onTextFilterChange
+  onTextFilterChange,
+  onOptionSearch,
+  optionSearchLoading = {}
 }) {
   const [query, setQuery] = React.useState("");
   const [subQueries, setSubQueries] = React.useState({});
@@ -291,15 +293,17 @@ function DataTableFilter({
               category.id
             );
           }
+          const isRemote = category.remoteSearch === true;
           const subQuery = ((_e = subQueries[category.id]) != null ? _e : "").trim().toLowerCase();
-          const filteredOptions = subQuery ? category.options.filter(
+          const filteredOptions = isRemote || !subQuery ? category.options : category.options.filter(
             (opt) => getOptionLabel(opt).toLowerCase().includes(subQuery)
-          ) : category.options;
-          const shouldShowSubmenuSearch = shouldShowOptionSearch(
+          );
+          const shouldShowSubmenuSearch = isRemote || shouldShowOptionSearch(
             category.searchable,
             category.options.length,
             optionSearchThreshold
           );
+          const isSearching = optionSearchLoading[category.id] === true;
           return /* @__PURE__ */ jsxs(
             DropdownMenuSub,
             {
@@ -310,6 +314,7 @@ function DataTableFilter({
                     delete next[category.id];
                     return next;
                   });
+                  if (isRemote) onOptionSearch == null ? void 0 : onOptionSearch(category.id, "");
                 }
               },
               children: [
@@ -326,7 +331,11 @@ function DataTableFilter({
                         className: "h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted",
                         placeholder: "Search...",
                         value: (_f = subQueries[category.id]) != null ? _f : "",
-                        onChange: (e) => setSubQueries((prev) => __spreadProps(__spreadValues({}, prev), { [category.id]: e.target.value })),
+                        onChange: (e) => {
+                          const next = e.target.value;
+                          setSubQueries((prev) => __spreadProps(__spreadValues({}, prev), { [category.id]: next }));
+                          if (isRemote) onOptionSearch == null ? void 0 : onOptionSearch(category.id, next);
+                        },
                         onClick: (e) => e.stopPropagation(),
                         onKeyDown: (e) => {
                           const navKeys = ["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"];
@@ -359,7 +368,12 @@ function DataTableFilter({
                       value
                     );
                   }),
-                  filteredOptions.length === 0 && category.options.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-2 text-center text-xs text-muted-foreground", children: "No matches" })
+                  isSearching ? /* @__PURE__ */ jsx("div", { className: "p-2 text-center text-xs text-muted-foreground", children: "Searching\u2026" }) : filteredOptions.length === 0 ? (() => {
+                    var _a2;
+                    const typed = ((_a2 = subQueries[category.id]) != null ? _a2 : "").trim().length > 0;
+                    const message = isRemote ? typed ? "No matches" : "Type to search" : category.options.length > 0 ? "No matches" : null;
+                    return message ? /* @__PURE__ */ jsx("div", { className: "p-2 text-center text-xs text-muted-foreground", children: message }) : null;
+                  })() : null
                 ] })
               ]
             },

package/dist/components/data-table-filter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ListFilter, Plus, Search } from \"lucide-react\"\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DataTableConditionFilter,\n  shouldShowOptionSearch,\n  type ConditionFieldDef,\n  type ConditionFilterValue,\n} from \"./data-table-condition-filter\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterOption {\n  label: string\n  value: string\n}\n\ninterface DataTableFilterCategoryBase {\n  id: string\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  /**\n   * Submenu search behavior. Defaults to the DataTableFilter\n   * optionSearchThreshold prop. Use true to always show search or false to\n   * hide it for a specific category.\n   */\n  searchable?: boolean | { threshold?: number }\n}\n\nexport interface DataTableOptionFilterCategory extends DataTableFilterCategoryBase {\n  options: (string | FilterOption)[]\n  /** Filter behavior. Defaults to \"multi\" (checkbox multi-select). */\n  type?: \"multi\" | \"single\" | \"boolean\"\n}\n\nexport interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {\n  /** Free-text filter behavior. Renders a top-level submenu with a text input. */\n  type: \"text\"\n  /** Placeholder shown in the text filter input. */\n  valuePlaceholder?: string\n  /** Not used for text filters; optional for backwards-compatible category shapes. */\n  options?: (string | FilterOption)[]\n}\n\nexport type DataTableFilterCategory =\n  | DataTableOptionFilterCategory\n  | DataTableTextFilterCategory\n\nfunction getOptionValue(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.value\n}\nfunction getOptionLabel(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.label\n}\n\nfunction isTextFilterCategory(\n  category: DataTableFilterCategory\n): category is DataTableTextFilterCategory {\n  return category.type === \"text\"\n}\n\nfunction TextFilterSubmenu({\n  category,\n  value,\n  onValueChange,\n}: {\n  category: DataTableTextFilterCategory\n  value: string\n  onValueChange?: (categoryId: string, value: string) => void\n}) {\n  const [draftValue, setDraftValue] = React.useState(value)\n\n  React.useEffect(() => {\n    setDraftValue(value)\n  }, [value])\n\n  const active = value.trim().length > 0\n  const applyValue = React.useCallback(() => {\n    onValueChange?.(category.id, draftValue.trim())\n  }, [category.id, draftValue, onValueChange])\n\n  return (\n    <DropdownMenuSub\n      onOpenChange={(open) => {\n        if (!open) {\n          setDraftValue(value)\n        }\n      }}\n    >\n      <DropdownMenuSubTrigger\n        className={cn(\n          \"cursor-pointer py-1.5 text-xs\",\n          active && \"text-brand-purple\"\n        )}\n      >\n        <category.icon\n          className={cn(\n            \"mr-2 h-3.5 w-3.5 text-muted-foreground\",\n            active && \"text-brand-purple\"\n          )}\n        />\n        {category.label}\n        {active ? <Check className=\"ml-auto h-4 w-4\" /> : null}\n      </DropdownMenuSubTrigger>\n      <DropdownMenuSubContent className=\"w-64 p-2\">\n        <div className=\"space-y-2\">\n          <input\n            aria-label={category.label}\n            className=\"h-8 w-full rounded-md bg-muted/50 px-2 py-1 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n            placeholder={\n              category.valuePlaceholder ??\n              `Enter ${category.label.toLowerCase()}...`\n            }\n            value={draftValue}\n            onChange={(event) => setDraftValue(event.target.value)}\n            onClick={(event) => event.stopPropagation()}\n            onKeyDown={(event) => {\n              event.stopPropagation()\n              if (event.key === \"Enter\") {\n                event.preventDefault()\n                applyValue()\n              }\n            }}\n          />\n          <div className=\"flex items-center justify-end gap-2\">\n            {active ? (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-7 px-2 text-xs\"\n                onClick={(event) => {\n                  event.preventDefault()\n                  event.stopPropagation()\n                  setDraftValue(\"\")\n                  onValueChange?.(category.id, \"\")\n                }}\n              >\n                Clear\n              </Button>\n            ) : null}\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              className=\"h-7 px-2 text-xs\"\n              onClick={(event) => {\n                event.preventDefault()\n                event.stopPropagation()\n                applyValue()\n              }}\n            >\n              Apply\n            </Button>\n          </div>\n        </div>\n      </DropdownMenuSubContent>\n    </DropdownMenuSub>\n  )\n}\n\nexport interface DataTableFilterProps {\n  categories: DataTableFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n  className?: string\n  /** Minimum number of options before showing the sub-menu search input. Defaults to 8. */\n  optionSearchThreshold?: number\n  /** Filters applied by default. Shown as distinct chips that can be toggled off but not dismissed. */\n  presetFilters?: Record<string, string[]>\n  /** Callback when a preset filter is toggled on/off. */\n  onTogglePreset?: (categoryId: string, option: string) => void\n  /** Label shown on preset chips to distinguish from user-applied filters. Default: \"Default\". */\n  presetLabel?: string\n  /** Fields exposed in the unified condition-builder panel. */\n  conditionFields?: ConditionFieldDef[]\n  /** Active builder-managed field/operator/value conditions. */\n  conditionFilters?: ConditionFilterValue[]\n  /** Callback when builder-managed conditions are applied, removed, or cleared. */\n  onConditionFiltersChange?: (conditions: ConditionFilterValue[]) => void\n  /** Dropdown entry label for the condition-builder panel. Default: \"Add filter\". */\n  conditionBuilderLabel?: string\n  /** Active free-text filters keyed by category id. */\n  textFilters?: Record<string, string>\n  /** Callback when a free-text filter value is applied or cleared. */\n  onTextFilterChange?: (categoryId: string, value: string) => void\n}\n\nexport function DataTableFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n  className,\n  optionSearchThreshold = 8,\n  presetFilters,\n  onTogglePreset,\n  presetLabel = \"Default\",\n  conditionFields = [],\n  conditionFilters = [],\n  onConditionFiltersChange,\n  conditionBuilderLabel = \"Add filter\",\n  textFilters = {},\n  onTextFilterChange,\n}: DataTableFilterProps) {\n  const [query, setQuery] = React.useState(\"\")\n  const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})\n  const [conditionBuilderOpen, setConditionBuilderOpen] = React.useState(false)\n  const hasConditionBuilder = conditionFields.length > 0\n\n  const visibleCategories = React.useMemo(() => {\n    const normalized = query.trim().toLowerCase()\n    if (!normalized) {\n      return categories\n    }\n\n    return categories.filter((category) => {\n      if (category.label.toLowerCase().includes(normalized)) {\n        return true\n      }\n\n      if (isTextFilterCategory(category)) {\n        return false\n      }\n\n      return category.options.some((option) =>\n        getOptionLabel(option).toLowerCase().includes(normalized)\n      )\n    })\n  }, [categories, query])\n\n  /** Check if a specific option is a preset filter */\n  const isPresetOption = React.useCallback(\n    (categoryId: string, value: string): boolean => {\n      return presetFilters?.[categoryId]?.includes(value) ?? false\n    },\n    [presetFilters]\n  )\n\n  const activeCount = React.useMemo(() => {\n    const userCount = Object.values(selectedFilters).reduce(\n      (count, selected) => count + selected.length,\n      0\n    )\n\n    const textCount = categories.reduce((count, category) => {\n      if (!isTextFilterCategory(category)) {\n        return count\n      }\n\n      return textFilters[category.id]?.trim() ? count + 1 : count\n    }, 0)\n\n    return userCount + conditionFilters.length + textCount\n  }, [categories, selectedFilters, conditionFilters.length, textFilters])\n\n  /** Collect all preset chips to render */\n  const presetChips = React.useMemo(() => {\n    if (!presetFilters) return []\n\n    const chips: { categoryId: string; value: string; label: string; active: boolean }[] = []\n\n    for (const [categoryId, values] of Object.entries(presetFilters)) {\n      const category = categories.find((c) => c.id === categoryId)\n      for (const value of values) {\n        const option = category && !isTextFilterCategory(category)\n          ? category.options.find((opt) => getOptionValue(opt) === value)\n          : undefined\n        const label = option ? getOptionLabel(option) : value\n        const active = selectedFilters[categoryId]?.includes(value) ?? false\n        chips.push({ categoryId, value, label, active })\n      }\n    }\n\n    return chips\n  }, [presetFilters, categories, selectedFilters])\n\n  const triggerButton = (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className={cn(\n            \"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\",\n            className\n          )}\n        >\n          <ListFilter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold text-foreground\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n        <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <input\n              className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n              placeholder=\"Search filters...\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            />\n          </div>\n        </div>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-1\">\n          {visibleCategories.map((category) => {\n            const filterType = category.type ?? \"multi\"\n\n            /* ── Boolean toggle ─────────────────────────────────── */\n            if (filterType === \"boolean\") {\n              const active = selectedFilters[category.id]?.includes(\"true\") ?? false\n              return (\n                <DropdownMenuItem\n                  key={category.id}\n                  className={cn(\n                    \"cursor-pointer py-1.5 text-xs\",\n                    active && \"text-brand-purple\"\n                  )}\n                  onSelect={(event) => {\n                    event.preventDefault()\n                    onToggleFilter(category.id, \"true\")\n                  }}\n                >\n                  <category.icon className=\"mr-2 h-3.5 w-3.5\" />\n                  {category.label}\n                  {active ? <Check className=\"ml-auto h-4 w-4\" /> : null}\n                </DropdownMenuItem>\n              )\n            }\n\n            /* ── Free-text submenu ───────────────────────────────── */\n            if (isTextFilterCategory(category)) {\n              return (\n                <TextFilterSubmenu\n                  key={category.id}\n                  category={category}\n                  value={textFilters[category.id] ?? \"\"}\n                  onValueChange={onTextFilterChange}\n                />\n              )\n            }\n\n            /* ── Sub-menu (single / multi) ──────────────────────── */\n            const subQuery = (subQueries[category.id] ?? \"\").trim().toLowerCase()\n            const filteredOptions = subQuery\n              ? category.options.filter((opt) =>\n                  getOptionLabel(opt).toLowerCase().includes(subQuery)\n                )\n              : category.options\n            const shouldShowSubmenuSearch = shouldShowOptionSearch(\n              category.searchable,\n              category.options.length,\n              optionSearchThreshold,\n            )\n\n            return (\n              <DropdownMenuSub\n                key={category.id}\n                onOpenChange={(open) => {\n                  if (!open) {\n                    setSubQueries((prev) => {\n                      const next = { ...prev }\n                      delete next[category.id]\n                      return next\n                    })\n                  }\n                }}\n              >\n                <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n                  <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                  {category.label}\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent className=\"max-h-[320px] w-52 overflow-y-auto p-1\">\n                  {/* Submenu search — shown for long lists or categories that opt in. */}\n                  {shouldShowSubmenuSearch && (\n                    <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1.5\">\n                      <div className=\"relative\">\n                        <Search className=\"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground\" />\n                        <input\n                          className=\"h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n                          placeholder=\"Search...\"\n                          value={subQueries[category.id] ?? \"\"}\n                          onChange={(e) =>\n                            setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))\n                          }\n                          onClick={(e) => e.stopPropagation()}\n                          onKeyDown={(e) => {\n                            // Allow navigation keys to propagate to Radix menu handling\n                            // so keyboard users can move to and select filtered options.\n                            const navKeys = [\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\", \"Tab\"]\n                            if (!navKeys.includes(e.key)) {\n                              e.stopPropagation()\n                            }\n                          }}\n                        />\n                      </div>\n                    </div>\n                  )}\n                  {/* Filtered options */}\n                  {filteredOptions.map((option) => {\n                    const value = getOptionValue(option)\n                    const label = getOptionLabel(option)\n                    const selected = selectedFilters[category.id]?.includes(value) ?? false\n                    const isPreset = isPresetOption(category.id, value)\n                    return (\n                      <DropdownMenuItem\n                        key={value}\n                        className=\"cursor-pointer justify-between text-xs\"\n                        onSelect={(event) => {\n                          event.preventDefault()\n                          onToggleFilter(category.id, value)\n                        }}\n                      >\n                        {label}\n                        {selected ? (\n                          isPreset ? (\n                            <span className=\"text-brand-purple text-[10px] font-semibold\">\n                              {presetLabel}\n                            </span>\n                          ) : filterType === \"single\" ? (\n                            <span className=\"h-1.5 w-1.5 rounded-full bg-current\" />\n                          ) : (\n                            <span className=\"text-[10px] font-semibold text-brand-purple\">\n                              Applied\n                            </span>\n                          )\n                        ) : null}\n                      </DropdownMenuItem>\n                    )\n                  })}\n                  {filteredOptions.length === 0 && category.options.length > 0 && (\n                    <div className=\"p-2 text-center text-xs text-muted-foreground\">\n                      No matches\n                    </div>\n                  )}\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            )\n          })}\n\n          {visibleCategories.length === 0 ? (\n            <div className=\"p-2 text-center text-xs text-muted-foreground\">\n              No filters found\n            </div>\n          ) : null}\n        </div>\n\n        {hasConditionBuilder ? (\n          <div className=\"border-t border-border p-1\">\n            <PopoverPrimitive.Root\n              open={conditionBuilderOpen}\n              onOpenChange={setConditionBuilderOpen}\n            >\n              <PopoverPrimitive.Trigger asChild>\n                <DropdownMenuItem\n                  className=\"cursor-pointer py-1.5 text-xs\"\n                  onSelect={(event) => {\n                    event.preventDefault()\n                    setConditionBuilderOpen(true)\n                  }}\n                >\n                  <Plus className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                  {conditionBuilderLabel}\n                  {conditionFilters.length > 0 ? (\n                    <span className=\"ml-auto rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n                      {conditionFilters.length}\n                    </span>\n                  ) : null}\n                </DropdownMenuItem>\n              </PopoverPrimitive.Trigger>\n              <PopoverPrimitive.Portal>\n                <PopoverPrimitive.Content\n                  align=\"start\"\n                  side=\"right\"\n                  sideOffset={8}\n                  className=\"z-50 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\"\n                  onEscapeKeyDown={() => setConditionBuilderOpen(false)}\n                  onInteractOutside={(event) => {\n                    const target = event.target as HTMLElement | null\n                    if (target?.closest('[data-slot=\"dropdown-menu-content\"]')) {\n                      event.preventDefault()\n                    }\n                  }}\n                >\n                  <DataTableConditionFilter\n                    fields={conditionFields}\n                    conditions={conditionFilters}\n                    onConditionsChange={onConditionFiltersChange ?? (() => {})}\n                  />\n                </PopoverPrimitive.Content>\n              </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n          </div>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n\n  // If there are preset chips, wrap trigger + chips together\n  if (presetChips.length > 0) {\n    return (\n      <div className=\"flex flex-wrap items-center gap-1.5\">\n        {triggerButton}\n        {presetChips.map((chip) => (\n          <button\n            key={`${chip.categoryId}-${chip.value}`}\n            type=\"button\"\n            onClick={() => onTogglePreset?.(chip.categoryId, chip.value)}\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors\",\n              chip.active\n                ? \"border-dashed border-brand-purple/30 bg-brand-purple/5 text-brand-purple/80\"\n                : \"border-border/40 bg-transparent text-muted-foreground/60 line-through\"\n            )}\n          >\n            <span className=\"text-brand-purple/50 text-[10px]\">\n              {presetLabel}:{\" \"}\n            </span>\n            {chip.label}\n          </button>\n        ))}\n      </div>\n    )\n  }\n\n  return triggerButton\n}\n"],"mappings":"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","names":["_a","_b"]}
+{"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ListFilter, Plus, Search } from \"lucide-react\"\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DataTableConditionFilter,\n  shouldShowOptionSearch,\n  type ConditionFieldDef,\n  type ConditionFilterValue,\n} from \"./data-table-condition-filter\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterOption {\n  label: string\n  value: string\n}\n\ninterface DataTableFilterCategoryBase {\n  id: string\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  /**\n   * Submenu search behavior. Defaults to the DataTableFilter\n   * optionSearchThreshold prop. Use true to always show search or false to\n   * hide it for a specific category.\n   */\n  searchable?: boolean | { threshold?: number }\n}\n\nexport interface DataTableOptionFilterCategory extends DataTableFilterCategoryBase {\n  options: (string | FilterOption)[]\n  /** Filter behavior. Defaults to \"multi\" (checkbox multi-select). */\n  type?: \"multi\" | \"single\" | \"boolean\"\n  /**\n   * When true, the submenu search box is parent-driven: typing fires\n   * `onOptionSearch(categoryId, query)` and the parent is responsible for\n   * supplying the matching `options` (e.g. a server-backed lookup over a large\n   * set). The built-in client-side option filtering is skipped, the search box\n   * is always shown, and `optionSearchLoading[categoryId]` drives a loading row.\n   */\n  remoteSearch?: boolean\n}\n\nexport interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {\n  /** Free-text filter behavior. Renders a top-level submenu with a text input. */\n  type: \"text\"\n  /** Placeholder shown in the text filter input. */\n  valuePlaceholder?: string\n  /** Not used for text filters; optional for backwards-compatible category shapes. */\n  options?: (string | FilterOption)[]\n}\n\nexport type DataTableFilterCategory =\n  | DataTableOptionFilterCategory\n  | DataTableTextFilterCategory\n\nfunction getOptionValue(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.value\n}\nfunction getOptionLabel(option: string | FilterOption): string {\n  return typeof option === \"string\" ? option : option.label\n}\n\nfunction isTextFilterCategory(\n  category: DataTableFilterCategory\n): category is DataTableTextFilterCategory {\n  return category.type === \"text\"\n}\n\nfunction TextFilterSubmenu({\n  category,\n  value,\n  onValueChange,\n}: {\n  category: DataTableTextFilterCategory\n  value: string\n  onValueChange?: (categoryId: string, value: string) => void\n}) {\n  const [draftValue, setDraftValue] = React.useState(value)\n\n  React.useEffect(() => {\n    setDraftValue(value)\n  }, [value])\n\n  const active = value.trim().length > 0\n  const applyValue = React.useCallback(() => {\n    onValueChange?.(category.id, draftValue.trim())\n  }, [category.id, draftValue, onValueChange])\n\n  return (\n    <DropdownMenuSub\n      onOpenChange={(open) => {\n        if (!open) {\n          setDraftValue(value)\n        }\n      }}\n    >\n      <DropdownMenuSubTrigger\n        className={cn(\n          \"cursor-pointer py-1.5 text-xs\",\n          active && \"text-brand-purple\"\n        )}\n      >\n        <category.icon\n          className={cn(\n            \"mr-2 h-3.5 w-3.5 text-muted-foreground\",\n            active && \"text-brand-purple\"\n          )}\n        />\n        {category.label}\n        {active ? <Check className=\"ml-auto h-4 w-4\" /> : null}\n      </DropdownMenuSubTrigger>\n      <DropdownMenuSubContent className=\"w-64 p-2\">\n        <div className=\"space-y-2\">\n          <input\n            aria-label={category.label}\n            className=\"h-8 w-full rounded-md bg-muted/50 px-2 py-1 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n            placeholder={\n              category.valuePlaceholder ??\n              `Enter ${category.label.toLowerCase()}...`\n            }\n            value={draftValue}\n            onChange={(event) => setDraftValue(event.target.value)}\n            onClick={(event) => event.stopPropagation()}\n            onKeyDown={(event) => {\n              event.stopPropagation()\n              if (event.key === \"Enter\") {\n                event.preventDefault()\n                applyValue()\n              }\n            }}\n          />\n          <div className=\"flex items-center justify-end gap-2\">\n            {active ? (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-7 px-2 text-xs\"\n                onClick={(event) => {\n                  event.preventDefault()\n                  event.stopPropagation()\n                  setDraftValue(\"\")\n                  onValueChange?.(category.id, \"\")\n                }}\n              >\n                Clear\n              </Button>\n            ) : null}\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              className=\"h-7 px-2 text-xs\"\n              onClick={(event) => {\n                event.preventDefault()\n                event.stopPropagation()\n                applyValue()\n              }}\n            >\n              Apply\n            </Button>\n          </div>\n        </div>\n      </DropdownMenuSubContent>\n    </DropdownMenuSub>\n  )\n}\n\nexport interface DataTableFilterProps {\n  categories: DataTableFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n  className?: string\n  /** Minimum number of options before showing the sub-menu search input. Defaults to 8. */\n  optionSearchThreshold?: number\n  /** Filters applied by default. Shown as distinct chips that can be toggled off but not dismissed. */\n  presetFilters?: Record<string, string[]>\n  /** Callback when a preset filter is toggled on/off. */\n  onTogglePreset?: (categoryId: string, option: string) => void\n  /** Label shown on preset chips to distinguish from user-applied filters. Default: \"Default\". */\n  presetLabel?: string\n  /** Fields exposed in the unified condition-builder panel. */\n  conditionFields?: ConditionFieldDef[]\n  /** Active builder-managed field/operator/value conditions. */\n  conditionFilters?: ConditionFilterValue[]\n  /** Callback when builder-managed conditions are applied, removed, or cleared. */\n  onConditionFiltersChange?: (conditions: ConditionFilterValue[]) => void\n  /** Dropdown entry label for the condition-builder panel. Default: \"Add filter\". */\n  conditionBuilderLabel?: string\n  /** Active free-text filters keyed by category id. */\n  textFilters?: Record<string, string>\n  /** Callback when a free-text filter value is applied or cleared. */\n  onTextFilterChange?: (categoryId: string, value: string) => void\n  /**\n   * Fired when the submenu search input changes for a category with\n   * `remoteSearch: true`. The parent should debounce, fetch matching options,\n   * and feed them back via that category's `options`. The empty string is sent\n   * when the box is cleared (or the submenu re-opens) so the parent can reset.\n   */\n  onOptionSearch?: (categoryId: string, query: string) => void\n  /** Per-category loading state for remote option search, keyed by category id. */\n  optionSearchLoading?: Record<string, boolean>\n}\n\nexport function DataTableFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n  className,\n  optionSearchThreshold = 8,\n  presetFilters,\n  onTogglePreset,\n  presetLabel = \"Default\",\n  conditionFields = [],\n  conditionFilters = [],\n  onConditionFiltersChange,\n  conditionBuilderLabel = \"Add filter\",\n  textFilters = {},\n  onTextFilterChange,\n  onOptionSearch,\n  optionSearchLoading = {},\n}: DataTableFilterProps) {\n  const [query, setQuery] = React.useState(\"\")\n  const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})\n  const [conditionBuilderOpen, setConditionBuilderOpen] = React.useState(false)\n  const hasConditionBuilder = conditionFields.length > 0\n\n  const visibleCategories = React.useMemo(() => {\n    const normalized = query.trim().toLowerCase()\n    if (!normalized) {\n      return categories\n    }\n\n    return categories.filter((category) => {\n      if (category.label.toLowerCase().includes(normalized)) {\n        return true\n      }\n\n      if (isTextFilterCategory(category)) {\n        return false\n      }\n\n      return category.options.some((option) =>\n        getOptionLabel(option).toLowerCase().includes(normalized)\n      )\n    })\n  }, [categories, query])\n\n  /** Check if a specific option is a preset filter */\n  const isPresetOption = React.useCallback(\n    (categoryId: string, value: string): boolean => {\n      return presetFilters?.[categoryId]?.includes(value) ?? false\n    },\n    [presetFilters]\n  )\n\n  const activeCount = React.useMemo(() => {\n    const userCount = Object.values(selectedFilters).reduce(\n      (count, selected) => count + selected.length,\n      0\n    )\n\n    const textCount = categories.reduce((count, category) => {\n      if (!isTextFilterCategory(category)) {\n        return count\n      }\n\n      return textFilters[category.id]?.trim() ? count + 1 : count\n    }, 0)\n\n    return userCount + conditionFilters.length + textCount\n  }, [categories, selectedFilters, conditionFilters.length, textFilters])\n\n  /** Collect all preset chips to render */\n  const presetChips = React.useMemo(() => {\n    if (!presetFilters) return []\n\n    const chips: { categoryId: string; value: string; label: string; active: boolean }[] = []\n\n    for (const [categoryId, values] of Object.entries(presetFilters)) {\n      const category = categories.find((c) => c.id === categoryId)\n      for (const value of values) {\n        const option = category && !isTextFilterCategory(category)\n          ? category.options.find((opt) => getOptionValue(opt) === value)\n          : undefined\n        const label = option ? getOptionLabel(option) : value\n        const active = selectedFilters[categoryId]?.includes(value) ?? false\n        chips.push({ categoryId, value, label, active })\n      }\n    }\n\n    return chips\n  }, [presetFilters, categories, selectedFilters])\n\n  const triggerButton = (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className={cn(\n            \"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\",\n            className\n          )}\n        >\n          <ListFilter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold text-foreground\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n        <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <input\n              className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n              placeholder=\"Search filters...\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            />\n          </div>\n        </div>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-1\">\n          {visibleCategories.map((category) => {\n            const filterType = category.type ?? \"multi\"\n\n            /* ── Boolean toggle ─────────────────────────────────── */\n            if (filterType === \"boolean\") {\n              const active = selectedFilters[category.id]?.includes(\"true\") ?? false\n              return (\n                <DropdownMenuItem\n                  key={category.id}\n                  className={cn(\n                    \"cursor-pointer py-1.5 text-xs\",\n                    active && \"text-brand-purple\"\n                  )}\n                  onSelect={(event) => {\n                    event.preventDefault()\n                    onToggleFilter(category.id, \"true\")\n                  }}\n                >\n                  <category.icon className=\"mr-2 h-3.5 w-3.5\" />\n                  {category.label}\n                  {active ? <Check className=\"ml-auto h-4 w-4\" /> : null}\n                </DropdownMenuItem>\n              )\n            }\n\n            /* ── Free-text submenu ───────────────────────────────── */\n            if (isTextFilterCategory(category)) {\n              return (\n                <TextFilterSubmenu\n                  key={category.id}\n                  category={category}\n                  value={textFilters[category.id] ?? \"\"}\n                  onValueChange={onTextFilterChange}\n                />\n              )\n            }\n\n            /* ── Sub-menu (single / multi) ──────────────────────── */\n            const isRemote = category.remoteSearch === true\n            const subQuery = (subQueries[category.id] ?? \"\").trim().toLowerCase()\n            // Remote-search categories are filtered by the parent (server-side);\n            // never client-filter their options.\n            const filteredOptions = isRemote || !subQuery\n              ? category.options\n              : category.options.filter((opt) =>\n                  getOptionLabel(opt).toLowerCase().includes(subQuery)\n                )\n            const shouldShowSubmenuSearch = isRemote || shouldShowOptionSearch(\n              category.searchable,\n              category.options.length,\n              optionSearchThreshold,\n            )\n            const isSearching = optionSearchLoading[category.id] === true\n\n            return (\n              <DropdownMenuSub\n                key={category.id}\n                onOpenChange={(open) => {\n                  if (!open) {\n                    setSubQueries((prev) => {\n                      const next = { ...prev }\n                      delete next[category.id]\n                      return next\n                    })\n                    // Reset the parent's remote results so re-opening starts clean.\n                    if (isRemote) onOptionSearch?.(category.id, \"\")\n                  }\n                }}\n              >\n                <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n                  <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                  {category.label}\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent className=\"max-h-[320px] w-52 overflow-y-auto p-1\">\n                  {/* Submenu search — shown for long lists or categories that opt in. */}\n                  {shouldShowSubmenuSearch && (\n                    <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-1.5\">\n                      <div className=\"relative\">\n                        <Search className=\"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground\" />\n                        <input\n                          className=\"h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n                          placeholder=\"Search...\"\n                          value={subQueries[category.id] ?? \"\"}\n                          onChange={(e) => {\n                            const next = e.target.value\n                            setSubQueries((prev) => ({ ...prev, [category.id]: next }))\n                            if (isRemote) onOptionSearch?.(category.id, next)\n                          }}\n                          onClick={(e) => e.stopPropagation()}\n                          onKeyDown={(e) => {\n                            // Allow navigation keys to propagate to Radix menu handling\n                            // so keyboard users can move to and select filtered options.\n                            const navKeys = [\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\", \"Tab\"]\n                            if (!navKeys.includes(e.key)) {\n                              e.stopPropagation()\n                            }\n                          }}\n                        />\n                      </div>\n                    </div>\n                  )}\n                  {/* Filtered options */}\n                  {filteredOptions.map((option) => {\n                    const value = getOptionValue(option)\n                    const label = getOptionLabel(option)\n                    const selected = selectedFilters[category.id]?.includes(value) ?? false\n                    const isPreset = isPresetOption(category.id, value)\n                    return (\n                      <DropdownMenuItem\n                        key={value}\n                        className=\"cursor-pointer justify-between text-xs\"\n                        onSelect={(event) => {\n                          event.preventDefault()\n                          onToggleFilter(category.id, value)\n                        }}\n                      >\n                        {label}\n                        {selected ? (\n                          isPreset ? (\n                            <span className=\"text-brand-purple text-[10px] font-semibold\">\n                              {presetLabel}\n                            </span>\n                          ) : filterType === \"single\" ? (\n                            <span className=\"h-1.5 w-1.5 rounded-full bg-current\" />\n                          ) : (\n                            <span className=\"text-[10px] font-semibold text-brand-purple\">\n                              Applied\n                            </span>\n                          )\n                        ) : null}\n                      </DropdownMenuItem>\n                    )\n                  })}\n                  {isSearching ? (\n                    <div className=\"p-2 text-center text-xs text-muted-foreground\">\n                      Searching…\n                    </div>\n                  ) : filteredOptions.length === 0 ? (\n                    (() => {\n                      const typed = (subQueries[category.id] ?? \"\").trim().length > 0\n                      const message = isRemote\n                        ? typed\n                          ? \"No matches\"\n                          : \"Type to search\"\n                        : category.options.length > 0\n                          ? \"No matches\"\n                          : null\n                      return message ? (\n                        <div className=\"p-2 text-center text-xs text-muted-foreground\">\n                          {message}\n                        </div>\n                      ) : null\n                    })()\n                  ) : null}\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            )\n          })}\n\n          {visibleCategories.length === 0 ? (\n            <div className=\"p-2 text-center text-xs text-muted-foreground\">\n              No filters found\n            </div>\n          ) : null}\n        </div>\n\n        {hasConditionBuilder ? (\n          <div className=\"border-t border-border p-1\">\n            <PopoverPrimitive.Root\n              open={conditionBuilderOpen}\n              onOpenChange={setConditionBuilderOpen}\n            >\n              <PopoverPrimitive.Trigger asChild>\n                <DropdownMenuItem\n                  className=\"cursor-pointer py-1.5 text-xs\"\n                  onSelect={(event) => {\n                    event.preventDefault()\n                    setConditionBuilderOpen(true)\n                  }}\n                >\n                  <Plus className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                  {conditionBuilderLabel}\n                  {conditionFilters.length > 0 ? (\n                    <span className=\"ml-auto rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n                      {conditionFilters.length}\n                    </span>\n                  ) : null}\n                </DropdownMenuItem>\n              </PopoverPrimitive.Trigger>\n              <PopoverPrimitive.Portal>\n                <PopoverPrimitive.Content\n                  align=\"start\"\n                  side=\"right\"\n                  sideOffset={8}\n                  className=\"z-50 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\"\n                  onEscapeKeyDown={() => setConditionBuilderOpen(false)}\n                  onInteractOutside={(event) => {\n                    const target = event.target as HTMLElement | null\n                    if (target?.closest('[data-slot=\"dropdown-menu-content\"]')) {\n                      event.preventDefault()\n                    }\n                  }}\n                >\n                  <DataTableConditionFilter\n                    fields={conditionFields}\n                    conditions={conditionFilters}\n                    onConditionsChange={onConditionFiltersChange ?? (() => {})}\n                  />\n                </PopoverPrimitive.Content>\n              </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n          </div>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n\n  // If there are preset chips, wrap trigger + chips together\n  if (presetChips.length > 0) {\n    return (\n      <div className=\"flex flex-wrap items-center gap-1.5\">\n        {triggerButton}\n        {presetChips.map((chip) => (\n          <button\n            key={`${chip.categoryId}-${chip.value}`}\n            type=\"button\"\n            onClick={() => onTogglePreset?.(chip.categoryId, chip.value)}\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors\",\n              chip.active\n                ? \"border-dashed border-brand-purple/30 bg-brand-purple/5 text-brand-purple/80\"\n                : \"border-border/40 bg-transparent text-muted-foreground/60 line-through\"\n            )}\n          >\n            <span className=\"text-brand-purple/50 text-[10px]\">\n              {presetLabel}:{\" \"}\n            </span>\n            {chip.label}\n          </button>\n        ))}\n      </div>\n    )\n  }\n\n  return triggerButton\n}\n"],"mappings":"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","names":["_a","_b"]}

package/dist/components/email-preview-card.js

@@ -19,15 +19,15 @@ function EmailPreviewCard({
   signatureHtml,
   className
 }) {
-  const recipientLabel = to || "the recipient";
+  const recipientLabel = to ? `${to}'s` : "the recipient's";
   const bodyHtml = htmlBody != null ? htmlBody : textBody ? escapeHtml(textBody) : "";
   return /* @__PURE__ */ jsxs("div", { className: cn("p-4 bg-muted/30 min-h-full", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Eye, { className: "size-4 shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsxs("span", { children: [
-        "This is a preview for ",
+        "This is how your email lands in ",
         recipientLabel,
-        ". Nothing has been sent yet."
+        " inbox. Nothing has been sent yet."
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "bg-background border rounded-xl shadow-sm overflow-hidden", children: [
@@ -48,27 +48,20 @@ function EmailPreviewCard({
         ] }),
         /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground shrink-0", children: "just now" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 px-[18px] pt-3 pb-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "size-9 shrink-0", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "text-[13.5px] leading-relaxed whitespace-pre-wrap",
-              "data-testid": "email-preview-body",
-              dangerouslySetInnerHTML: { __html: bodyHtml }
-            }
-          ),
-          signatureHtml ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "border-t border-border/50 pt-3 text-xs leading-relaxed text-muted-foreground",
-              "data-testid": "email-preview-signature",
-              dangerouslySetInnerHTML: { __html: signatureHtml }
-            }
-          ) : null
-        ] })
-      ] })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap",
+          dangerouslySetInnerHTML: { __html: bodyHtml }
+        }
+      ),
+      signatureHtml ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground",
+          dangerouslySetInnerHTML: { __html: signatureHtml }
+        }
+      ) : null
     ] })
   ] });
 }

package/dist/components/email-preview-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/email-preview-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Eye } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface EmailPreviewCardProps {\n  from: { name: string; email: string }\n  to?: string\n  subject?: string\n  htmlBody?: string\n  textBody?: string\n  signatureHtml?: string | null\n  className?: string\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\")\n}\n\nexport function EmailPreviewCard({\n  from,\n  to,\n  subject,\n  htmlBody,\n  textBody,\n  signatureHtml,\n  className,\n}: EmailPreviewCardProps) {\n  const recipientLabel = to || \"the recipient\"\n  const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : \"\")\n\n  return (\n    <div className={cn(\"p-4 bg-muted/30 min-h-full\", className)}>\n      <div className=\"flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground\">\n        <Eye className=\"size-4 shrink-0 mt-0.5\" />\n        <span>\n          This is a preview for {recipientLabel}. Nothing has been sent yet.\n        </span>\n      </div>\n\n      <div className=\"bg-background border rounded-xl shadow-sm overflow-hidden\">\n        <div className=\"px-[18px] pt-4 pb-3 text-base font-semibold border-b border-border/50\">\n          {subject || \"(no subject)\"}\n        </div>\n\n        <div className=\"flex items-center gap-3 px-[18px] pt-3\">\n          <div className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-semibold\">\n            {getInitials(from.name)}\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-sm\">\n              <span className=\"font-semibold text-foreground\">{from.name}</span>{\" \"}\n              <span className=\"text-muted-foreground\">&lt;{from.email}&gt;</span>\n            </div>\n            <div className=\"text-xs text-muted-foreground\">\n              {to ? `to ${to}` : \"to no recipient yet\"}\n            </div>\n          </div>\n          <div className=\"text-xs text-muted-foreground shrink-0\">just now</div>\n        </div>\n\n        <div className=\"flex gap-3 px-[18px] pt-3 pb-4\">\n          <div className=\"size-9 shrink-0\" aria-hidden=\"true\" />\n          <div className=\"min-w-0 flex-1 space-y-3\">\n            <div\n              className=\"text-[13.5px] leading-relaxed whitespace-pre-wrap\"\n              data-testid=\"email-preview-body\"\n              dangerouslySetInnerHTML={{ __html: bodyHtml }}\n            />\n\n            {signatureHtml ? (\n              <div\n                className=\"border-t border-border/50 pt-3 text-xs leading-relaxed text-muted-foreground\"\n                data-testid=\"email-preview-signature\"\n                dangerouslySetInnerHTML={{ __html: signatureHtml }}\n              />\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAmDQ,cACA,YADA;AAhDR,SAAS,WAAW;AAEpB,SAAS,UAAU;AAYnB,SAAS,YAAY,MAAsB;AACzC,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,SAAS,WAAW,MAAsB;AACxC,SAAO,KACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,QAAQ,EACtB,QAAQ,MAAM,OAAO;AAC1B;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,iBAAiB,MAAM;AAC7B,QAAM,WAAW,8BAAa,WAAW,WAAW,QAAQ,IAAI;AAEhE,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACxD;AAAA,yBAAC,SAAI,WAAU,+GACb;AAAA,0BAAC,OAAI,WAAU,0BAAyB;AAAA,MACxC,qBAAC,UAAK;AAAA;AAAA,QACmB;AAAA,QAAe;AAAA,SACxC;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,6DACb;AAAA,0BAAC,SAAI,WAAU,yEACZ,qBAAW,gBACd;AAAA,MAEA,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,SAAI,WAAU,qHACZ,sBAAY,KAAK,IAAI,GACxB;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA,+BAAC,SAAI,WAAU,WACb;AAAA,gCAAC,UAAK,WAAU,iCAAiC,eAAK,MAAK;AAAA,YAAQ;AAAA,YACnE,qBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,cAAK,KAAK;AAAA,cAAM;AAAA,eAAI;AAAA,aAC9D;AAAA,UACA,oBAAC,SAAI,WAAU,iCACZ,eAAK,MAAM,EAAE,KAAK,uBACrB;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,0CAAyC,sBAAQ;AAAA,SAClE;AAAA,MAEA,qBAAC,SAAI,WAAU,kCACb;AAAA,4BAAC,SAAI,WAAU,mBAAkB,eAAY,QAAO;AAAA,QACpD,qBAAC,SAAI,WAAU,4BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,yBAAyB,EAAE,QAAQ,SAAS;AAAA;AAAA,UAC9C;AAAA,UAEC,gBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,yBAAyB,EAAE,QAAQ,cAAc;AAAA;AAAA,UACnD,IACE;AAAA,WACN;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/email-preview-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Eye } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface EmailPreviewCardProps {\n  from: { name: string; email: string }\n  to?: string\n  subject?: string\n  htmlBody?: string\n  textBody?: string\n  signatureHtml?: string | null\n  className?: string\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\")\n}\n\nexport function EmailPreviewCard({\n  from,\n  to,\n  subject,\n  htmlBody,\n  textBody,\n  signatureHtml,\n  className,\n}: EmailPreviewCardProps) {\n  const recipientLabel = to ? `${to}'s` : \"the recipient's\"\n  const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : \"\")\n\n  return (\n    <div className={cn(\"p-4 bg-muted/30 min-h-full\", className)}>\n      <div className=\"flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground\">\n        <Eye className=\"size-4 shrink-0 mt-0.5\" />\n        <span>\n          This is how your email lands in {recipientLabel} inbox. Nothing has\n          been sent yet.\n        </span>\n      </div>\n\n      <div className=\"bg-background border rounded-xl shadow-sm overflow-hidden\">\n        <div className=\"px-[18px] pt-4 pb-3 text-base font-semibold border-b border-border/50\">\n          {subject || \"(no subject)\"}\n        </div>\n\n        <div className=\"flex items-center gap-3 px-[18px] pt-3\">\n          <div className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-semibold\">\n            {getInitials(from.name)}\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-sm\">\n              <span className=\"font-semibold text-foreground\">{from.name}</span>{\" \"}\n              <span className=\"text-muted-foreground\">&lt;{from.email}&gt;</span>\n            </div>\n            <div className=\"text-xs text-muted-foreground\">\n              {to ? `to ${to}` : \"to no recipient yet\"}\n            </div>\n          </div>\n          <div className=\"text-xs text-muted-foreground shrink-0\">just now</div>\n        </div>\n\n        <div\n          className=\"px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap\"\n          dangerouslySetInnerHTML={{ __html: bodyHtml }}\n        />\n\n        {signatureHtml ? (\n          <div\n            className=\"ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground\"\n            dangerouslySetInnerHTML={{ __html: signatureHtml }}\n          />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAmDQ,cACA,YADA;AAhDR,SAAS,WAAW;AAEpB,SAAS,UAAU;AAYnB,SAAS,YAAY,MAAsB;AACzC,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,EACP,YAAY;AACjB;AAEA,SAAS,WAAW,MAAsB;AACxC,SAAO,KACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,QAAQ,EACtB,QAAQ,MAAM,OAAO;AAC1B;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,iBAAiB,KAAK,GAAG,EAAE,OAAO;AACxC,QAAM,WAAW,8BAAa,WAAW,WAAW,QAAQ,IAAI;AAEhE,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACxD;AAAA,yBAAC,SAAI,WAAU,+GACb;AAAA,0BAAC,OAAI,WAAU,0BAAyB;AAAA,MACxC,qBAAC,UAAK;AAAA;AAAA,QAC6B;AAAA,QAAe;AAAA,SAElD;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,6DACb;AAAA,0BAAC,SAAI,WAAU,yEACZ,qBAAW,gBACd;AAAA,MAEA,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,SAAI,WAAU,qHACZ,sBAAY,KAAK,IAAI,GACxB;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA,+BAAC,SAAI,WAAU,WACb;AAAA,gCAAC,UAAK,WAAU,iCAAiC,eAAK,MAAK;AAAA,YAAQ;AAAA,YACnE,qBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,cAAK,KAAK;AAAA,cAAM;AAAA,eAAI;AAAA,aAC9D;AAAA,UACA,oBAAC,SAAI,WAAU,iCACZ,eAAK,MAAM,EAAE,KAAK,uBACrB;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,0CAAyC,sBAAQ;AAAA,SAClE;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQ,SAAS;AAAA;AAAA,MAC9C;AAAA,MAEC,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQ,cAAc;AAAA;AAAA,MACnD,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","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/signal-feedback-inline.d.ts

@@ -17,12 +17,14 @@ interface OpportunityPreview {
     description?: string | null;
     churnType?: string | null;
     churnTypeOptions?: Array<string | OpportunityPreviewOption>;
+    nextStep?: string | null;
 }
 interface OpportunityDraft {
     closeDate: string;
     amount: string;
     description: string;
     churnType: string;
+    nextStep: string;
 }
 interface SignalApprovalLabels {
     approveButton?: string;

package/dist/components/signal-feedback-inline.js

@@ -310,12 +310,13 @@ function formatAmountDraftValue(value) {
   return value;
 }
 function buildOpportunityDraft(preview) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   return {
     closeDate: (_b = (_a = preview == null ? void 0 : preview.closeDateValue) != null ? _a : preview == null ? void 0 : preview.closeDate) != null ? _b : "",
     amount: (preview == null ? void 0 : preview.amountValue) === void 0 ? (_c = preview == null ? void 0 : preview.amount) != null ? _c : "" : formatAmountDraftValue(preview.amountValue),
     description: (_d = preview == null ? void 0 : preview.description) != null ? _d : "",
-    churnType: (_e = preview == null ? void 0 : preview.churnType) != null ? _e : ""
+    churnType: (_e = preview == null ? void 0 : preview.churnType) != null ? _e : "",
+    nextStep: (_f = preview == null ? void 0 : preview.nextStep) != null ? _f : ""
   };
 }
 function hasEditableOpportunityPreview(preview) {
@@ -720,6 +721,19 @@ function Actions() {
               }
             )
           ] }),
+          /* @__PURE__ */ jsxs("label", { className: "space-y-1 text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: "Next Step" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                value: opportunityDraft.nextStep,
+                onChange: (event) => setOpportunityDraft((draft) => __spreadProps(__spreadValues({}, draft), { nextStep: event.target.value })),
+                rows: 2,
+                placeholder: "No next step set",
+                className: "w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs("label", { className: "space-y-1 text-xs", children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: "Description" }),
             /* @__PURE__ */ jsx(

package/dist/components/signal-feedback-inline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/signal-feedback-inline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Check, CirclePlus, ExternalLink, Loader2, Lock, ThumbsDown } from \"lucide-react\"\n\ninterface DismissReasonNode {\n  label: string\n  subOptions?: string[]\n}\n\nconst dismissReasonTree: DismissReasonNode[] = [\n  {\n    label: \"Not relevant for this account\",\n    subOptions: [\n      \"Business as usual for this account\",\n      \"Account in maintenance mode\",\n      \"Wrong contact for this signal\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Bad timing\",\n    subOptions: [\n      \"Too early in the relationship\",\n      \"Too soon after last outreach\",\n      \"Wrong time of year for this account\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Inaccurate data\",\n    subOptions: [\n      \"Wrong amount or number\",\n      \"Stale data\",\n      \"Account info wrong\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Wrong account\",\n    subOptions: [\n      \"Different account meant\",\n      \"Account not in scope\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Already handled\",\n    subOptions: [\n      \"Already in conversation\",\n      \"Already an open Opportunity\",\n      \"Already escalated\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Not actionable\",\n    subOptions: [\n      \"No clear next step\",\n      \"Outside our remit\",\n      \"Other\",\n    ],\n  },\n  { label: \"Other\" },\n]\n\nconst approveReasons = [\n  \"Right timing\",\n  \"Accurate data\",\n  \"Good prospect fit\",\n  \"Actionable\",\n]\n\ntype ApprovalState = \"pending\" | \"confirming\" | \"creating\" | \"approving-feedback\" | \"dismissing\" | \"approved\" | \"dismissed\" | \"auto-approved\"\n\ninterface OpportunityPreviewOption {\n  value: string\n  label: string\n}\n\ninterface OpportunityPreview {\n  name: string\n  stage: string\n  closeDate: string\n  closeDateValue?: string\n  amount: string\n  /** Raw draft input value. Numeric values render as currency in the editable field. */\n  amountValue?: string | number | null\n  accountName: string\n  description?: string | null\n  churnType?: string | null\n  churnTypeOptions?: Array<string | OpportunityPreviewOption>\n}\n\ninterface OpportunityDraft {\n  closeDate: string\n  amount: string\n  description: string\n  churnType: string\n}\n\ninterface SignalApprovalLabels {\n  approveButton?: string\n  dismissButton?: string\n  approvedStatus?: string\n  dismissedStatus?: string\n  opportunityCreated?: string\n  confirmPrompt?: string\n  dismissPrompt?: string\n  feedbackPrompt?: string\n  /** Label shown while the approve action is in progress (e.g. \"Creating Opportunity...\"). */\n  creatingStatus?: string\n}\n\nconst DEFAULT_LABELS: Required<SignalApprovalLabels> = {\n  approveButton: \"Approve action\",\n  dismissButton: \"Not Helpful\",\n  approvedStatus: \"Action Approved\",\n  dismissedStatus: \"Action Dismissed\",\n  opportunityCreated: \"Opportunity Created\",\n  confirmPrompt: \"This will approve this action for\",\n  dismissPrompt: \"What\\u2019s the issue with this action?\",\n  feedbackPrompt: \"Quick feedback \\u2014 what made this action useful?\",\n  creatingStatus: \"Creating\\u2026\",\n}\n\ninterface SignalApprovalContextValue {\n  approvalState: ApprovalState\n  companyName: string\n  opportunityUrl?: string\n  scheduledTime?: string\n  labels: Required<SignalApprovalLabels>\n  hideApproveButton?: boolean\n  approveButtonIconUrl?: string\n  opportunityPreview?: OpportunityPreview\n  requestingApproval: boolean\n  approve: (draft?: OpportunityDraft) => void\n  submitApproveFeedback: (reasons: string[], detail: string) => void\n  skipApproveFeedback: () => void\n  dismiss: (reasons: string[], detail: string, subReason?: string) => void\n  requestApproval: () => void\n  requestDismiss: () => void\n  cancel: () => void\n}\n\nconst SignalApprovalCtx = React.createContext<SignalApprovalContextValue | null>(null)\n\nexport function useSignalApproval() {\n  const ctx = React.useContext(SignalApprovalCtx)\n  if (!ctx) throw new Error(\"SignalApproval components must be used within SignalApproval.Root\")\n  return ctx\n}\n\ninterface RootProps {\n  children: React.ReactNode\n  companyName: string\n  opportunityUrl?: string\n  scheduledTime?: string\n  initialApprovalState?: ApprovalState\n  labels?: SignalApprovalLabels\n  /** When true, the approve/create-opportunity button is hidden but the dismiss button remains. */\n  hideApproveButton?: boolean\n  /** Optional icon URL for the approve button. Renders an img instead of CirclePlus when provided. */\n  approveButtonIconUrl?: string\n  /** Optional structured preview data shown in the confirmation dialog. */\n  opportunityPreview?: OpportunityPreview\n  /**\n   * Async callback fired when the user clicks the approve button, BEFORE\n   * transitioning to the \"confirming\" state. While the promise is pending,\n   * the button shows a loading spinner. On resolve, transitions to \"confirming\".\n   * On reject, stays in \"pending\".\n   */\n  onRequestApproval?: () => Promise<void>\n  /**\n   * Called when the user confirms the approval action.\n   *\n   * - If the callback returns `void` (or `undefined`), the component transitions\n   *   directly to the feedback step (backward-compatible behavior).\n   * - If the callback returns a `Promise<boolean>`, the component shows a\n   *   \"creating\" loading state while the promise is pending. On `true` it\n   *   transitions to the feedback step; on `false` it reverts to \"pending\".\n   */\n  onApprove?: (draft?: OpportunityDraft) => void | Promise<boolean>\n  onApproveFeedback?: (reasons: string[], detail: string) => void\n  onDismiss?: (reasons: string[], detail: string, subReason?: string) => void\n}\n\nfunction Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, approveButtonIconUrl, opportunityPreview, onRequestApproval, onApprove, onApproveFeedback, onDismiss }: RootProps) {\n  const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides])\n  const [approvalState, setApprovalState] = React.useState<ApprovalState>(initialApprovalState ?? \"pending\")\n  const [requestingApproval, setRequestingApproval] = React.useState(false)\n\n  // Guard against state updates after unmount (e.g. user navigates away while\n  // an async onApprove promise is still in flight).\n  const mountedRef = React.useRef(true)\n  React.useEffect(() => {\n    mountedRef.current = true\n    return () => { mountedRef.current = false }\n  }, [])\n\n  const requestApproval = React.useCallback(() => {\n    if (onRequestApproval) {\n      setRequestingApproval(true)\n      onRequestApproval()\n        .then(() => {\n          if (mountedRef.current) {\n            setRequestingApproval(false)\n            setApprovalState(\"confirming\")\n          }\n        })\n        .catch(() => {\n          if (mountedRef.current) {\n            setRequestingApproval(false)\n          }\n        })\n    } else {\n      setApprovalState(\"confirming\")\n    }\n  }, [onRequestApproval])\n\n  const requestDismiss = React.useCallback(() => {\n    setApprovalState(\"dismissing\")\n  }, [])\n\n  const cancel = React.useCallback(() => {\n    setApprovalState(\"pending\")\n  }, [])\n\n  const approve = React.useCallback((draft?: OpportunityDraft) => {\n    const result = onApprove?.(draft)\n    // If the callback returns a Promise, show a loading state and wait for it.\n    if (result && typeof (result as Promise<boolean>).then === \"function\") {\n      setApprovalState(\"creating\")\n      ;(result as Promise<boolean>).then((success) => {\n        if (mountedRef.current) {\n          setApprovalState(success ? \"approving-feedback\" : \"pending\")\n        }\n      }).catch(() => {\n        if (mountedRef.current) {\n          setApprovalState(\"pending\")\n        }\n      })\n    } else {\n      // Synchronous / void — transition immediately (backward-compatible).\n      setApprovalState(\"approving-feedback\")\n    }\n  }, [onApprove])\n\n  const submitApproveFeedback = React.useCallback(\n    (reasons: string[], detail: string) => {\n      setApprovalState(\"approved\")\n      onApproveFeedback?.(reasons, detail)\n    },\n    [onApproveFeedback]\n  )\n\n  const skipApproveFeedback = React.useCallback(() => {\n    setApprovalState(\"approved\")\n  }, [])\n\n  const dismiss = React.useCallback(\n    (reasons: string[], detail: string, subReason?: string) => {\n      setApprovalState(\"dismissed\")\n      onDismiss?.(reasons, detail, subReason)\n    },\n    [onDismiss]\n  )\n\n  return (\n    <SignalApprovalCtx.Provider\n      value={{ approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel }}\n    >\n      {children}\n    </SignalApprovalCtx.Provider>\n  )\n}\n\n/** Shared dismiss reason picker used in both the \"editing\" and \"initial dismiss\" paths. */\nfunction DismissReasonPicker({\n  selectedTopReason,\n  selectedSubReason,\n  selectTopReason,\n  selectSubReason,\n  detailText,\n  setDetailText,\n  needsText,\n  canSubmitDismiss,\n  handleDismissSubmit,\n  topNode,\n  submitLabel,\n  onCancel,\n}: {\n  selectedTopReason: string | null\n  selectedSubReason: string | null\n  selectTopReason: (label: string) => void\n  selectSubReason: (label: string) => void\n  detailText: string\n  setDetailText: (value: string) => void\n  needsText: boolean\n  canSubmitDismiss: boolean\n  handleDismissSubmit: () => void\n  topNode: DismissReasonNode | undefined\n  submitLabel: string\n  onCancel: () => void\n}) {\n  return (\n    <>\n      <div className=\"flex flex-wrap gap-1.5\">\n        {dismissReasonTree.map((node) => {\n          const selected = selectedTopReason === node.label\n          return (\n            <button\n              key={node.label}\n              type=\"button\"\n              onClick={() => selectTopReason(node.label)}\n              className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                selected\n                  ? \"border-red-200 bg-red-100 text-red-700\"\n                  : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n              }`}\n            >\n              {node.label}\n            </button>\n          )\n        })}\n      </div>\n\n      {topNode?.subOptions && (\n        <div className=\"ml-3 border-l-2 border-muted pl-3\">\n          <div className=\"flex flex-wrap gap-1.5\">\n            {topNode.subOptions.map((sub) => {\n              const selected = selectedSubReason === sub\n              return (\n                <button\n                  key={sub}\n                  type=\"button\"\n                  onClick={() => selectSubReason(sub)}\n                  className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                    selected\n                      ? \"border-red-200 bg-red-100 text-red-700\"\n                      : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n                  }`}\n                >\n                  {sub}\n                </button>\n              )\n            })}\n          </div>\n        </div>\n      )}\n\n      {selectedTopReason && (\n        <input\n          type=\"text\"\n          value={detailText}\n          onChange={(e) => setDetailText(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" && canSubmitDismiss) handleDismissSubmit()\n          }}\n          placeholder={needsText ? \"Please describe (required)\" : \"Add context (optional)\"}\n          className=\"h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n        />\n      )}\n\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={handleDismissSubmit}\n          disabled={!canSubmitDismiss}\n          className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${\n            canSubmitDismiss\n              ? \"bg-foreground text-background hover:bg-foreground/90\"\n              : \"cursor-not-allowed bg-muted text-muted-foreground\"\n          }`}\n        >\n          {submitLabel}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onCancel}\n          className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n        >\n          Cancel\n        </button>\n      </div>\n    </>\n  )\n}\n\nfunction SubmittedFeedback({\n  reasons,\n  detail,\n  subReason,\n  variant,\n  onEdit,\n}: {\n  reasons: string[]\n  detail: string\n  subReason?: string\n  variant: \"approve\" | \"dismiss\"\n  onEdit: () => void\n}) {\n  if (reasons.length === 0 && !detail) return null\n  const pillClass =\n    variant === \"approve\"\n      ? \"border-emerald-200/60 bg-emerald-50/50 text-emerald-700/70\"\n      : \"border-red-200/60 bg-red-50/50 text-red-700/70\"\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onEdit}\n      className=\"w-full text-left space-y-1.5 group cursor-pointer\"\n    >\n      {reasons.length > 0 && (\n        <div className=\"flex flex-wrap gap-1\">\n          {reasons.map((r) => (\n            <span\n              key={r}\n              className={`rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80 ${pillClass}`}\n            >\n              {r}\n            </span>\n          ))}\n          {subReason && (\n            <span\n              className={`rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80 ${pillClass}`}\n            >\n              {subReason}\n            </span>\n          )}\n        </div>\n      )}\n      {detail && (\n        <p className=\"text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors\">{detail}</p>\n      )}\n    </button>\n  )\n}\n\nfunction optionValue(option: string | OpportunityPreviewOption): string {\n  return typeof option === \"string\" ? option : option.value\n}\n\nfunction optionLabel(option: string | OpportunityPreviewOption): string {\n  return typeof option === \"string\" ? option : option.label\n}\n\nfunction formatAmountDraftValue(value: string | number | null | undefined): string {\n  if (value == null || value === \"\") return \"\"\n  if (typeof value === \"number\") {\n    return new Intl.NumberFormat(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      maximumFractionDigits: 0,\n    }).format(value)\n  }\n  return value\n}\n\nfunction buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {\n  return {\n    closeDate: preview?.closeDateValue ?? preview?.closeDate ?? \"\",\n    amount: preview?.amountValue === undefined\n      ? preview?.amount ?? \"\"\n      : formatAmountDraftValue(preview.amountValue),\n    description: preview?.description ?? \"\",\n    churnType: preview?.churnType ?? \"\",\n  }\n}\n\nfunction hasEditableOpportunityPreview(preview?: OpportunityPreview): boolean {\n  return !!preview && isValidDateInput(preview.closeDateValue ?? preview.closeDate)\n}\n\nfunction isValidDateInput(value: string): boolean {\n  const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(value)\n  if (!match) return false\n  const parsed = new Date(`${value}T00:00:00Z`)\n  if (Number.isNaN(parsed.getTime())) return false\n  return parsed.toISOString().slice(0, 10) === value\n}\n\nfunction Actions() {\n  const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =\n    useSignalApproval()\n  const [selectedTopReason, setSelectedTopReason] = React.useState<string | null>(null)\n  const [selectedSubReason, setSelectedSubReason] = React.useState<string | null>(null)\n  const [selectedReasons, setSelectedReasons] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string; subReason?: string } | null>(null)\n  const [isEditing, setIsEditing] = React.useState(false)\n  const [opportunityDraft, setOpportunityDraft] = React.useState<OpportunityDraft>(() => buildOpportunityDraft(opportunityPreview))\n\n  React.useEffect(() => {\n    if (approvalState === \"confirming\") {\n      setOpportunityDraft(buildOpportunityDraft(opportunityPreview))\n    }\n  }, [approvalState, opportunityPreview])\n\n  const churnTypeOptions = opportunityPreview?.churnTypeOptions ?? []\n  const hasChurnTypeOptions = churnTypeOptions.length > 0\n\n  const topNode = dismissReasonTree.find((n) => n.label === selectedTopReason)\n  const hasSubOptions = !!(topNode?.subOptions && topNode.subOptions.length > 0)\n  const isTopOther = selectedTopReason === \"Other\" && !hasSubOptions\n  const isSubOther = selectedSubReason === \"Other\"\n  const needsText = isTopOther || isSubOther\n  const canSubmitDismiss =\n    selectedTopReason !== null &&\n    (!hasSubOptions || selectedSubReason !== null) &&\n    (!needsText || detailText.trim().length > 0)\n\n  const canSubmitApprove = selectedReasons.length > 0 || detailText.trim().length > 0\n  const isEditableOpportunityPreview = hasEditableOpportunityPreview(opportunityPreview)\n  const canConfirmOpportunity = !isEditableOpportunityPreview || isValidDateInput(opportunityDraft.closeDate)\n\n  const selectTopReason = (label: string) => {\n    if (selectedTopReason === label) {\n      setSelectedTopReason(null)\n      setSelectedSubReason(null)\n      setDetailText(\"\")\n    } else {\n      setSelectedTopReason(label)\n      setSelectedSubReason(null)\n      setDetailText(\"\")\n    }\n  }\n\n  const selectSubReason = (label: string) => {\n    setSelectedSubReason(selectedSubReason === label ? null : label)\n  }\n\n  const toggleReason = (reason: string) => {\n    setSelectedReasons((prev) =>\n      prev.includes(reason) ? prev.filter((r) => r !== reason) : [...prev, reason]\n    )\n  }\n\n  const startEditing = () => {\n    if (submittedFeedback) {\n      setSelectedTopReason(submittedFeedback.reasons[0] ?? null)\n      setSelectedSubReason(submittedFeedback.subReason ?? null)\n      // Note: selectedReasons is only used by the approve editing path.\n      // For dismiss feedback this is harmless but unused — the dismiss path\n      // reads selectedTopReason/selectedSubReason instead.\n      setSelectedReasons([...submittedFeedback.reasons])\n      setDetailText(submittedFeedback.detail)\n    }\n    setIsEditing(true)\n  }\n\n  const handleDismissSubmit = () => {\n    if (!canSubmitDismiss || !selectedTopReason) return\n    const fb = { reasons: [selectedTopReason], detail: detailText.trim(), subReason: selectedSubReason ?? undefined }\n    setSubmittedFeedback(fb)\n    dismiss([selectedTopReason], detailText.trim(), selectedSubReason ?? undefined)\n    setSelectedTopReason(null)\n    setSelectedSubReason(null)\n    setDetailText(\"\")\n    setIsEditing(false)\n  }\n\n  const handleApproveSubmit = () => {\n    const fb = { reasons: [...selectedReasons], detail: detailText.trim() }\n    setSubmittedFeedback(fb)\n    submitApproveFeedback(selectedReasons, detailText.trim())\n    setSelectedReasons([])\n    setDetailText(\"\")\n    setIsEditing(false)\n  }\n\n  const handleEditCancel = () => {\n    setSelectedTopReason(null)\n    setSelectedSubReason(null)\n    setSelectedReasons([])\n    setDetailText(\"\")\n    setIsEditing(false)\n  }\n\n  const handleCancel = () => {\n    cancel()\n    setSelectedTopReason(null)\n    setSelectedSubReason(null)\n    setSelectedReasons([])\n    setDetailText(\"\")\n  }\n\n  if (approvalState === \"creating\") {\n    return (\n      <div className=\"flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n        <svg className=\"h-3.5 w-3.5 animate-spin\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n          <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n        <span>{labels.creatingStatus}</span>\n      </div>\n    )\n  }\n\n  if (approvalState === \"approved\") {\n    if (isEditing) {\n      return (\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600 mb-2\">\n            <Check className=\"h-3.5 w-3.5\" />\n            {opportunityUrl ? (\n              <a href={opportunityUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"inline-flex items-center gap-1 hover:underline underline-offset-2\">\n                {labels.approvedStatus} <ExternalLink className=\"h-3 w-3\" />\n              </a>\n            ) : (\n              <span>{labels.approvedStatus}</span>\n            )}\n          </div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Edit your feedback</p>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {approveReasons.map((reason) => {\n              const selected = selectedReasons.includes(reason)\n              return (\n                <button key={reason} type=\"button\" onClick={() => toggleReason(reason)}\n                  className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                    selected ? \"border-emerald-200 bg-emerald-100 text-emerald-700\" : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n                  }`}>{reason}</button>\n              )\n            })}\n          </div>\n          <input type=\"text\" value={detailText} onChange={(e) => setDetailText(e.target.value)}\n            onKeyDown={(e) => { if (e.key === \"Enter\" && canSubmitApprove) handleApproveSubmit() }}\n            placeholder=\"Tell us more (optional)\"\n            className=\"h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\" />\n          <div className=\"flex items-center gap-2\">\n            <button type=\"button\" onClick={handleApproveSubmit} disabled={!canSubmitApprove}\n              className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${canSubmitApprove ? \"bg-foreground text-background hover:bg-foreground/90\" : \"cursor-not-allowed bg-muted text-muted-foreground\"}`}>\n              Save\n            </button>\n            <button type=\"button\" onClick={handleEditCancel}\n              className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\">\n              Cancel\n            </button>\n          </div>\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600\">\n          <Check className=\"h-3.5 w-3.5\" />\n          {opportunityUrl ? (\n            <a\n              href={opportunityUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"inline-flex items-center gap-1 hover:underline underline-offset-2\"\n            >\n              {labels.opportunityCreated}\n              <ExternalLink className=\"h-3 w-3\" />\n            </a>\n          ) : (\n            <span>{labels.opportunityCreated}</span>\n          )}\n        </div>\n        {submittedFeedback && (\n          <SubmittedFeedback\n            reasons={submittedFeedback.reasons}\n            detail={submittedFeedback.detail}\n            variant=\"approve\"\n            onEdit={startEditing}\n          />\n        )}\n      </div>\n    )\n  }\n\n  if (approvalState === \"auto-approved\") {\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600\">\n          <Check className=\"h-3.5 w-3.5\" />\n          <span>{labels.approvedStatus}</span>\n        </div>\n        {scheduledTime && (\n          <p className=\"text-[11px] text-muted-foreground\">Scheduled: {scheduledTime}</p>\n        )}\n      </div>\n    )\n  }\n\n  if (approvalState === \"approving-feedback\") {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600 mb-2\">\n          <Check className=\"h-3.5 w-3.5\" />\n          {opportunityUrl ? (\n            <a\n              href={opportunityUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"inline-flex items-center gap-1 hover:underline underline-offset-2\"\n            >\n              {labels.opportunityCreated}\n              <ExternalLink className=\"h-3 w-3\" />\n            </a>\n          ) : (\n            <span>{labels.opportunityCreated}</span>\n          )}\n        </div>\n        <p className=\"text-xs font-medium text-muted-foreground\">{labels.feedbackPrompt}</p>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {approveReasons.map((reason) => {\n            const selected = selectedReasons.includes(reason)\n            return (\n              <button\n                key={reason}\n                type=\"button\"\n                onClick={() => toggleReason(reason)}\n                className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                  selected\n                    ? \"border-emerald-200 bg-emerald-100 text-emerald-700\"\n                    : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n                }`}\n              >\n                {reason}\n              </button>\n            )\n          })}\n        </div>\n\n        <input\n          type=\"text\"\n          value={detailText}\n          onChange={(e) => setDetailText(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" && canSubmitApprove) handleApproveSubmit()\n          }}\n          placeholder=\"Tell us more (optional)\"\n          className=\"h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n        />\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={handleApproveSubmit}\n            disabled={!canSubmitApprove}\n            className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${\n              canSubmitApprove\n                ? \"bg-foreground text-background hover:bg-foreground/90\"\n                : \"cursor-not-allowed bg-muted text-muted-foreground\"\n            }`}\n          >\n            Submit\n          </button>\n          <button\n            type=\"button\"\n            onClick={skipApproveFeedback}\n            className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n          >\n            Skip\n          </button>\n        </div>\n      </div>\n    )\n  }\n\n  if (approvalState === \"dismissed\") {\n    if (isEditing) {\n      return (\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground mb-2\">\n            <ThumbsDown className=\"h-3.5 w-3.5\" />\n            <span>{labels.dismissedStatus}</span>\n          </div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Edit your feedback</p>\n          <DismissReasonPicker\n            selectedTopReason={selectedTopReason}\n            selectedSubReason={selectedSubReason}\n            selectTopReason={selectTopReason}\n            selectSubReason={selectSubReason}\n            detailText={detailText}\n            setDetailText={setDetailText}\n            needsText={needsText}\n            canSubmitDismiss={canSubmitDismiss}\n            handleDismissSubmit={handleDismissSubmit}\n            topNode={topNode}\n            submitLabel=\"Save\"\n            onCancel={handleEditCancel}\n          />\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n          <ThumbsDown className=\"h-3.5 w-3.5\" />\n          <span>{labels.dismissedStatus}</span>\n        </div>\n        {submittedFeedback && (\n          <SubmittedFeedback\n            reasons={submittedFeedback.reasons}\n            detail={submittedFeedback.detail}\n            subReason={submittedFeedback.subReason}\n            variant=\"dismiss\"\n            onEdit={startEditing}\n          />\n        )}\n      </div>\n    )\n  }\n\n  if (approvalState === \"confirming\") {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"rounded-md border border-border bg-muted/30 p-3\">\n          <p className=\"text-sm text-foreground\">\n            {labels.confirmPrompt} <strong>{companyName}</strong>. Confirm?\n          </p>\n          {opportunityPreview && !isEditableOpportunityPreview && (\n            <div className=\"mt-3 space-y-2 border-t border-border/50 pt-3\">\n              {[\n                { label: \"Opportunity\", value: opportunityPreview.name },\n                { label: \"Account\", value: opportunityPreview.accountName },\n                { label: \"Stage\", value: opportunityPreview.stage },\n                { label: \"Close Date\", value: opportunityPreview.closeDate },\n                { label: \"Amount\", value: opportunityPreview.amount },\n              ].map(({ label, value }) => (\n                <div key={label} className=\"flex items-center justify-between gap-3 text-xs\">\n                  <span className=\"text-muted-foreground\">{label}</span>\n                  <span className=\"text-right font-medium text-foreground\">{value}</span>\n                </div>\n              ))}\n            </div>\n          )}\n          {opportunityPreview && isEditableOpportunityPreview && (\n            <div className=\"mt-3 space-y-3 border-t border-border/50 pt-3\">\n              {[\n                { label: \"Opportunity\", value: opportunityPreview.name },\n                { label: \"Account\", value: opportunityPreview.accountName },\n                { label: \"Stage\", value: opportunityPreview.stage },\n              ].map(({ label, value }) => (\n                <div key={label} className=\"flex items-center justify-between gap-3 text-xs\">\n                  <span className=\"text-muted-foreground\">{label}</span>\n                  <span className=\"text-right font-medium text-foreground\">{value}</span>\n                </div>\n              ))}\n\n              <div className=\"grid gap-2 sm:grid-cols-2\">\n                <label className=\"space-y-1 text-xs\">\n                  <span className=\"font-medium text-muted-foreground\">Close Date</span>\n                  <input\n                    type=\"date\"\n                    value={opportunityDraft.closeDate}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, closeDate: event.target.value }))}\n                    aria-invalid={!canConfirmOpportunity}\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n                  />\n                  {!canConfirmOpportunity && (\n                    <span className=\"text-[11px] text-red-600\">Enter a valid close date.</span>\n                  )}\n                </label>\n\n                <label className=\"space-y-1 text-xs\">\n                  <span className=\"font-medium text-muted-foreground\">Amount</span>\n                  <input\n                    type=\"text\"\n                    inputMode=\"decimal\"\n                    value={opportunityDraft.amount}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, amount: event.target.value }))}\n                    placeholder={opportunityPreview.amount}\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                  />\n                </label>\n              </div>\n\n              <label className=\"space-y-1 text-xs\">\n                <span className=\"font-medium text-muted-foreground\">Churn Type</span>\n                {hasChurnTypeOptions ? (\n                  <select\n                    value={opportunityDraft.churnType}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n                  >\n                    <option value=\"\">No churn type</option>\n                    {churnTypeOptions.map((option) => (\n                      <option key={optionValue(option)} value={optionValue(option)}>\n                        {optionLabel(option)}\n                      </option>\n                    ))}\n                  </select>\n                ) : (\n                  <input\n                    type=\"text\"\n                    value={opportunityDraft.churnType}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}\n                    placeholder=\"No churn type\"\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                  />\n                )}\n              </label>\n\n              <label className=\"space-y-1 text-xs\">\n                <span className=\"font-medium text-muted-foreground\">Description</span>\n                <textarea\n                  value={opportunityDraft.description}\n                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, description: event.target.value }))}\n                  rows={3}\n                  placeholder=\"Add a short description\"\n                  className=\"w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                />\n              </label>\n            </div>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => {\n              if (!opportunityPreview) {\n                approve()\n                return\n              }\n              approve(isEditableOpportunityPreview ? opportunityDraft : undefined)\n            }}\n            disabled={!canConfirmOpportunity}\n            className=\"inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n          >\n            <Check className=\"h-3 w-3\" />\n            Confirm\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    )\n  }\n\n  if (approvalState === \"dismissing\") {\n    return (\n      <div className=\"space-y-3\">\n        <p className=\"text-xs font-medium text-muted-foreground\">{labels.dismissPrompt}</p>\n        <DismissReasonPicker\n          selectedTopReason={selectedTopReason}\n          selectedSubReason={selectedSubReason}\n          selectTopReason={selectTopReason}\n          selectSubReason={selectSubReason}\n          detailText={detailText}\n          setDetailText={setDetailText}\n          needsText={needsText}\n          canSubmitDismiss={canSubmitDismiss}\n          handleDismissSubmit={handleDismissSubmit}\n          topNode={topNode}\n          submitLabel=\"Submit\"\n          onCancel={handleCancel}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {!hideApproveButton && (\n        <button\n          type=\"button\"\n          onClick={requestApproval}\n          disabled={requestingApproval}\n          className=\"inline-flex h-7 items-center gap-1.5 rounded-md border border-border bg-foreground px-3 text-xs font-semibold text-background shadow-none transition-colors hover:bg-foreground/90 disabled:opacity-50\"\n        >\n          {requestingApproval ? (\n            <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n          ) : approveButtonIconUrl ? (\n            <img src={approveButtonIconUrl} alt=\"\" className=\"h-3.5 w-3.5 object-contain\" draggable={false} />\n          ) : (\n            <CirclePlus className=\"h-3.5 w-3.5\" />\n          )}\n          {labels.approveButton}\n        </button>\n      )}\n      <button\n        type=\"button\"\n        onClick={requestDismiss}\n        className=\"inline-flex h-7 items-center gap-1.5 rounded-md border border-border px-3 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-foreground\"\n      >\n        <ThumbsDown className=\"h-3.5 w-3.5\" />\n        {labels.dismissButton}\n      </button>\n    </div>\n  )\n}\n\nfunction Gate({ children }: { children: React.ReactNode }) {\n  const { approvalState, hideApproveButton } = useSignalApproval()\n  // When the approve button is hidden, don't lock content behind approval\n  const isLocked = !hideApproveButton &&\n    (approvalState === \"pending\" || approvalState === \"confirming\" || approvalState === \"creating\" || approvalState === \"dismissing\")\n\n  return (\n    <div className=\"relative\">\n      {isLocked && (\n        <div className=\"pointer-events-none absolute inset-x-0 top-4 z-10 flex justify-center\">\n          <div className=\"flex items-center gap-1.5 rounded-full border border-border bg-background px-3 py-1.5 text-xs text-muted-foreground shadow-sm\">\n            <Lock className=\"h-3 w-3\" />\n            Approve or dismiss the signal above to unlock\n          </div>\n        </div>\n      )}\n      <div\n        className={`transition-opacity duration-300 ${isLocked ? \"pointer-events-none select-none opacity-40\" : \"opacity-100\"}`}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport {\n  Root as SignalApprovalRoot,\n  Actions as SignalApprovalActions,\n  Gate as SignalApprovalGate,\n}\nexport const SignalApproval = { Root, Actions, Gate }\nexport type { ApprovalState, OpportunityPreview, OpportunityDraft, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6QI,SAqCA,UArCA,KA+FE,YA/FF;AA3QJ,YAAY,WAAW;AACvB,SAAS,OAAO,YAAY,cAAc,SAAS,MAAM,kBAAkB;AAO3E,MAAM,oBAAyC;AAAA,EAC7C;AAAA,IACE,OAAO;AAAA,IACP,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,OAAO,QAAQ;AACnB;AAEA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2CA,MAAM,iBAAiD;AAAA,EACrD,eAAe;AAAA,EACf,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;AAqBA,MAAM,oBAAoB,MAAM,cAAiD,IAAI;AAE9E,SAAS,oBAAoB;AAClC,QAAM,MAAM,MAAM,WAAW,iBAAiB;AAC9C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mEAAmE;AAC7F,SAAO;AACT;AAoCA,SAAS,KAAK,EAAE,UAAU,aAAa,gBAAgB,eAAe,sBAAsB,QAAQ,gBAAgB,mBAAmB,sBAAsB,oBAAoB,mBAAmB,WAAW,mBAAmB,UAAU,GAAc;AACxP,QAAM,SAAS,MAAM,QAAQ,MAAO,kCAAK,iBAAmB,iBAAmB,CAAC,cAAc,CAAC;AAC/F,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAwB,sDAAwB,SAAS;AACzG,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAAS,KAAK;AAIxE,QAAM,aAAa,MAAM,OAAO,IAAI;AACpC,QAAM,UAAU,MAAM;AACpB,eAAW,UAAU;AACrB,WAAO,MAAM;AAAE,iBAAW,UAAU;AAAA,IAAM;AAAA,EAC5C,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,MAAM,YAAY,MAAM;AAC9C,QAAI,mBAAmB;AACrB,4BAAsB,IAAI;AAC1B,wBAAkB,EACf,KAAK,MAAM;AACV,YAAI,WAAW,SAAS;AACtB,gCAAsB,KAAK;AAC3B,2BAAiB,YAAY;AAAA,QAC/B;AAAA,MACF,CAAC,EACA,MAAM,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,gCAAsB,KAAK;AAAA,QAC7B;AAAA,MACF,CAAC;AAAA,IACL,OAAO;AACL,uBAAiB,YAAY;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AAEtB,QAAM,iBAAiB,MAAM,YAAY,MAAM;AAC7C,qBAAiB,YAAY;AAAA,EAC/B,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,MAAM,YAAY,MAAM;AACrC,qBAAiB,SAAS;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM,YAAY,CAAC,UAA6B;AAC9D,UAAM,SAAS,uCAAY;AAE3B,QAAI,UAAU,OAAQ,OAA4B,SAAS,YAAY;AACrE,uBAAiB,UAAU;AAC1B,MAAC,OAA4B,KAAK,CAAC,YAAY;AAC9C,YAAI,WAAW,SAAS;AACtB,2BAAiB,UAAU,uBAAuB,SAAS;AAAA,QAC7D;AAAA,MACF,CAAC,EAAE,MAAM,MAAM;AACb,YAAI,WAAW,SAAS;AACtB,2BAAiB,SAAS;AAAA,QAC5B;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AAEL,uBAAiB,oBAAoB;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,wBAAwB,MAAM;AAAA,IAClC,CAAC,SAAmB,WAAmB;AACrC,uBAAiB,UAAU;AAC3B,6DAAoB,SAAS;AAAA,IAC/B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,sBAAsB,MAAM,YAAY,MAAM;AAClD,qBAAiB,UAAU;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,SAAmB,QAAgB,cAAuB;AACzD,uBAAiB,WAAW;AAC5B,6CAAY,SAAS,QAAQ;AAAA,IAC/B;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,OAAO,EAAE,eAAe,aAAa,gBAAgB,eAAe,QAAQ,mBAAmB,sBAAsB,oBAAoB,oBAAoB,SAAS,uBAAuB,qBAAqB,SAAS,iBAAiB,gBAAgB,OAAO;AAAA,MAElQ;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAaG;AACD,SACE,iCACE;AAAA,wBAAC,SAAI,WAAU,0BACZ,4BAAkB,IAAI,CAAC,SAAS;AAC/B,YAAM,WAAW,sBAAsB,KAAK;AAC5C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,gBAAgB,KAAK,KAAK;AAAA,UACzC,WAAW,6EACT,WACI,2CACA,2FACN;AAAA,UAEC,eAAK;AAAA;AAAA,QATD,KAAK;AAAA,MAUZ;AAAA,IAEJ,CAAC,GACH;AAAA,KAEC,mCAAS,eACR,oBAAC,SAAI,WAAU,qCACb,8BAAC,SAAI,WAAU,0BACZ,kBAAQ,WAAW,IAAI,CAAC,QAAQ;AAC/B,YAAM,WAAW,sBAAsB;AACvC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,gBAAgB,GAAG;AAAA,UAClC,WAAW,6EACT,WACI,2CACA,2FACN;AAAA,UAEC;AAAA;AAAA,QATI;AAAA,MAUP;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IAGD,qBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,QAC7C,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,iBAAkB,qBAAoB;AAAA,QACjE;AAAA,QACA,aAAa,YAAY,+BAA+B;AAAA,QACxD,WAAU;AAAA;AAAA,IACZ;AAAA,IAGF,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,WAAW,gGACT,mBACI,yDACA,mDACN;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UACX;AAAA;AAAA,MAED;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,MAAI,QAAQ,WAAW,KAAK,CAAC,OAAQ,QAAO;AAC5C,QAAM,YACJ,YAAY,YACR,+DACA;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,MAET;AAAA,gBAAQ,SAAS,KAChB,qBAAC,SAAI,WAAU,wBACZ;AAAA,kBAAQ,IAAI,CAAC,MACZ;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW,oGAAoG,SAAS;AAAA,cAEvH;AAAA;AAAA,YAHI;AAAA,UAIP,CACD;AAAA,UACA,aACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,oGAAoG,SAAS;AAAA,cAEvH;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,UACC,oBAAC,OAAE,WAAU,yGAAyG,kBAAO;AAAA;AAAA;AAAA,EAEjI;AAEJ;AAEA,SAAS,YAAY,QAAmD;AACtE,SAAO,OAAO,WAAW,WAAW,SAAS,OAAO;AACtD;AAEA,SAAS,YAAY,QAAmD;AACtE,SAAO,OAAO,WAAW,WAAW,SAAS,OAAO;AACtD;AAEA,SAAS,uBAAuB,OAAmD;AACjF,MAAI,SAAS,QAAQ,UAAU,GAAI,QAAO;AAC1C,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,IAAI,KAAK,aAAa,SAAS;AAAA,MACpC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,uBAAuB;AAAA,IACzB,CAAC,EAAE,OAAO,KAAK;AAAA,EACjB;AACA,SAAO;AACT;AAEA,SAAS,sBAAsB,SAAgD;AA5c/E;AA6cE,SAAO;AAAA,IACL,YAAW,8CAAS,mBAAT,YAA2B,mCAAS,cAApC,YAAiD;AAAA,IAC5D,SAAQ,mCAAS,iBAAgB,UAC7B,wCAAS,WAAT,YAAmB,KACnB,uBAAuB,QAAQ,WAAW;AAAA,IAC9C,cAAa,wCAAS,gBAAT,YAAwB;AAAA,IACrC,YAAW,wCAAS,cAAT,YAAsB;AAAA,EACnC;AACF;AAEA,SAAS,8BAA8B,SAAuC;AAvd9E;AAwdE,SAAO,CAAC,CAAC,WAAW,kBAAiB,aAAQ,mBAAR,YAA0B,QAAQ,SAAS;AAClF;AAEA,SAAS,iBAAiB,OAAwB;AAChD,QAAM,QAAQ,4BAA4B,KAAK,KAAK;AACpD,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,SAAS,oBAAI,KAAK,GAAG,KAAK,YAAY;AAC5C,MAAI,OAAO,MAAM,OAAO,QAAQ,CAAC,EAAG,QAAO;AAC3C,SAAO,OAAO,YAAY,EAAE,MAAM,GAAG,EAAE,MAAM;AAC/C;AAEA,SAAS,UAAU;AAnenB;AAoeE,QAAM,EAAE,eAAe,aAAa,gBAAgB,eAAe,QAAQ,mBAAmB,sBAAsB,oBAAoB,oBAAoB,SAAS,uBAAuB,qBAAqB,SAAS,iBAAiB,gBAAgB,OAAO,IAChQ,kBAAkB;AACpB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAwB,IAAI;AACpF,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAwB,IAAI;AACpF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAmB,CAAC,CAAC;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,EAAE;AACrD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAA2E,IAAI;AACvI,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAA2B,MAAM,sBAAsB,kBAAkB,CAAC;AAEhI,QAAM,UAAU,MAAM;AACpB,QAAI,kBAAkB,cAAc;AAClC,0BAAoB,sBAAsB,kBAAkB,CAAC;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,eAAe,kBAAkB,CAAC;AAEtC,QAAM,oBAAmB,8DAAoB,qBAApB,YAAwC,CAAC;AAClE,QAAM,sBAAsB,iBAAiB,SAAS;AAEtD,QAAM,UAAU,kBAAkB,KAAK,CAAC,MAAM,EAAE,UAAU,iBAAiB;AAC3E,QAAM,gBAAgB,CAAC,GAAE,mCAAS,eAAc,QAAQ,WAAW,SAAS;AAC5E,QAAM,aAAa,sBAAsB,WAAW,CAAC;AACrD,QAAM,aAAa,sBAAsB;AACzC,QAAM,YAAY,cAAc;AAChC,QAAM,mBACJ,sBAAsB,SACrB,CAAC,iBAAiB,sBAAsB,UACxC,CAAC,aAAa,WAAW,KAAK,EAAE,SAAS;AAE5C,QAAM,mBAAmB,gBAAgB,SAAS,KAAK,WAAW,KAAK,EAAE,SAAS;AAClF,QAAM,+BAA+B,8BAA8B,kBAAkB;AACrF,QAAM,wBAAwB,CAAC,gCAAgC,iBAAiB,iBAAiB,SAAS;AAE1G,QAAM,kBAAkB,CAAC,UAAkB;AACzC,QAAI,sBAAsB,OAAO;AAC/B,2BAAqB,IAAI;AACzB,2BAAqB,IAAI;AACzB,oBAAc,EAAE;AAAA,IAClB,OAAO;AACL,2BAAqB,KAAK;AAC1B,2BAAqB,IAAI;AACzB,oBAAc,EAAE;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,UAAkB;AACzC,yBAAqB,sBAAsB,QAAQ,OAAO,KAAK;AAAA,EACjE;AAEA,QAAM,eAAe,CAAC,WAAmB;AACvC;AAAA,MAAmB,CAAC,SAClB,KAAK,SAAS,MAAM,IAAI,KAAK,OAAO,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC,GAAG,MAAM,MAAM;AAAA,IAC7E;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AA3hB7B,QAAAA,KAAA;AA4hBI,QAAI,mBAAmB;AACrB,4BAAqBA,MAAA,kBAAkB,QAAQ,CAAC,MAA3B,OAAAA,MAAgC,IAAI;AACzD,4BAAqB,uBAAkB,cAAlB,YAA+B,IAAI;AAIxD,yBAAmB,CAAC,GAAG,kBAAkB,OAAO,CAAC;AACjD,oBAAc,kBAAkB,MAAM;AAAA,IACxC;AACA,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,sBAAsB,MAAM;AAChC,QAAI,CAAC,oBAAoB,CAAC,kBAAmB;AAC7C,UAAM,KAAK,EAAE,SAAS,CAAC,iBAAiB,GAAG,QAAQ,WAAW,KAAK,GAAG,WAAW,gDAAqB,OAAU;AAChH,yBAAqB,EAAE;AACvB,YAAQ,CAAC,iBAAiB,GAAG,WAAW,KAAK,GAAG,gDAAqB,MAAS;AAC9E,yBAAqB,IAAI;AACzB,yBAAqB,IAAI;AACzB,kBAAc,EAAE;AAChB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,sBAAsB,MAAM;AAChC,UAAM,KAAK,EAAE,SAAS,CAAC,GAAG,eAAe,GAAG,QAAQ,WAAW,KAAK,EAAE;AACtE,yBAAqB,EAAE;AACvB,0BAAsB,iBAAiB,WAAW,KAAK,CAAC;AACxD,uBAAmB,CAAC,CAAC;AACrB,kBAAc,EAAE;AAChB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,mBAAmB,MAAM;AAC7B,yBAAqB,IAAI;AACzB,yBAAqB,IAAI;AACzB,uBAAmB,CAAC,CAAC;AACrB,kBAAc,EAAE;AAChB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,eAAe,MAAM;AACzB,WAAO;AACP,yBAAqB,IAAI;AACzB,yBAAqB,IAAI;AACzB,uBAAmB,CAAC,CAAC;AACrB,kBAAc,EAAE;AAAA,EAClB;AAEA,MAAI,kBAAkB,YAAY;AAChC,WACE,qBAAC,SAAI,WAAU,qEACb;AAAA,2BAAC,SAAI,WAAU,4BAA2B,OAAM,8BAA6B,MAAK,QAAO,SAAQ,aAC/F;AAAA,4BAAC,YAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,QAC5F,oBAAC,UAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,mHAAkH;AAAA,SACvK;AAAA,MACA,oBAAC,UAAM,iBAAO,gBAAe;AAAA,OAC/B;AAAA,EAEJ;AAEA,MAAI,kBAAkB,YAAY;AAChC,QAAI,WAAW;AACb,aACE,qBAAC,SAAI,WAAU,aACb;AAAA,6BAAC,SAAI,WAAU,uEACb;AAAA,8BAAC,SAAM,WAAU,eAAc;AAAA,UAC9B,iBACC,qBAAC,OAAE,MAAM,gBAAgB,QAAO,UAAS,KAAI,uBAAsB,WAAU,qEAC1E;AAAA,mBAAO;AAAA,YAAe;AAAA,YAAC,oBAAC,gBAAa,WAAU,WAAU;AAAA,aAC5D,IAEA,oBAAC,UAAM,iBAAO,gBAAe;AAAA,WAEjC;AAAA,QACA,oBAAC,OAAE,WAAU,6CAA4C,gCAAkB;AAAA,QAC3E,oBAAC,SAAI,WAAU,0BACZ,yBAAe,IAAI,CAAC,WAAW;AAC9B,gBAAM,WAAW,gBAAgB,SAAS,MAAM;AAChD,iBACE;AAAA,YAAC;AAAA;AAAA,cAAoB,MAAK;AAAA,cAAS,SAAS,MAAM,aAAa,MAAM;AAAA,cACnE,WAAW,6EACT,WAAW,uDAAuD,2FACpE;AAAA,cAAK;AAAA;AAAA,YAHM;AAAA,UAGC;AAAA,QAElB,CAAC,GACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAAM,MAAK;AAAA,YAAO,OAAO;AAAA,YAAY,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,YACjF,WAAW,CAAC,MAAM;AAAE,kBAAI,EAAE,QAAQ,WAAW,iBAAkB,qBAAoB;AAAA,YAAE;AAAA,YACrF,aAAY;AAAA,YACZ,WAAU;AAAA;AAAA,QAA6K;AAAA,QACzL,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cAAO,MAAK;AAAA,cAAS,SAAS;AAAA,cAAqB,UAAU,CAAC;AAAA,cAC7D,WAAW,gGAAgG,mBAAmB,yDAAyD,mDAAmD;AAAA,cAAI;AAAA;AAAA,UAEhP;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cAAO,MAAK;AAAA,cAAS,SAAS;AAAA,cAC7B,WAAU;AAAA,cAAqK;AAAA;AAAA,UAEjL;AAAA,WACF;AAAA,SACF;AAAA,IAEJ;AAEA,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,kEACb;AAAA,4BAAC,SAAM,WAAU,eAAc;AAAA,QAC9B,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAU;AAAA,YAET;AAAA,qBAAO;AAAA,cACR,oBAAC,gBAAa,WAAU,WAAU;AAAA;AAAA;AAAA,QACpC,IAEA,oBAAC,UAAM,iBAAO,oBAAmB;AAAA,SAErC;AAAA,MACC,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,kBAAkB;AAAA,UAC3B,QAAQ,kBAAkB;AAAA,UAC1B,SAAQ;AAAA,UACR,QAAQ;AAAA;AAAA,MACV;AAAA,OAEJ;AAAA,EAEJ;AAEA,MAAI,kBAAkB,iBAAiB;AACrC,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,kEACb;AAAA,4BAAC,SAAM,WAAU,eAAc;AAAA,QAC/B,oBAAC,UAAM,iBAAO,gBAAe;AAAA,SAC/B;AAAA,MACC,iBACC,qBAAC,OAAE,WAAU,qCAAoC;AAAA;AAAA,QAAY;AAAA,SAAc;AAAA,OAE/E;AAAA,EAEJ;AAEA,MAAI,kBAAkB,sBAAsB;AAC1C,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,uEACb;AAAA,4BAAC,SAAM,WAAU,eAAc;AAAA,QAC9B,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAU;AAAA,YAET;AAAA,qBAAO;AAAA,cACR,oBAAC,gBAAa,WAAU,WAAU;AAAA;AAAA;AAAA,QACpC,IAEA,oBAAC,UAAM,iBAAO,oBAAmB;AAAA,SAErC;AAAA,MACA,oBAAC,OAAE,WAAU,6CAA6C,iBAAO,gBAAe;AAAA,MAChF,oBAAC,SAAI,WAAU,0BACZ,yBAAe,IAAI,CAAC,WAAW;AAC9B,cAAM,WAAW,gBAAgB,SAAS,MAAM;AAChD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,aAAa,MAAM;AAAA,YAClC,WAAW,6EACT,WACI,uDACA,2FACN;AAAA,YAEC;AAAA;AAAA,UATI;AAAA,QAUP;AAAA,MAEJ,CAAC,GACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,UAC7C,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,WAAW,iBAAkB,qBAAoB;AAAA,UACjE;AAAA,UACA,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,MAEA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU,CAAC;AAAA,YACX,WAAW,gGACT,mBACI,yDACA,mDACN;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,kBAAkB,aAAa;AACjC,QAAI,WAAW;AACb,aACE,qBAAC,SAAI,WAAU,aACb;AAAA,6BAAC,SAAI,WAAU,gEACb;AAAA,8BAAC,cAAW,WAAU,eAAc;AAAA,UACpC,oBAAC,UAAM,iBAAO,iBAAgB;AAAA,WAChC;AAAA,QACA,oBAAC,OAAE,WAAU,6CAA4C,gCAAkB;AAAA,QAC3E;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAY;AAAA,YACZ,UAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,IAEJ;AAEA,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,2DACb;AAAA,4BAAC,cAAW,WAAU,eAAc;AAAA,QACpC,oBAAC,UAAM,iBAAO,iBAAgB;AAAA,SAChC;AAAA,MACC,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,kBAAkB;AAAA,UAC3B,QAAQ,kBAAkB;AAAA,UAC1B,WAAW,kBAAkB;AAAA,UAC7B,SAAQ;AAAA,UACR,QAAQ;AAAA;AAAA,MACV;AAAA,OAEJ;AAAA,EAEJ;AAEA,MAAI,kBAAkB,cAAc;AAClC,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,mDACb;AAAA,6BAAC,OAAE,WAAU,2BACV;AAAA,iBAAO;AAAA,UAAc;AAAA,UAAC,oBAAC,YAAQ,uBAAY;AAAA,UAAS;AAAA,WACvD;AAAA,QACC,sBAAsB,CAAC,gCACtB,oBAAC,SAAI,WAAU,iDACZ;AAAA,UACC,EAAE,OAAO,eAAe,OAAO,mBAAmB,KAAK;AAAA,UACvD,EAAE,OAAO,WAAW,OAAO,mBAAmB,YAAY;AAAA,UAC1D,EAAE,OAAO,SAAS,OAAO,mBAAmB,MAAM;AAAA,UAClD,EAAE,OAAO,cAAc,OAAO,mBAAmB,UAAU;AAAA,UAC3D,EAAE,OAAO,UAAU,OAAO,mBAAmB,OAAO;AAAA,QACtD,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACpB,qBAAC,SAAgB,WAAU,mDACzB;AAAA,8BAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,UAC/C,oBAAC,UAAK,WAAU,0CAA0C,iBAAM;AAAA,aAFxD,KAGV,CACD,GACH;AAAA,QAED,sBAAsB,gCACrB,qBAAC,SAAI,WAAU,iDACZ;AAAA;AAAA,YACC,EAAE,OAAO,eAAe,OAAO,mBAAmB,KAAK;AAAA,YACvD,EAAE,OAAO,WAAW,OAAO,mBAAmB,YAAY;AAAA,YAC1D,EAAE,OAAO,SAAS,OAAO,mBAAmB,MAAM;AAAA,UACpD,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACpB,qBAAC,SAAgB,WAAU,mDACzB;AAAA,gCAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,YAC/C,oBAAC,UAAK,WAAU,0CAA0C,iBAAM;AAAA,eAFxD,KAGV,CACD;AAAA,UAED,qBAAC,SAAI,WAAU,6BACb;AAAA,iCAAC,WAAM,WAAU,qBACf;AAAA,kCAAC,UAAK,WAAU,qCAAoC,wBAAU;AAAA,cAC9D;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,iBAAiB;AAAA,kBACxB,UAAU,CAAC,UAAU,oBAAoB,CAAC,UAAW,iCAAK,QAAL,EAAY,WAAW,MAAM,OAAO,MAAM,EAAE;AAAA,kBACjG,gBAAc,CAAC;AAAA,kBACf,WAAU;AAAA;AAAA,cACZ;AAAA,cACC,CAAC,yBACA,oBAAC,UAAK,WAAU,4BAA2B,uCAAyB;AAAA,eAExE;AAAA,YAEA,qBAAC,WAAM,WAAU,qBACf;AAAA,kCAAC,UAAK,WAAU,qCAAoC,oBAAM;AAAA,cAC1D;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,OAAO,iBAAiB;AAAA,kBACxB,UAAU,CAAC,UAAU,oBAAoB,CAAC,UAAW,iCAAK,QAAL,EAAY,QAAQ,MAAM,OAAO,MAAM,EAAE;AAAA,kBAC9F,aAAa,mBAAmB;AAAA,kBAChC,WAAU;AAAA;AAAA,cACZ;AAAA,eACF;AAAA,aACF;AAAA,UAEA,qBAAC,WAAM,WAAU,qBACf;AAAA,gCAAC,UAAK,WAAU,qCAAoC,wBAAU;AAAA,YAC7D,sBACC;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,iBAAiB;AAAA,gBACxB,UAAU,CAAC,UAAU,oBAAoB,CAAC,UAAW,iCAAK,QAAL,EAAY,WAAW,MAAM,OAAO,MAAM,EAAE;AAAA,gBACjG,WAAU;AAAA,gBAEV;AAAA,sCAAC,YAAO,OAAM,IAAG,2BAAa;AAAA,kBAC7B,iBAAiB,IAAI,CAAC,WACrB,oBAAC,YAAiC,OAAO,YAAY,MAAM,GACxD,sBAAY,MAAM,KADR,YAAY,MAAM,CAE/B,CACD;AAAA;AAAA;AAAA,YACH,IAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,iBAAiB;AAAA,gBACxB,UAAU,CAAC,UAAU,oBAAoB,CAAC,UAAW,iCAAK,QAAL,EAAY,WAAW,MAAM,OAAO,MAAM,EAAE;AAAA,gBACjG,aAAY;AAAA,gBACZ,WAAU;AAAA;AAAA,YACZ;AAAA,aAEJ;AAAA,UAEA,qBAAC,WAAM,WAAU,qBACf;AAAA,gCAAC,UAAK,WAAU,qCAAoC,yBAAW;AAAA,YAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,iBAAiB;AAAA,gBACxB,UAAU,CAAC,UAAU,oBAAoB,CAAC,UAAW,iCAAK,QAAL,EAAY,aAAa,MAAM,OAAO,MAAM,EAAE;AAAA,gBACnG,MAAM;AAAA,gBACN,aAAY;AAAA,gBACZ,WAAU;AAAA;AAAA,YACZ;AAAA,aACF;AAAA,WACF;AAAA,SAEJ;AAAA,MACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,kBAAI,CAAC,oBAAoB;AACvB,wBAAQ;AACR;AAAA,cACF;AACA,sBAAQ,+BAA+B,mBAAmB,MAAS;AAAA,YACrE;AAAA,YACA,UAAU,CAAC;AAAA,YACX,WAAU;AAAA,YAEV;AAAA,kCAAC,SAAM,WAAU,WAAU;AAAA,cAAE;AAAA;AAAA;AAAA,QAE/B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,kBAAkB,cAAc;AAClC,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,OAAE,WAAU,6CAA6C,iBAAO,eAAc;AAAA,MAC/E;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,aAAY;AAAA,UACZ,UAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,2BACZ;AAAA,KAAC,qBACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAU;AAAA,QAET;AAAA,+BACC,oBAAC,WAAQ,WAAU,4BAA2B,IAC5C,uBACF,oBAAC,SAAI,KAAK,sBAAsB,KAAI,IAAG,WAAU,8BAA6B,WAAW,OAAO,IAEhG,oBAAC,cAAW,WAAU,eAAc;AAAA,UAErC,OAAO;AAAA;AAAA;AAAA,IACV;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAEV;AAAA,8BAAC,cAAW,WAAU,eAAc;AAAA,UACnC,OAAO;AAAA;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;AAEA,SAAS,KAAK,EAAE,SAAS,GAAkC;AACzD,QAAM,EAAE,eAAe,kBAAkB,IAAI,kBAAkB;AAE/D,QAAM,WAAW,CAAC,sBACf,kBAAkB,aAAa,kBAAkB,gBAAgB,kBAAkB,cAAc,kBAAkB;AAEtH,SACE,qBAAC,SAAI,WAAU,YACZ;AAAA,gBACC,oBAAC,SAAI,WAAU,yEACb,+BAAC,SAAI,WAAU,iIACb;AAAA,0BAAC,QAAK,WAAU,WAAU;AAAA,MAAE;AAAA,OAE9B,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,mCAAmC,WAAW,+CAA+C,aAAa;AAAA,QAEpH;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAOO,MAAM,iBAAiB,EAAE,MAAM,SAAS,KAAK;","names":["_a"]}
+{"version":3,"sources":["../../src/components/signal-feedback-inline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Check, CirclePlus, ExternalLink, Loader2, Lock, ThumbsDown } from \"lucide-react\"\n\ninterface DismissReasonNode {\n  label: string\n  subOptions?: string[]\n}\n\nconst dismissReasonTree: DismissReasonNode[] = [\n  {\n    label: \"Not relevant for this account\",\n    subOptions: [\n      \"Business as usual for this account\",\n      \"Account in maintenance mode\",\n      \"Wrong contact for this signal\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Bad timing\",\n    subOptions: [\n      \"Too early in the relationship\",\n      \"Too soon after last outreach\",\n      \"Wrong time of year for this account\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Inaccurate data\",\n    subOptions: [\n      \"Wrong amount or number\",\n      \"Stale data\",\n      \"Account info wrong\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Wrong account\",\n    subOptions: [\n      \"Different account meant\",\n      \"Account not in scope\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Already handled\",\n    subOptions: [\n      \"Already in conversation\",\n      \"Already an open Opportunity\",\n      \"Already escalated\",\n      \"Other\",\n    ],\n  },\n  {\n    label: \"Not actionable\",\n    subOptions: [\n      \"No clear next step\",\n      \"Outside our remit\",\n      \"Other\",\n    ],\n  },\n  { label: \"Other\" },\n]\n\nconst approveReasons = [\n  \"Right timing\",\n  \"Accurate data\",\n  \"Good prospect fit\",\n  \"Actionable\",\n]\n\ntype ApprovalState = \"pending\" | \"confirming\" | \"creating\" | \"approving-feedback\" | \"dismissing\" | \"approved\" | \"dismissed\" | \"auto-approved\"\n\ninterface OpportunityPreviewOption {\n  value: string\n  label: string\n}\n\ninterface OpportunityPreview {\n  name: string\n  stage: string\n  closeDate: string\n  closeDateValue?: string\n  amount: string\n  /** Raw draft input value. Numeric values render as currency in the editable field. */\n  amountValue?: string | number | null\n  accountName: string\n  description?: string | null\n  churnType?: string | null\n  churnTypeOptions?: Array<string | OpportunityPreviewOption>\n  nextStep?: string | null\n}\n\ninterface OpportunityDraft {\n  closeDate: string\n  amount: string\n  description: string\n  churnType: string\n  nextStep: string\n}\n\ninterface SignalApprovalLabels {\n  approveButton?: string\n  dismissButton?: string\n  approvedStatus?: string\n  dismissedStatus?: string\n  opportunityCreated?: string\n  confirmPrompt?: string\n  dismissPrompt?: string\n  feedbackPrompt?: string\n  /** Label shown while the approve action is in progress (e.g. \"Creating Opportunity...\"). */\n  creatingStatus?: string\n}\n\nconst DEFAULT_LABELS: Required<SignalApprovalLabels> = {\n  approveButton: \"Approve action\",\n  dismissButton: \"Not Helpful\",\n  approvedStatus: \"Action Approved\",\n  dismissedStatus: \"Action Dismissed\",\n  opportunityCreated: \"Opportunity Created\",\n  confirmPrompt: \"This will approve this action for\",\n  dismissPrompt: \"What\\u2019s the issue with this action?\",\n  feedbackPrompt: \"Quick feedback \\u2014 what made this action useful?\",\n  creatingStatus: \"Creating\\u2026\",\n}\n\ninterface SignalApprovalContextValue {\n  approvalState: ApprovalState\n  companyName: string\n  opportunityUrl?: string\n  scheduledTime?: string\n  labels: Required<SignalApprovalLabels>\n  hideApproveButton?: boolean\n  approveButtonIconUrl?: string\n  opportunityPreview?: OpportunityPreview\n  requestingApproval: boolean\n  approve: (draft?: OpportunityDraft) => void\n  submitApproveFeedback: (reasons: string[], detail: string) => void\n  skipApproveFeedback: () => void\n  dismiss: (reasons: string[], detail: string, subReason?: string) => void\n  requestApproval: () => void\n  requestDismiss: () => void\n  cancel: () => void\n}\n\nconst SignalApprovalCtx = React.createContext<SignalApprovalContextValue | null>(null)\n\nexport function useSignalApproval() {\n  const ctx = React.useContext(SignalApprovalCtx)\n  if (!ctx) throw new Error(\"SignalApproval components must be used within SignalApproval.Root\")\n  return ctx\n}\n\ninterface RootProps {\n  children: React.ReactNode\n  companyName: string\n  opportunityUrl?: string\n  scheduledTime?: string\n  initialApprovalState?: ApprovalState\n  labels?: SignalApprovalLabels\n  /** When true, the approve/create-opportunity button is hidden but the dismiss button remains. */\n  hideApproveButton?: boolean\n  /** Optional icon URL for the approve button. Renders an img instead of CirclePlus when provided. */\n  approveButtonIconUrl?: string\n  /** Optional structured preview data shown in the confirmation dialog. */\n  opportunityPreview?: OpportunityPreview\n  /**\n   * Async callback fired when the user clicks the approve button, BEFORE\n   * transitioning to the \"confirming\" state. While the promise is pending,\n   * the button shows a loading spinner. On resolve, transitions to \"confirming\".\n   * On reject, stays in \"pending\".\n   */\n  onRequestApproval?: () => Promise<void>\n  /**\n   * Called when the user confirms the approval action.\n   *\n   * - If the callback returns `void` (or `undefined`), the component transitions\n   *   directly to the feedback step (backward-compatible behavior).\n   * - If the callback returns a `Promise<boolean>`, the component shows a\n   *   \"creating\" loading state while the promise is pending. On `true` it\n   *   transitions to the feedback step; on `false` it reverts to \"pending\".\n   */\n  onApprove?: (draft?: OpportunityDraft) => void | Promise<boolean>\n  onApproveFeedback?: (reasons: string[], detail: string) => void\n  onDismiss?: (reasons: string[], detail: string, subReason?: string) => void\n}\n\nfunction Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, approveButtonIconUrl, opportunityPreview, onRequestApproval, onApprove, onApproveFeedback, onDismiss }: RootProps) {\n  const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides])\n  const [approvalState, setApprovalState] = React.useState<ApprovalState>(initialApprovalState ?? \"pending\")\n  const [requestingApproval, setRequestingApproval] = React.useState(false)\n\n  // Guard against state updates after unmount (e.g. user navigates away while\n  // an async onApprove promise is still in flight).\n  const mountedRef = React.useRef(true)\n  React.useEffect(() => {\n    mountedRef.current = true\n    return () => { mountedRef.current = false }\n  }, [])\n\n  const requestApproval = React.useCallback(() => {\n    if (onRequestApproval) {\n      setRequestingApproval(true)\n      onRequestApproval()\n        .then(() => {\n          if (mountedRef.current) {\n            setRequestingApproval(false)\n            setApprovalState(\"confirming\")\n          }\n        })\n        .catch(() => {\n          if (mountedRef.current) {\n            setRequestingApproval(false)\n          }\n        })\n    } else {\n      setApprovalState(\"confirming\")\n    }\n  }, [onRequestApproval])\n\n  const requestDismiss = React.useCallback(() => {\n    setApprovalState(\"dismissing\")\n  }, [])\n\n  const cancel = React.useCallback(() => {\n    setApprovalState(\"pending\")\n  }, [])\n\n  const approve = React.useCallback((draft?: OpportunityDraft) => {\n    const result = onApprove?.(draft)\n    // If the callback returns a Promise, show a loading state and wait for it.\n    if (result && typeof (result as Promise<boolean>).then === \"function\") {\n      setApprovalState(\"creating\")\n      ;(result as Promise<boolean>).then((success) => {\n        if (mountedRef.current) {\n          setApprovalState(success ? \"approving-feedback\" : \"pending\")\n        }\n      }).catch(() => {\n        if (mountedRef.current) {\n          setApprovalState(\"pending\")\n        }\n      })\n    } else {\n      // Synchronous / void — transition immediately (backward-compatible).\n      setApprovalState(\"approving-feedback\")\n    }\n  }, [onApprove])\n\n  const submitApproveFeedback = React.useCallback(\n    (reasons: string[], detail: string) => {\n      setApprovalState(\"approved\")\n      onApproveFeedback?.(reasons, detail)\n    },\n    [onApproveFeedback]\n  )\n\n  const skipApproveFeedback = React.useCallback(() => {\n    setApprovalState(\"approved\")\n  }, [])\n\n  const dismiss = React.useCallback(\n    (reasons: string[], detail: string, subReason?: string) => {\n      setApprovalState(\"dismissed\")\n      onDismiss?.(reasons, detail, subReason)\n    },\n    [onDismiss]\n  )\n\n  return (\n    <SignalApprovalCtx.Provider\n      value={{ approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel }}\n    >\n      {children}\n    </SignalApprovalCtx.Provider>\n  )\n}\n\n/** Shared dismiss reason picker used in both the \"editing\" and \"initial dismiss\" paths. */\nfunction DismissReasonPicker({\n  selectedTopReason,\n  selectedSubReason,\n  selectTopReason,\n  selectSubReason,\n  detailText,\n  setDetailText,\n  needsText,\n  canSubmitDismiss,\n  handleDismissSubmit,\n  topNode,\n  submitLabel,\n  onCancel,\n}: {\n  selectedTopReason: string | null\n  selectedSubReason: string | null\n  selectTopReason: (label: string) => void\n  selectSubReason: (label: string) => void\n  detailText: string\n  setDetailText: (value: string) => void\n  needsText: boolean\n  canSubmitDismiss: boolean\n  handleDismissSubmit: () => void\n  topNode: DismissReasonNode | undefined\n  submitLabel: string\n  onCancel: () => void\n}) {\n  return (\n    <>\n      <div className=\"flex flex-wrap gap-1.5\">\n        {dismissReasonTree.map((node) => {\n          const selected = selectedTopReason === node.label\n          return (\n            <button\n              key={node.label}\n              type=\"button\"\n              onClick={() => selectTopReason(node.label)}\n              className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                selected\n                  ? \"border-red-200 bg-red-100 text-red-700\"\n                  : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n              }`}\n            >\n              {node.label}\n            </button>\n          )\n        })}\n      </div>\n\n      {topNode?.subOptions && (\n        <div className=\"ml-3 border-l-2 border-muted pl-3\">\n          <div className=\"flex flex-wrap gap-1.5\">\n            {topNode.subOptions.map((sub) => {\n              const selected = selectedSubReason === sub\n              return (\n                <button\n                  key={sub}\n                  type=\"button\"\n                  onClick={() => selectSubReason(sub)}\n                  className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                    selected\n                      ? \"border-red-200 bg-red-100 text-red-700\"\n                      : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n                  }`}\n                >\n                  {sub}\n                </button>\n              )\n            })}\n          </div>\n        </div>\n      )}\n\n      {selectedTopReason && (\n        <input\n          type=\"text\"\n          value={detailText}\n          onChange={(e) => setDetailText(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" && canSubmitDismiss) handleDismissSubmit()\n          }}\n          placeholder={needsText ? \"Please describe (required)\" : \"Add context (optional)\"}\n          className=\"h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n        />\n      )}\n\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={handleDismissSubmit}\n          disabled={!canSubmitDismiss}\n          className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${\n            canSubmitDismiss\n              ? \"bg-foreground text-background hover:bg-foreground/90\"\n              : \"cursor-not-allowed bg-muted text-muted-foreground\"\n          }`}\n        >\n          {submitLabel}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onCancel}\n          className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n        >\n          Cancel\n        </button>\n      </div>\n    </>\n  )\n}\n\nfunction SubmittedFeedback({\n  reasons,\n  detail,\n  subReason,\n  variant,\n  onEdit,\n}: {\n  reasons: string[]\n  detail: string\n  subReason?: string\n  variant: \"approve\" | \"dismiss\"\n  onEdit: () => void\n}) {\n  if (reasons.length === 0 && !detail) return null\n  const pillClass =\n    variant === \"approve\"\n      ? \"border-emerald-200/60 bg-emerald-50/50 text-emerald-700/70\"\n      : \"border-red-200/60 bg-red-50/50 text-red-700/70\"\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onEdit}\n      className=\"w-full text-left space-y-1.5 group cursor-pointer\"\n    >\n      {reasons.length > 0 && (\n        <div className=\"flex flex-wrap gap-1\">\n          {reasons.map((r) => (\n            <span\n              key={r}\n              className={`rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80 ${pillClass}`}\n            >\n              {r}\n            </span>\n          ))}\n          {subReason && (\n            <span\n              className={`rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80 ${pillClass}`}\n            >\n              {subReason}\n            </span>\n          )}\n        </div>\n      )}\n      {detail && (\n        <p className=\"text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors\">{detail}</p>\n      )}\n    </button>\n  )\n}\n\nfunction optionValue(option: string | OpportunityPreviewOption): string {\n  return typeof option === \"string\" ? option : option.value\n}\n\nfunction optionLabel(option: string | OpportunityPreviewOption): string {\n  return typeof option === \"string\" ? option : option.label\n}\n\nfunction formatAmountDraftValue(value: string | number | null | undefined): string {\n  if (value == null || value === \"\") return \"\"\n  if (typeof value === \"number\") {\n    return new Intl.NumberFormat(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      maximumFractionDigits: 0,\n    }).format(value)\n  }\n  return value\n}\n\nfunction buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {\n  return {\n    closeDate: preview?.closeDateValue ?? preview?.closeDate ?? \"\",\n    amount: preview?.amountValue === undefined\n      ? preview?.amount ?? \"\"\n      : formatAmountDraftValue(preview.amountValue),\n    description: preview?.description ?? \"\",\n    churnType: preview?.churnType ?? \"\",\n    nextStep: preview?.nextStep ?? \"\",\n  }\n}\n\nfunction hasEditableOpportunityPreview(preview?: OpportunityPreview): boolean {\n  return !!preview && isValidDateInput(preview.closeDateValue ?? preview.closeDate)\n}\n\nfunction isValidDateInput(value: string): boolean {\n  const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(value)\n  if (!match) return false\n  const parsed = new Date(`${value}T00:00:00Z`)\n  if (Number.isNaN(parsed.getTime())) return false\n  return parsed.toISOString().slice(0, 10) === value\n}\n\nfunction Actions() {\n  const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =\n    useSignalApproval()\n  const [selectedTopReason, setSelectedTopReason] = React.useState<string | null>(null)\n  const [selectedSubReason, setSelectedSubReason] = React.useState<string | null>(null)\n  const [selectedReasons, setSelectedReasons] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string; subReason?: string } | null>(null)\n  const [isEditing, setIsEditing] = React.useState(false)\n  const [opportunityDraft, setOpportunityDraft] = React.useState<OpportunityDraft>(() => buildOpportunityDraft(opportunityPreview))\n\n  React.useEffect(() => {\n    if (approvalState === \"confirming\") {\n      setOpportunityDraft(buildOpportunityDraft(opportunityPreview))\n    }\n  }, [approvalState, opportunityPreview])\n\n  const churnTypeOptions = opportunityPreview?.churnTypeOptions ?? []\n  const hasChurnTypeOptions = churnTypeOptions.length > 0\n\n  const topNode = dismissReasonTree.find((n) => n.label === selectedTopReason)\n  const hasSubOptions = !!(topNode?.subOptions && topNode.subOptions.length > 0)\n  const isTopOther = selectedTopReason === \"Other\" && !hasSubOptions\n  const isSubOther = selectedSubReason === \"Other\"\n  const needsText = isTopOther || isSubOther\n  const canSubmitDismiss =\n    selectedTopReason !== null &&\n    (!hasSubOptions || selectedSubReason !== null) &&\n    (!needsText || detailText.trim().length > 0)\n\n  const canSubmitApprove = selectedReasons.length > 0 || detailText.trim().length > 0\n  const isEditableOpportunityPreview = hasEditableOpportunityPreview(opportunityPreview)\n  const canConfirmOpportunity = !isEditableOpportunityPreview || isValidDateInput(opportunityDraft.closeDate)\n\n  const selectTopReason = (label: string) => {\n    if (selectedTopReason === label) {\n      setSelectedTopReason(null)\n      setSelectedSubReason(null)\n      setDetailText(\"\")\n    } else {\n      setSelectedTopReason(label)\n      setSelectedSubReason(null)\n      setDetailText(\"\")\n    }\n  }\n\n  const selectSubReason = (label: string) => {\n    setSelectedSubReason(selectedSubReason === label ? null : label)\n  }\n\n  const toggleReason = (reason: string) => {\n    setSelectedReasons((prev) =>\n      prev.includes(reason) ? prev.filter((r) => r !== reason) : [...prev, reason]\n    )\n  }\n\n  const startEditing = () => {\n    if (submittedFeedback) {\n      setSelectedTopReason(submittedFeedback.reasons[0] ?? null)\n      setSelectedSubReason(submittedFeedback.subReason ?? null)\n      // Note: selectedReasons is only used by the approve editing path.\n      // For dismiss feedback this is harmless but unused — the dismiss path\n      // reads selectedTopReason/selectedSubReason instead.\n      setSelectedReasons([...submittedFeedback.reasons])\n      setDetailText(submittedFeedback.detail)\n    }\n    setIsEditing(true)\n  }\n\n  const handleDismissSubmit = () => {\n    if (!canSubmitDismiss || !selectedTopReason) return\n    const fb = { reasons: [selectedTopReason], detail: detailText.trim(), subReason: selectedSubReason ?? undefined }\n    setSubmittedFeedback(fb)\n    dismiss([selectedTopReason], detailText.trim(), selectedSubReason ?? undefined)\n    setSelectedTopReason(null)\n    setSelectedSubReason(null)\n    setDetailText(\"\")\n    setIsEditing(false)\n  }\n\n  const handleApproveSubmit = () => {\n    const fb = { reasons: [...selectedReasons], detail: detailText.trim() }\n    setSubmittedFeedback(fb)\n    submitApproveFeedback(selectedReasons, detailText.trim())\n    setSelectedReasons([])\n    setDetailText(\"\")\n    setIsEditing(false)\n  }\n\n  const handleEditCancel = () => {\n    setSelectedTopReason(null)\n    setSelectedSubReason(null)\n    setSelectedReasons([])\n    setDetailText(\"\")\n    setIsEditing(false)\n  }\n\n  const handleCancel = () => {\n    cancel()\n    setSelectedTopReason(null)\n    setSelectedSubReason(null)\n    setSelectedReasons([])\n    setDetailText(\"\")\n  }\n\n  if (approvalState === \"creating\") {\n    return (\n      <div className=\"flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n        <svg className=\"h-3.5 w-3.5 animate-spin\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n          <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n        <span>{labels.creatingStatus}</span>\n      </div>\n    )\n  }\n\n  if (approvalState === \"approved\") {\n    if (isEditing) {\n      return (\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600 mb-2\">\n            <Check className=\"h-3.5 w-3.5\" />\n            {opportunityUrl ? (\n              <a href={opportunityUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"inline-flex items-center gap-1 hover:underline underline-offset-2\">\n                {labels.approvedStatus} <ExternalLink className=\"h-3 w-3\" />\n              </a>\n            ) : (\n              <span>{labels.approvedStatus}</span>\n            )}\n          </div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Edit your feedback</p>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {approveReasons.map((reason) => {\n              const selected = selectedReasons.includes(reason)\n              return (\n                <button key={reason} type=\"button\" onClick={() => toggleReason(reason)}\n                  className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                    selected ? \"border-emerald-200 bg-emerald-100 text-emerald-700\" : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n                  }`}>{reason}</button>\n              )\n            })}\n          </div>\n          <input type=\"text\" value={detailText} onChange={(e) => setDetailText(e.target.value)}\n            onKeyDown={(e) => { if (e.key === \"Enter\" && canSubmitApprove) handleApproveSubmit() }}\n            placeholder=\"Tell us more (optional)\"\n            className=\"h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\" />\n          <div className=\"flex items-center gap-2\">\n            <button type=\"button\" onClick={handleApproveSubmit} disabled={!canSubmitApprove}\n              className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${canSubmitApprove ? \"bg-foreground text-background hover:bg-foreground/90\" : \"cursor-not-allowed bg-muted text-muted-foreground\"}`}>\n              Save\n            </button>\n            <button type=\"button\" onClick={handleEditCancel}\n              className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\">\n              Cancel\n            </button>\n          </div>\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600\">\n          <Check className=\"h-3.5 w-3.5\" />\n          {opportunityUrl ? (\n            <a\n              href={opportunityUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"inline-flex items-center gap-1 hover:underline underline-offset-2\"\n            >\n              {labels.opportunityCreated}\n              <ExternalLink className=\"h-3 w-3\" />\n            </a>\n          ) : (\n            <span>{labels.opportunityCreated}</span>\n          )}\n        </div>\n        {submittedFeedback && (\n          <SubmittedFeedback\n            reasons={submittedFeedback.reasons}\n            detail={submittedFeedback.detail}\n            variant=\"approve\"\n            onEdit={startEditing}\n          />\n        )}\n      </div>\n    )\n  }\n\n  if (approvalState === \"auto-approved\") {\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600\">\n          <Check className=\"h-3.5 w-3.5\" />\n          <span>{labels.approvedStatus}</span>\n        </div>\n        {scheduledTime && (\n          <p className=\"text-[11px] text-muted-foreground\">Scheduled: {scheduledTime}</p>\n        )}\n      </div>\n    )\n  }\n\n  if (approvalState === \"approving-feedback\") {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-1.5 text-xs font-medium text-emerald-600 mb-2\">\n          <Check className=\"h-3.5 w-3.5\" />\n          {opportunityUrl ? (\n            <a\n              href={opportunityUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"inline-flex items-center gap-1 hover:underline underline-offset-2\"\n            >\n              {labels.opportunityCreated}\n              <ExternalLink className=\"h-3 w-3\" />\n            </a>\n          ) : (\n            <span>{labels.opportunityCreated}</span>\n          )}\n        </div>\n        <p className=\"text-xs font-medium text-muted-foreground\">{labels.feedbackPrompt}</p>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {approveReasons.map((reason) => {\n            const selected = selectedReasons.includes(reason)\n            return (\n              <button\n                key={reason}\n                type=\"button\"\n                onClick={() => toggleReason(reason)}\n                className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${\n                  selected\n                    ? \"border-emerald-200 bg-emerald-100 text-emerald-700\"\n                    : \"border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground\"\n                }`}\n              >\n                {reason}\n              </button>\n            )\n          })}\n        </div>\n\n        <input\n          type=\"text\"\n          value={detailText}\n          onChange={(e) => setDetailText(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" && canSubmitApprove) handleApproveSubmit()\n          }}\n          placeholder=\"Tell us more (optional)\"\n          className=\"h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n        />\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={handleApproveSubmit}\n            disabled={!canSubmitApprove}\n            className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${\n              canSubmitApprove\n                ? \"bg-foreground text-background hover:bg-foreground/90\"\n                : \"cursor-not-allowed bg-muted text-muted-foreground\"\n            }`}\n          >\n            Submit\n          </button>\n          <button\n            type=\"button\"\n            onClick={skipApproveFeedback}\n            className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n          >\n            Skip\n          </button>\n        </div>\n      </div>\n    )\n  }\n\n  if (approvalState === \"dismissed\") {\n    if (isEditing) {\n      return (\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground mb-2\">\n            <ThumbsDown className=\"h-3.5 w-3.5\" />\n            <span>{labels.dismissedStatus}</span>\n          </div>\n          <p className=\"text-xs font-medium text-muted-foreground\">Edit your feedback</p>\n          <DismissReasonPicker\n            selectedTopReason={selectedTopReason}\n            selectedSubReason={selectedSubReason}\n            selectTopReason={selectTopReason}\n            selectSubReason={selectSubReason}\n            detailText={detailText}\n            setDetailText={setDetailText}\n            needsText={needsText}\n            canSubmitDismiss={canSubmitDismiss}\n            handleDismissSubmit={handleDismissSubmit}\n            topNode={topNode}\n            submitLabel=\"Save\"\n            onCancel={handleEditCancel}\n          />\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n          <ThumbsDown className=\"h-3.5 w-3.5\" />\n          <span>{labels.dismissedStatus}</span>\n        </div>\n        {submittedFeedback && (\n          <SubmittedFeedback\n            reasons={submittedFeedback.reasons}\n            detail={submittedFeedback.detail}\n            subReason={submittedFeedback.subReason}\n            variant=\"dismiss\"\n            onEdit={startEditing}\n          />\n        )}\n      </div>\n    )\n  }\n\n  if (approvalState === \"confirming\") {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"rounded-md border border-border bg-muted/30 p-3\">\n          <p className=\"text-sm text-foreground\">\n            {labels.confirmPrompt} <strong>{companyName}</strong>. Confirm?\n          </p>\n          {opportunityPreview && !isEditableOpportunityPreview && (\n            <div className=\"mt-3 space-y-2 border-t border-border/50 pt-3\">\n              {[\n                { label: \"Opportunity\", value: opportunityPreview.name },\n                { label: \"Account\", value: opportunityPreview.accountName },\n                { label: \"Stage\", value: opportunityPreview.stage },\n                { label: \"Close Date\", value: opportunityPreview.closeDate },\n                { label: \"Amount\", value: opportunityPreview.amount },\n              ].map(({ label, value }) => (\n                <div key={label} className=\"flex items-center justify-between gap-3 text-xs\">\n                  <span className=\"text-muted-foreground\">{label}</span>\n                  <span className=\"text-right font-medium text-foreground\">{value}</span>\n                </div>\n              ))}\n            </div>\n          )}\n          {opportunityPreview && isEditableOpportunityPreview && (\n            <div className=\"mt-3 space-y-3 border-t border-border/50 pt-3\">\n              {[\n                { label: \"Opportunity\", value: opportunityPreview.name },\n                { label: \"Account\", value: opportunityPreview.accountName },\n                { label: \"Stage\", value: opportunityPreview.stage },\n              ].map(({ label, value }) => (\n                <div key={label} className=\"flex items-center justify-between gap-3 text-xs\">\n                  <span className=\"text-muted-foreground\">{label}</span>\n                  <span className=\"text-right font-medium text-foreground\">{value}</span>\n                </div>\n              ))}\n\n              <div className=\"grid gap-2 sm:grid-cols-2\">\n                <label className=\"space-y-1 text-xs\">\n                  <span className=\"font-medium text-muted-foreground\">Close Date</span>\n                  <input\n                    type=\"date\"\n                    value={opportunityDraft.closeDate}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, closeDate: event.target.value }))}\n                    aria-invalid={!canConfirmOpportunity}\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n                  />\n                  {!canConfirmOpportunity && (\n                    <span className=\"text-[11px] text-red-600\">Enter a valid close date.</span>\n                  )}\n                </label>\n\n                <label className=\"space-y-1 text-xs\">\n                  <span className=\"font-medium text-muted-foreground\">Amount</span>\n                  <input\n                    type=\"text\"\n                    inputMode=\"decimal\"\n                    value={opportunityDraft.amount}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, amount: event.target.value }))}\n                    placeholder={opportunityPreview.amount}\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                  />\n                </label>\n              </div>\n\n              <label className=\"space-y-1 text-xs\">\n                <span className=\"font-medium text-muted-foreground\">Churn Type</span>\n                {hasChurnTypeOptions ? (\n                  <select\n                    value={opportunityDraft.churnType}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n                  >\n                    <option value=\"\">No churn type</option>\n                    {churnTypeOptions.map((option) => (\n                      <option key={optionValue(option)} value={optionValue(option)}>\n                        {optionLabel(option)}\n                      </option>\n                    ))}\n                  </select>\n                ) : (\n                  <input\n                    type=\"text\"\n                    value={opportunityDraft.churnType}\n                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}\n                    placeholder=\"No churn type\"\n                    className=\"h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                  />\n                )}\n              </label>\n\n              <label className=\"space-y-1 text-xs\">\n                <span className=\"font-medium text-muted-foreground\">Next Step</span>\n                <textarea\n                  value={opportunityDraft.nextStep}\n                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, nextStep: event.target.value }))}\n                  rows={2}\n                  placeholder=\"No next step set\"\n                  className=\"w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                />\n              </label>\n\n              <label className=\"space-y-1 text-xs\">\n                <span className=\"font-medium text-muted-foreground\">Description</span>\n                <textarea\n                  value={opportunityDraft.description}\n                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, description: event.target.value }))}\n                  rows={3}\n                  placeholder=\"Add a short description\"\n                  className=\"w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                />\n              </label>\n            </div>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => {\n              if (!opportunityPreview) {\n                approve()\n                return\n              }\n              approve(isEditableOpportunityPreview ? opportunityDraft : undefined)\n            }}\n            disabled={!canConfirmOpportunity}\n            className=\"inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n          >\n            <Check className=\"h-3 w-3\" />\n            Confirm\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            className=\"inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    )\n  }\n\n  if (approvalState === \"dismissing\") {\n    return (\n      <div className=\"space-y-3\">\n        <p className=\"text-xs font-medium text-muted-foreground\">{labels.dismissPrompt}</p>\n        <DismissReasonPicker\n          selectedTopReason={selectedTopReason}\n          selectedSubReason={selectedSubReason}\n          selectTopReason={selectTopReason}\n          selectSubReason={selectSubReason}\n          detailText={detailText}\n          setDetailText={setDetailText}\n          needsText={needsText}\n          canSubmitDismiss={canSubmitDismiss}\n          handleDismissSubmit={handleDismissSubmit}\n          topNode={topNode}\n          submitLabel=\"Submit\"\n          onCancel={handleCancel}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {!hideApproveButton && (\n        <button\n          type=\"button\"\n          onClick={requestApproval}\n          disabled={requestingApproval}\n          className=\"inline-flex h-7 items-center gap-1.5 rounded-md border border-border bg-foreground px-3 text-xs font-semibold text-background shadow-none transition-colors hover:bg-foreground/90 disabled:opacity-50\"\n        >\n          {requestingApproval ? (\n            <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n          ) : approveButtonIconUrl ? (\n            <img src={approveButtonIconUrl} alt=\"\" className=\"h-3.5 w-3.5 object-contain\" draggable={false} />\n          ) : (\n            <CirclePlus className=\"h-3.5 w-3.5\" />\n          )}\n          {labels.approveButton}\n        </button>\n      )}\n      <button\n        type=\"button\"\n        onClick={requestDismiss}\n        className=\"inline-flex h-7 items-center gap-1.5 rounded-md border border-border px-3 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-foreground\"\n      >\n        <ThumbsDown className=\"h-3.5 w-3.5\" />\n        {labels.dismissButton}\n      </button>\n    </div>\n  )\n}\n\nfunction Gate({ children }: { children: React.ReactNode }) {\n  const { approvalState, hideApproveButton } = useSignalApproval()\n  // When the approve button is hidden, don't lock content behind approval\n  const isLocked = !hideApproveButton &&\n    (approvalState === \"pending\" || approvalState === \"confirming\" || approvalState === \"creating\" || approvalState === \"dismissing\")\n\n  return (\n    <div className=\"relative\">\n      {isLocked && (\n        <div className=\"pointer-events-none absolute inset-x-0 top-4 z-10 flex justify-center\">\n          <div className=\"flex items-center gap-1.5 rounded-full border border-border bg-background px-3 py-1.5 text-xs text-muted-foreground shadow-sm\">\n            <Lock className=\"h-3 w-3\" />\n            Approve or dismiss the signal above to unlock\n          </div>\n        </div>\n      )}\n      <div\n        className={`transition-opacity duration-300 ${isLocked ? \"pointer-events-none select-none opacity-40\" : \"opacity-100\"}`}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport {\n  Root as SignalApprovalRoot,\n  Actions as SignalApprovalActions,\n  Gate as SignalApprovalGate,\n}\nexport const SignalApproval = { Root, Actions, Gate }\nexport type { ApprovalState, OpportunityPreview, OpportunityDraft, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }\n"],"mappings":"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","names":["_a"]}

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.55",
+  "version": "0.18.57",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

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

@@ -442,6 +442,78 @@ describe("DataTableFilter", () => {
     expect(screen.getByPlaceholderText("Search...")).toBeDefined();
   });
 
+  it("fires onOptionSearch and skips client-side filtering for remoteSearch categories", () => {
+    const onOptionSearch = vi.fn();
+    const category: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      remoteSearch: true,
+      // Parent-supplied (already server-filtered) options.
+      options: [{ label: "acme-corp-0001", value: "acme-corp-0001" }],
+    };
+
+    render(
+      <DataTableFilter
+        categories={[category]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        onOptionSearch={onOptionSearch}
+      />
+    );
+
+    // Search box is always shown for remote categories, regardless of option count.
+    const input = screen.getByPlaceholderText("Search...");
+    // Typing a value that does NOT match the option must NOT remove it — the parent
+    // owns filtering — and must notify the parent with the typed query.
+    fireEvent.change(input, { target: { value: "zzz-no-client-match" } });
+    expect(onOptionSearch).toHaveBeenCalledWith("callsign", "zzz-no-client-match");
+    expect(screen.getByText("acme-corp-0001")).toBeDefined();
+  });
+
+  it("shows a loading row while a remoteSearch category is fetching", () => {
+    const category: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      remoteSearch: true,
+      options: [],
+    };
+
+    render(
+      <DataTableFilter
+        categories={[category]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        onOptionSearch={() => {}}
+        optionSearchLoading={{ callsign: true }}
+      />
+    );
+
+    expect(screen.getByText("Searching…")).toBeDefined();
+  });
+
+  it("prompts to type before searching when a remoteSearch category is empty", () => {
+    const category: DataTableFilterCategory = {
+      id: "callsign",
+      label: "Callsign",
+      icon: ListFilter,
+      remoteSearch: true,
+      options: [],
+    };
+
+    render(
+      <DataTableFilter
+        categories={[category]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        onOptionSearch={() => {}}
+      />
+    );
+
+    expect(screen.getByText("Type to search")).toBeDefined();
+  });
+
   it("exposes a condition builder popover entry point when condition fields are provided", () => {
     const conditionFields: ConditionFieldDef[] = [
       { id: "balance", label: "Account Balance", type: "currency" },

package/src/components/__tests__/email-preview-card.test.tsx

@@ -31,7 +31,7 @@ describe("EmailPreviewCard", () => {
     render(<EmailPreviewCard from={from} to="jane@acme.com" />)
     expect(screen.getByText("to jane@acme.com")).toBeTruthy()
     expect(
-      screen.getByText(/This is a preview for jane@acme.com\. Nothing has been sent yet\./),
+      screen.getByText(/This is how your email lands in jane@acme.com's inbox/),
     ).toBeTruthy()
   })
 
@@ -39,30 +39,24 @@ describe("EmailPreviewCard", () => {
     render(<EmailPreviewCard from={from} />)
     expect(screen.getByText("to no recipient yet")).toBeTruthy()
     expect(
-      screen.getByText(/This is a preview for the recipient\. Nothing has been sent yet\./),
+      screen.getByText(/This is how your email lands in the recipient's inbox/),
     ).toBeTruthy()
   })
 
-  it("renders html body markup in the message body area", () => {
+  it("renders html body markup", () => {
     const { container } = render(
       <EmailPreviewCard from={from} htmlBody="<strong>Hello world</strong>" />,
     )
-    expect(screen.getByTestId("email-preview-body").querySelector("strong")?.textContent).toBe("Hello world")
-    expect(container.querySelector("[data-testid='email-preview-body']")?.className).not.toContain("ml-")
+    expect(container.querySelector("strong")?.textContent).toBe("Hello world")
   })
 
-  it("renders the signature as part of the aligned message content", () => {
-    render(
+  it("renders the signature when provided", () => {
+    const { container } = render(
       <EmailPreviewCard
         from={from}
-        htmlBody="<p>Hello</p>"
         signatureHtml="<em>Best, Cory</em>"
       />,
     )
-
-    expect(screen.getByTestId("email-preview-signature").querySelector("em")?.textContent).toBe("Best, Cory")
-    expect(screen.getByTestId("email-preview-body").parentElement).toBe(
-      screen.getByTestId("email-preview-signature").parentElement,
-    )
+    expect(container.querySelector("em")?.textContent).toBe("Best, Cory")
   })
 })

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

@@ -44,6 +44,14 @@ export interface DataTableOptionFilterCategory extends DataTableFilterCategoryBa
   options: (string | FilterOption)[]
   /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
   type?: "multi" | "single" | "boolean"
+  /**
+   * When true, the submenu search box is parent-driven: typing fires
+   * `onOptionSearch(categoryId, query)` and the parent is responsible for
+   * supplying the matching `options` (e.g. a server-backed lookup over a large
+   * set). The built-in client-side option filtering is skipped, the search box
+   * is always shown, and `optionSearchLoading[categoryId]` drives a loading row.
+   */
+  remoteSearch?: boolean
 }
 
 export interface DataTableTextFilterCategory extends DataTableFilterCategoryBase {
@@ -196,6 +204,15 @@ export interface DataTableFilterProps {
   textFilters?: Record<string, string>
   /** Callback when a free-text filter value is applied or cleared. */
   onTextFilterChange?: (categoryId: string, value: string) => void
+  /**
+   * Fired when the submenu search input changes for a category with
+   * `remoteSearch: true`. The parent should debounce, fetch matching options,
+   * and feed them back via that category's `options`. The empty string is sent
+   * when the box is cleared (or the submenu re-opens) so the parent can reset.
+   */
+  onOptionSearch?: (categoryId: string, query: string) => void
+  /** Per-category loading state for remote option search, keyed by category id. */
+  optionSearchLoading?: Record<string, boolean>
 }
 
 export function DataTableFilter({
@@ -213,6 +230,8 @@ export function DataTableFilter({
   conditionBuilderLabel = "Add filter",
   textFilters = {},
   onTextFilterChange,
+  onOptionSearch,
+  optionSearchLoading = {},
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
@@ -360,17 +379,21 @@ export function DataTableFilter({
             }
 
             /* ── Sub-menu (single / multi) ──────────────────────── */
+            const isRemote = category.remoteSearch === true
             const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
-            const filteredOptions = subQuery
-              ? category.options.filter((opt) =>
+            // Remote-search categories are filtered by the parent (server-side);
+            // never client-filter their options.
+            const filteredOptions = isRemote || !subQuery
+              ? category.options
+              : category.options.filter((opt) =>
                   getOptionLabel(opt).toLowerCase().includes(subQuery)
                 )
-              : category.options
-            const shouldShowSubmenuSearch = shouldShowOptionSearch(
+            const shouldShowSubmenuSearch = isRemote || shouldShowOptionSearch(
               category.searchable,
               category.options.length,
               optionSearchThreshold,
             )
+            const isSearching = optionSearchLoading[category.id] === true
 
             return (
               <DropdownMenuSub
@@ -382,6 +405,8 @@ export function DataTableFilter({
                       delete next[category.id]
                       return next
                     })
+                    // Reset the parent's remote results so re-opening starts clean.
+                    if (isRemote) onOptionSearch?.(category.id, "")
                   }
                 }}
               >
@@ -399,9 +424,11 @@ export function DataTableFilter({
                           className="h-7 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted"
                           placeholder="Search..."
                           value={subQueries[category.id] ?? ""}
-                          onChange={(e) =>
-                            setSubQueries((prev) => ({ ...prev, [category.id]: e.target.value }))
-                          }
+                          onChange={(e) => {
+                            const next = e.target.value
+                            setSubQueries((prev) => ({ ...prev, [category.id]: next }))
+                            if (isRemote) onOptionSearch?.(category.id, next)
+                          }}
                           onClick={(e) => e.stopPropagation()}
                           onKeyDown={(e) => {
                             // Allow navigation keys to propagate to Radix menu handling
@@ -447,11 +474,27 @@ export function DataTableFilter({
                       </DropdownMenuItem>
                     )
                   })}
-                  {filteredOptions.length === 0 && category.options.length > 0 && (
+                  {isSearching ? (
                     <div className="p-2 text-center text-xs text-muted-foreground">
-                      No matches
+                      Searching…
                     </div>
-                  )}
+                  ) : filteredOptions.length === 0 ? (
+                    (() => {
+                      const typed = (subQueries[category.id] ?? "").trim().length > 0
+                      const message = isRemote
+                        ? typed
+                          ? "No matches"
+                          : "Type to search"
+                        : category.options.length > 0
+                          ? "No matches"
+                          : null
+                      return message ? (
+                        <div className="p-2 text-center text-xs text-muted-foreground">
+                          {message}
+                        </div>
+                      ) : null
+                    })()
+                  ) : null}
                 </DropdownMenuSubContent>
               </DropdownMenuSub>
             )

package/src/components/email-preview-card.tsx

@@ -43,7 +43,7 @@ export function EmailPreviewCard({
   signatureHtml,
   className,
 }: EmailPreviewCardProps) {
-  const recipientLabel = to || "the recipient"
+  const recipientLabel = to ? `${to}'s` : "the recipient's"
   const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : "")
 
   return (
@@ -51,7 +51,8 @@ export function EmailPreviewCard({
       <div className="flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground">
         <Eye className="size-4 shrink-0 mt-0.5" />
         <span>
-          This is a preview for {recipientLabel}. Nothing has been sent yet.
+          This is how your email lands in {recipientLabel} inbox. Nothing has
+          been sent yet.
         </span>
       </div>
 
@@ -76,24 +77,17 @@ export function EmailPreviewCard({
           <div className="text-xs text-muted-foreground shrink-0">just now</div>
         </div>
 
-        <div className="flex gap-3 px-[18px] pt-3 pb-4">
-          <div className="size-9 shrink-0" aria-hidden="true" />
-          <div className="min-w-0 flex-1 space-y-3">
-            <div
-              className="text-[13.5px] leading-relaxed whitespace-pre-wrap"
-              data-testid="email-preview-body"
-              dangerouslySetInnerHTML={{ __html: bodyHtml }}
-            />
+        <div
+          className="px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap"
+          dangerouslySetInnerHTML={{ __html: bodyHtml }}
+        />
 
-            {signatureHtml ? (
-              <div
-                className="border-t border-border/50 pt-3 text-xs leading-relaxed text-muted-foreground"
-                data-testid="email-preview-signature"
-                dangerouslySetInnerHTML={{ __html: signatureHtml }}
-              />
-            ) : null}
-          </div>
-        </div>
+        {signatureHtml ? (
+          <div
+            className="ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: signatureHtml }}
+          />
+        ) : null}
       </div>
     </div>
   )

package/src/components/signal-feedback-inline.tsx

@@ -90,6 +90,7 @@ interface OpportunityPreview {
   description?: string | null
   churnType?: string | null
   churnTypeOptions?: Array<string | OpportunityPreviewOption>
+  nextStep?: string | null
 }
 
 interface OpportunityDraft {
@@ -97,6 +98,7 @@ interface OpportunityDraft {
   amount: string
   description: string
   churnType: string
+  nextStep: string
 }
 
 interface SignalApprovalLabels {
@@ -466,6 +468,7 @@ function buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {
       : formatAmountDraftValue(preview.amountValue),
     description: preview?.description ?? "",
     churnType: preview?.churnType ?? "",
+    nextStep: preview?.nextStep ?? "",
   }
 }
 
@@ -898,6 +901,17 @@ function Actions() {
                 )}
               </label>
 
+              <label className="space-y-1 text-xs">
+                <span className="font-medium text-muted-foreground">Next Step</span>
+                <textarea
+                  value={opportunityDraft.nextStep}
+                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, nextStep: event.target.value }))}
+                  rows={2}
+                  placeholder="No next step set"
+                  className="w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+              </label>
+
               <label className="space-y-1 text-xs">
                 <span className="font-medium text-muted-foreground">Description</span>
                 <textarea

package/src/prototype/__tests__/detail-view-opportunity-preview.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
 import { fireEvent, render, screen } from "@testing-library/react"
 
 import { DetailView, type DetailViewProps } from "../prototype-inbox-view"
@@ -66,6 +66,7 @@ describe("DetailView opportunity approval preview", () => {
                 description: "Initial description",
                 churnType: "Churn Risk",
                 churnTypeOptions: ["Churn Risk", "Win Back"],
+                nextStep: "Initial next step",
               })
             },
           })}
@@ -84,7 +85,46 @@ describe("DetailView opportunity approval preview", () => {
     expect((await screen.findByLabelText("Close Date") as HTMLInputElement).value).toBe("2026-06-30")
     expect((screen.getByLabelText("Amount") as HTMLInputElement).value).toBe("$75,000")
     expect((screen.getByLabelText("Churn Type") as HTMLSelectElement).value).toBe("Churn Risk")
+    expect((screen.getByLabelText("Next Step") as HTMLTextAreaElement).value).toBe("Initial next step")
     expect((screen.getByLabelText("Description") as HTMLTextAreaElement).value).toBe("Initial description")
     expect((screen.getByRole("button", { name: /confirm/i }) as HTMLButtonElement).disabled).toBe(false)
   })
+
+  it("passes edited next step with the opportunity draft on confirm", async () => {
+    const onSignalApprove = vi.fn()
+
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalApprovalState: () => "confirming",
+          opportunityPreview: {
+            name: "Churn Risk - WIT-825 Fixture Account",
+            accountName: "WIT-825 Fixture Account",
+            stage: "Prospecting",
+            closeDate: "Jun 30, 2026",
+            closeDateValue: "2026-06-30",
+            amount: "$75,000",
+            amountValue: 75000,
+            description: "Initial description",
+            churnType: "Churn Risk",
+            churnTypeOptions: ["Churn Risk", "Win Back"],
+            nextStep: "Initial next step",
+          },
+          onSignalApprove,
+        })}
+      />,
+    )
+
+    const nextStepInput = screen.getByLabelText("Next Step") as HTMLTextAreaElement
+    fireEvent.change(nextStepInput, { target: { value: "Schedule validation call" } })
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+
+    expect(onSignalApprove).toHaveBeenCalledWith(baseItem, {
+      closeDate: "2026-06-30",
+      amount: "$75,000",
+      churnType: "Churn Risk",
+      description: "Initial description",
+      nextStep: "Schedule validation call",
+    })
+  })
 })