@handled-ai/design-system 0.18.37 → 0.18.39

package/dist/charts/chart.d.ts

@@ -48,7 +48,7 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     labelClassName?: string;
     color?: string;
 }): React.JSX.Element | null;
-declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
 type LegendPayloadItem = {
     value?: string;
     dataKey?: string;

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/draft-feedback-inline.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 interface DraftFeedbackInlineProps {
-    initialDirection?: 'up' | 'down' | null;
+    initialDirection?: "up" | "down" | null;
     onRegenerateRequest?: (pills: string[], detail: string) => void;
     onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void;
     onDiscardRequest?: (pills: string[], detail: string) => void;

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

@@ -53,7 +53,7 @@ function DraftFeedbackInline({
   }, [thumbState, selectedPills, detailText, onDiscardRequest]);
   if (noted) {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200", children: [
-      /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }),
+      /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-foreground" }),
       /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Feedback recorded" })
     ] });
   }
@@ -63,7 +63,7 @@ function DraftFeedbackInline({
       /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-indigo-600 dark:text-indigo-400", children: "Regenerating draft..." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground font-medium", children: "How's this draft?" }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
@@ -75,8 +75,8 @@ function DraftFeedbackInline({
               setSelectedPills([]);
               setDetailText("");
             },
-            className: `p-1.5 rounded transition-colors ${thumbState === "up" ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
-            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-4 h-4", fill: thumbState === "up" ? "currentColor" : "none" })
+            className: `p-1.5 rounded transition-colors ${thumbState === "up" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-4 h-4" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -87,20 +87,20 @@ function DraftFeedbackInline({
               setSelectedPills([]);
               setDetailText("");
             },
-            className: `p-1.5 rounded transition-colors ${thumbState === "down" ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
-            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-4 h-4", fill: thumbState === "down" ? "currentColor" : "none" })
+            className: `p-1.5 rounded transition-colors ${thumbState === "down" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-4 h-4" })
           }
         )
       ] })
     ] }),
-    thumbState && /* @__PURE__ */ jsxs("div", { className: "pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200", children: [
+    thumbState && /* @__PURE__ */ jsxs("div", { className: "pt-2 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mb-2 block font-medium", children: thumbState === "up" ? "What worked well?" : "What needs improvement?" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (thumbState === "up" ? positivePills : negativePills).map((pill) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: (thumbState === "up" ? positivePills : negativePills).map((pill) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => togglePill(pill),
-            className: `px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${selectedPills.includes(pill) ? thumbState === "up" ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800" : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"}`,
+            className: `px-3 py-1.5 rounded-full text-[11px] font-medium border transition-colors ${selectedPills.includes(pill) ? thumbState === "up" ? "bg-muted text-foreground border-border" : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"}`,
             children: pill
           },
           pill
@@ -115,7 +115,7 @@ function DraftFeedbackInline({
           className: "w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-1", children: thumbState === "down" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5 pt-2", children: thumbState === "down" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "button",
           {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/draft-feedback-inline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ThumbsUp,\n  ThumbsDown,\n  Check,\n  RefreshCw,\n} from \"lucide-react\"\n\n// ---------------------------------------------------------------------------\n// DraftFeedbackInline\n// ---------------------------------------------------------------------------\n\nconst positivePills = [\"Tone\", \"Personalization\", \"Length\", \"CTA\", \"Other\"]\nconst negativePills = [\"Too formal\", \"Too casual\", \"Too long\", \"Missing context\", \"Wrong angle\", \"Factual error\", \"Other\"]\n\nexport interface DraftFeedbackInlineProps {\n  initialDirection?: 'up' | 'down' | null\n  onRegenerateRequest?: (pills: string[], detail: string) => void\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  onDiscardRequest?: (pills: string[], detail: string) => void\n}\n\nexport function DraftFeedbackInline({\n  initialDirection,\n  onRegenerateRequest,\n  onSubmitFeedback,\n  onDiscardRequest,\n}: DraftFeedbackInlineProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(initialDirection ?? null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [noted, setNoted] = React.useState(false)\n  const [regenerated, setRegenerated] = React.useState(false)\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setNoted(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setNoted(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const handleRegenerate = React.useCallback(() => {\n    if (!thumbState) return\n    onRegenerateRequest?.(selectedPills, detailText)\n    setRegenerated(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setRegenerated(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onRegenerateRequest])\n\n  const handleDiscard = React.useCallback(() => {\n    if (!thumbState) return\n    onDiscardRequest?.(selectedPills, detailText)\n  }, [thumbState, selectedPills, detailText, onDiscardRequest])\n\n  if (noted) {\n    return (\n      <div className=\"flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <Check className=\"w-3.5 h-3.5 text-emerald-500\" />\n        <span className=\"text-xs text-muted-foreground\">Feedback recorded</span>\n      </div>\n    )\n  }\n\n  if (regenerated) {\n    return (\n      <div className=\"py-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <div className=\"flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800\">\n          <RefreshCw className=\"w-3 h-3 text-indigo-500 animate-spin\" />\n          <span className=\"text-xs font-medium text-indigo-600 dark:text-indigo-400\">Regenerating draft...</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-0\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-foreground font-medium\">How&apos;s this draft?</span>\n        <div className=\"flex gap-1\">\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"up\" ? null : \"up\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"up\"\n                ? \"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsUp className=\"w-4 h-4\" fill={thumbState === \"up\" ? \"currentColor\" : \"none\"} />\n          </button>\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"down\" ? null : \"down\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"down\"\n                ? \"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsDown className=\"w-4 h-4\" fill={thumbState === \"down\" ? \"currentColor\" : \"none\"} />\n          </button>\n        </div>\n      </div>\n\n      {thumbState && (\n        <div className=\"pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200\">\n          <div>\n            <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n              {thumbState === \"up\" ? \"What worked well?\" : \"What needs improvement?\"}\n            </span>\n            <div className=\"flex flex-wrap gap-1.5\">\n              {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n                <button\n                  key={pill}\n                  onClick={() => togglePill(pill)}\n                  className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${\n                    selectedPills.includes(pill)\n                      ? thumbState === \"up\"\n                        ? \"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800\"\n                        : \"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\"\n                      : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                  }`}\n                >\n                  {pill}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          <textarea\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            placeholder={thumbState === \"up\" ? \"Add specific praise (optional)...\" : \"Provide specific instructions (optional)...\"}\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]\"\n          />\n\n          <div className=\"flex items-center gap-2 pt-1\">\n            {thumbState === \"down\" ? (\n              <>\n                <button\n                  onClick={handleRegenerate}\n                  disabled={selectedPills.length === 0 && detailText.length === 0}\n                  className={`flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${\n                    selectedPills.length > 0 || detailText.length > 0\n                      ? \"bg-foreground text-background hover:bg-foreground/90\"\n                      : \"bg-muted text-muted-foreground cursor-not-allowed\"\n                  }`}\n                >\n                  <RefreshCw className=\"w-3 h-3\" />\n                  Regenerate draft\n                </button>\n                <button\n                  onClick={handleDiscard}\n                  className=\"flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5\"\n                >\n                  Discard draft\n                </button>\n              </>\n            ) : (\n              <button\n                onClick={handleSubmit}\n                className=\"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent\"\n              >\n                Submit feedback\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/draft-feedback-inline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ThumbsUp,\n  ThumbsDown,\n  Check,\n  RefreshCw,\n} from \"lucide-react\"\n\n// ---------------------------------------------------------------------------\n// DraftFeedbackInline\n// ---------------------------------------------------------------------------\n\nconst positivePills = [\"Tone\", \"Personalization\", \"Length\", \"CTA\", \"Other\"]\nconst negativePills = [\"Too formal\", \"Too casual\", \"Too long\", \"Missing context\", \"Wrong angle\", \"Factual error\", \"Other\"]\n\nexport interface DraftFeedbackInlineProps {\n  initialDirection?: \"up\" | \"down\" | null\n  onRegenerateRequest?: (pills: string[], detail: string) => void\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  onDiscardRequest?: (pills: string[], detail: string) => void\n}\n\nexport function DraftFeedbackInline({\n  initialDirection,\n  onRegenerateRequest,\n  onSubmitFeedback,\n  onDiscardRequest,\n}: DraftFeedbackInlineProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(initialDirection ?? null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [noted, setNoted] = React.useState(false)\n  const [regenerated, setRegenerated] = React.useState(false)\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setNoted(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setNoted(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const handleRegenerate = React.useCallback(() => {\n    if (!thumbState) return\n    onRegenerateRequest?.(selectedPills, detailText)\n    setRegenerated(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setRegenerated(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onRegenerateRequest])\n\n  const handleDiscard = React.useCallback(() => {\n    if (!thumbState) return\n    onDiscardRequest?.(selectedPills, detailText)\n  }, [thumbState, selectedPills, detailText, onDiscardRequest])\n\n  if (noted) {\n    return (\n      <div className=\"flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <Check className=\"w-3.5 h-3.5 text-foreground\" />\n        <span className=\"text-xs text-muted-foreground\">Feedback recorded</span>\n      </div>\n    )\n  }\n\n  if (regenerated) {\n    return (\n      <div className=\"py-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <div className=\"flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800\">\n          <RefreshCw className=\"w-3 h-3 text-indigo-500 animate-spin\" />\n          <span className=\"text-xs font-medium text-indigo-600 dark:text-indigo-400\">Regenerating draft...</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-foreground font-medium\">How&apos;s this draft?</span>\n        <div className=\"flex gap-1\">\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"up\" ? null : \"up\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"up\"\n                ? \"bg-muted text-foreground\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsUp className=\"w-4 h-4\" />\n          </button>\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"down\" ? null : \"down\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"down\"\n                ? \"bg-muted text-foreground\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsDown className=\"w-4 h-4\" />\n          </button>\n        </div>\n      </div>\n\n      {thumbState && (\n        <div className=\"pt-2 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200\">\n          <div>\n            <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n              {thumbState === \"up\" ? \"What worked well?\" : \"What needs improvement?\"}\n            </span>\n            <div className=\"flex flex-wrap gap-2\">\n              {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n                <button\n                  key={pill}\n                  onClick={() => togglePill(pill)}\n                  className={`px-3 py-1.5 rounded-full text-[11px] font-medium border transition-colors ${\n                    selectedPills.includes(pill)\n                      ? thumbState === \"up\"\n                        ? \"bg-muted text-foreground border-border\"\n                        : \"bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800\"\n                      : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                  }`}\n                >\n                  {pill}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          <textarea\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            placeholder={thumbState === \"up\" ? \"Add specific praise (optional)...\" : \"Provide specific instructions (optional)...\"}\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]\"\n          />\n\n          <div className=\"flex items-center gap-2.5 pt-2\">\n            {thumbState === \"down\" ? (\n              <>\n                <button\n                  onClick={handleRegenerate}\n                  disabled={selectedPills.length === 0 && detailText.length === 0}\n                  className={`flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${\n                    selectedPills.length > 0 || detailText.length > 0\n                      ? \"bg-foreground text-background hover:bg-foreground/90\"\n                      : \"bg-muted text-muted-foreground cursor-not-allowed\"\n                  }`}\n                >\n                  <RefreshCw className=\"w-3 h-3\" />\n                  Regenerate draft\n                </button>\n                <button\n                  onClick={handleDiscard}\n                  className=\"flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5\"\n                >\n                  Discard draft\n                </button>\n              </>\n            ) : (\n              <button\n                onClick={handleSubmit}\n                className=\"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent\"\n              >\n                Submit feedback\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

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

@@ -342,6 +342,9 @@ function EmailRecipientField({
                 value,
                 onChange: (event) => setValue(event.target.value),
                 onKeyDown: handleKeyDown,
+                onBlur: () => {
+                  if (isValidEmail(value)) addEmail(value);
+                },
                 placeholder: resolvedPlaceholder,
                 className: "min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground"
               }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/email-recipient-field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  Check,\n  ChevronDown,\n  CornerDownLeft,\n  Plus,\n  Search,\n  Users,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport type { SuggestedContact } from \"./suggested-actions\"\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nfunction isValidEmail(value: string): boolean {\n  return EMAIL_REGEX.test(value.trim())\n}\n\nfunction contactEmail(contact: SuggestedContact): string | undefined {\n  return contact.email ?? contact.emails?.[0]\n}\n\nfunction getInitials(name: string, fallback: string): string {\n  const source = name?.trim() || fallback\n  return source\n    .split(/[\\s@.]+/)\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nexport interface RecipientChip {\n  id: string\n  email: string\n  name: string\n  confirmed: boolean\n}\n\nexport interface EmailRecipientFieldProps {\n  label: string\n  recipients: RecipientChip[]\n  onRecipientsChange: (recipients: RecipientChip[]) => void\n  amber?: boolean\n  contacts?: SuggestedContact[]\n  showPicker?: boolean\n  showCcBcc?: boolean\n  ccBccOpen?: boolean\n  onCcBccToggle?: () => void\n  addedEmails?: Set<string>\n  placeholder?: string\n  contactToRecipient?: (contact: SuggestedContact) => RecipientChip\n}\n\nfunction RecipientChipPill({\n  recipient,\n  onConfirm,\n  onRemove,\n}: {\n  recipient: RecipientChip\n  onConfirm: () => void\n  onRemove: () => void\n}) {\n  const display = recipient.name || recipient.email\n\n  if (!recipient.confirmed) {\n    return (\n      <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-amber-300 bg-amber-50 text-amber-900\">\n        <span className=\"truncate max-w-[180px]\">{display}</span>\n        <button\n          type=\"button\"\n          onClick={onConfirm}\n          className=\"text-[10.5px] font-semibold px-[7px] py-0.5 rounded bg-amber-300/50 hover:bg-amber-300/85\"\n        >\n          Confirm\n        </button>\n        <button\n          type=\"button\"\n          aria-label={`Remove ${display}`}\n          onClick={onRemove}\n          className=\"inline-flex items-center justify-center size-[17px] rounded text-amber-700/80 hover:bg-amber-300/40\"\n        >\n          <X className=\"size-3\" />\n        </button>\n      </span>\n    )\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground\">\n      <span className=\"inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700\">\n        <Check className=\"size-3\" />\n      </span>\n      <span className=\"truncate max-w-[180px]\">{display}</span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${display}`}\n        onClick={onRemove}\n        className=\"inline-flex items-center justify-center size-[17px] rounded text-muted-foreground hover:bg-muted\"\n      >\n        <X className=\"size-3\" />\n      </button>\n    </span>\n  )\n}\n\nfunction ContactPickerPopover({\n  triggerRef,\n  contacts,\n  addedEmails,\n  onSelect,\n  onAddEmail,\n  onClose,\n}: {\n  triggerRef: React.RefObject<HTMLElement | null>\n  contacts: SuggestedContact[]\n  addedEmails: Set<string>\n  onSelect: (contact: SuggestedContact) => void\n  onAddEmail: (email: string) => void\n  onClose: () => void\n}) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const searchRef = React.useRef<HTMLInputElement>(null)\n  const [query, setQuery] = React.useState(\"\")\n  const [style, setStyle] = React.useState<React.CSSProperties>({\n    position: \"fixed\",\n    top: -9999,\n    left: -9999,\n  })\n\n  React.useEffect(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    const rect = trigger.getBoundingClientRect()\n    const width = Math.min(448, window.innerWidth - 32)\n    let left = rect.left\n    if (left + width > window.innerWidth - 16) {\n      left = window.innerWidth - 16 - width\n    }\n    if (left < 16) left = 16\n    const popoverHeight = 280\n    const spaceBelow = window.innerHeight - rect.bottom - 4\n    const spaceAbove = rect.top - 4\n    const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow\n    let top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4\n    if (top < 16) top = 16\n    setStyle({ position: \"fixed\", top, left, width })\n  }, [triggerRef])\n\n  React.useEffect(() => {\n    searchRef.current?.focus()\n    const trigger = triggerRef.current\n    return () => {\n      if (trigger && typeof trigger.focus === \"function\") {\n        trigger.focus()\n      }\n    }\n  }, [triggerRef])\n\n  React.useEffect(() => {\n    function handleMouseDown(event: MouseEvent) {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target as Node) &&\n        !triggerRef.current?.contains(event.target as Node)\n      ) {\n        onClose()\n      }\n    }\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        event.stopPropagation()\n        onClose()\n      }\n    }\n    document.addEventListener(\"mousedown\", handleMouseDown)\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => {\n      document.removeEventListener(\"mousedown\", handleMouseDown)\n      document.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [onClose, triggerRef])\n\n  const normalizedQuery = query.trim().toLowerCase()\n  const filtered = normalizedQuery\n    ? contacts.filter((contact) => {\n        const email = contactEmail(contact) ?? \"\"\n        return (\n          contact.name.toLowerCase().includes(normalizedQuery) ||\n          contact.role.toLowerCase().includes(normalizedQuery) ||\n          email.toLowerCase().includes(normalizedQuery)\n        )\n      })\n    : contacts\n\n  const queryIsEmail = isValidEmail(query)\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\" && queryIsEmail) {\n      event.preventDefault()\n      onAddEmail(query.trim())\n      setQuery(\"\")\n    }\n  }\n\n  return createPortal(\n    <div\n      ref={containerRef}\n      style={style}\n      className=\"bg-background border rounded-lg shadow-xl z-50 pointer-events-auto\"\n    >\n      <div className=\"flex items-center gap-2 px-3 py-2.5 border-b border-border/50\">\n        <Search className=\"size-4 text-muted-foreground shrink-0\" />\n        <input\n          ref={searchRef}\n          autoFocus\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          onKeyDown={handleKeyDown}\n          className=\"flex-1 text-[13px] bg-transparent outline-none\"\n          placeholder=\"Search contacts...\"\n        />\n      </div>\n\n      <div role=\"listbox\" className=\"max-h-[208px] overflow-y-auto p-1\">\n        {filtered.length === 0 ? (\n          <div className=\"px-3 py-4 text-center text-[13px] text-muted-foreground\">\n            <div>No contact matches &lsquo;{query}&rsquo;.</div>\n            {queryIsEmail ? (\n              <div className=\"mt-1\">Press Enter to add {query}.</div>\n            ) : null}\n          </div>\n        ) : (\n          filtered.map((contact, index) => {\n            const email = contactEmail(contact)\n            const noEmail = !email || !isValidEmail(email)\n            const alreadyAdded = email\n              ? addedEmails.has(email.toLowerCase())\n              : false\n            const disabled = noEmail || alreadyAdded\n\n            return (\n              <div\n                key={`${contact.name}-${email ?? index}`}\n                role=\"option\"\n                aria-selected={false}\n                aria-disabled={disabled}\n                onClick={() => {\n                  if (!disabled) onSelect(contact)\n                }}\n                className={cn(\n                  \"flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer hover:bg-muted/60\",\n                  disabled && \"opacity-45 pointer-events-none\",\n                )}\n              >\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-muted text-[11px] font-medium text-muted-foreground\">\n                  {getInitials(contact.name, email ?? \"?\")}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <span className=\"truncate text-[13px] font-medium text-foreground\">\n                      {contact.name}\n                    </span>\n                    <span className=\"truncate text-[11px] text-muted-foreground\">\n                      {contact.role}\n                    </span>\n                  </div>\n                  {email ? (\n                    <div className=\"truncate text-[11px] text-muted-foreground\">\n                      {email}\n                    </div>\n                  ) : null}\n                </div>\n                {alreadyAdded ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    Added\n                  </span>\n                ) : noEmail ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    No email\n                  </span>\n                ) : null}\n              </div>\n            )\n          })\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-1.5 px-3 py-2 border-t border-border/50 text-[11px] text-muted-foreground\">\n        <CornerDownLeft className=\"size-3 shrink-0\" />\n        <span>Type an address and press Enter to add someone not listed.</span>\n      </div>\n    </div>,\n    document.body,\n  )\n}\n\nexport function EmailRecipientField({\n  label,\n  recipients,\n  onRecipientsChange,\n  amber = false,\n  contacts = [],\n  showPicker = false,\n  showCcBcc = false,\n  ccBccOpen = false,\n  onCcBccToggle,\n  addedEmails,\n  placeholder,\n  contactToRecipient,\n}: EmailRecipientFieldProps) {\n  const [value, setValue] = React.useState(\"\")\n  const [pickerOpen, setPickerOpen] = React.useState(false)\n  const contactsTriggerRef = React.useRef<HTMLButtonElement>(null)\n\n  const hasUnconfirmed = recipients.some((r) => !r.confirmed)\n  const state: \"default\" | \"amber\" =\n    amber && hasUnconfirmed ? \"amber\" : \"default\"\n  const amberRow = state === \"amber\"\n\n  const added = addedEmails ?? new Set<string>()\n\n  const resolvedPlaceholder =\n    placeholder ?? (recipients.length > 0 ? \"Add another...\" : \"Add email...\")\n\n  function addEmail(email: string) {\n    const trimmed = email.trim()\n    if (!isValidEmail(trimmed)) return\n    if (added.has(trimmed.toLowerCase())) return\n    onRecipientsChange([\n      ...recipients,\n      { id: trimmed, email: trimmed, name: \"\", confirmed: false },\n    ])\n    setValue(\"\")\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if ((event.key === \"Enter\" || event.key === \",\") && isValidEmail(value)) {\n      event.preventDefault()\n      addEmail(value)\n      return\n    }\n    if (event.key === \"Backspace\" && value === \"\" && recipients.length > 0) {\n      event.preventDefault()\n      onRecipientsChange(recipients.slice(0, -1))\n    }\n  }\n\n  function confirmRecipient(id: string) {\n    onRecipientsChange(\n      recipients.map((r) => (r.id === id ? { ...r, confirmed: true } : r)),\n    )\n  }\n\n  function removeRecipient(id: string) {\n    onRecipientsChange(recipients.filter((r) => r.id !== id))\n  }\n\n  function selectContact(contact: SuggestedContact) {\n    const recipient =\n      contactToRecipient?.(contact) ??\n      ({\n        id: contactEmail(contact) ?? contact.name,\n        email: contactEmail(contact) ?? \"\",\n        name: contact.name,\n        confirmed: true,\n      } satisfies RecipientChip)\n    onRecipientsChange([...recipients, recipient])\n    setPickerOpen(false)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-start text-sm\",\n        amberRow && \"bg-amber-50/35 border-amber-200/80\",\n      )}\n    >\n      <div\n        className={cn(\n          \"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground pt-[7px]\",\n          amberRow && \"text-amber-700\",\n        )}\n      >\n        {label}\n      </div>\n\n      <div className=\"min-w-0\">\n        <div className=\"flex flex-wrap gap-1.5 items-center\">\n          {recipients.map((recipient) => (\n            <RecipientChipPill\n              key={recipient.id}\n              recipient={recipient}\n              onConfirm={() => confirmRecipient(recipient.id)}\n              onRemove={() => removeRecipient(recipient.id)}\n            />\n          ))}\n          <input\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={resolvedPlaceholder}\n            className=\"min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        {showPicker || showCcBcc ? (\n          <div className=\"flex gap-1.5 mt-2\">\n            {showPicker ? (\n              <button\n                ref={contactsTriggerRef}\n                type=\"button\"\n                onClick={() => setPickerOpen((open) => !open)}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Users className=\"size-3\" />\n                Contacts\n                <ChevronDown className=\"size-3\" />\n              </button>\n            ) : null}\n            {showCcBcc ? (\n              <button\n                type=\"button\"\n                onClick={onCcBccToggle}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Plus className=\"size-3\" />\n                {ccBccOpen ? \"Hide Cc/Bcc\" : \"Add Cc/Bcc\"}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n\n        {pickerOpen ? (\n          <ContactPickerPopover\n            triggerRef={contactsTriggerRef}\n            contacts={contacts}\n            addedEmails={added}\n            onSelect={selectContact}\n            onAddEmail={(email) => {\n              addEmail(email)\n              setPickerOpen(false)\n            }}\n            onClose={() => setPickerOpen(false)}\n          />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["handleKeyDown"]}
+{"version":3,"sources":["../../src/components/email-recipient-field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  Check,\n  ChevronDown,\n  CornerDownLeft,\n  Plus,\n  Search,\n  Users,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport type { SuggestedContact } from \"./suggested-actions\"\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nfunction isValidEmail(value: string): boolean {\n  return EMAIL_REGEX.test(value.trim())\n}\n\nfunction contactEmail(contact: SuggestedContact): string | undefined {\n  return contact.email ?? contact.emails?.[0]\n}\n\nfunction getInitials(name: string, fallback: string): string {\n  const source = name?.trim() || fallback\n  return source\n    .split(/[\\s@.]+/)\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nexport interface RecipientChip {\n  id: string\n  email: string\n  name: string\n  confirmed: boolean\n}\n\nexport interface EmailRecipientFieldProps {\n  label: string\n  recipients: RecipientChip[]\n  onRecipientsChange: (recipients: RecipientChip[]) => void\n  amber?: boolean\n  contacts?: SuggestedContact[]\n  showPicker?: boolean\n  showCcBcc?: boolean\n  ccBccOpen?: boolean\n  onCcBccToggle?: () => void\n  addedEmails?: Set<string>\n  placeholder?: string\n  contactToRecipient?: (contact: SuggestedContact) => RecipientChip\n}\n\nfunction RecipientChipPill({\n  recipient,\n  onConfirm,\n  onRemove,\n}: {\n  recipient: RecipientChip\n  onConfirm: () => void\n  onRemove: () => void\n}) {\n  const display = recipient.name || recipient.email\n\n  if (!recipient.confirmed) {\n    return (\n      <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-amber-300 bg-amber-50 text-amber-900\">\n        <span className=\"truncate max-w-[180px]\">{display}</span>\n        <button\n          type=\"button\"\n          onClick={onConfirm}\n          className=\"text-[10.5px] font-semibold px-[7px] py-0.5 rounded bg-amber-300/50 hover:bg-amber-300/85\"\n        >\n          Confirm\n        </button>\n        <button\n          type=\"button\"\n          aria-label={`Remove ${display}`}\n          onClick={onRemove}\n          className=\"inline-flex items-center justify-center size-[17px] rounded text-amber-700/80 hover:bg-amber-300/40\"\n        >\n          <X className=\"size-3\" />\n        </button>\n      </span>\n    )\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground\">\n      <span className=\"inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700\">\n        <Check className=\"size-3\" />\n      </span>\n      <span className=\"truncate max-w-[180px]\">{display}</span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${display}`}\n        onClick={onRemove}\n        className=\"inline-flex items-center justify-center size-[17px] rounded text-muted-foreground hover:bg-muted\"\n      >\n        <X className=\"size-3\" />\n      </button>\n    </span>\n  )\n}\n\nfunction ContactPickerPopover({\n  triggerRef,\n  contacts,\n  addedEmails,\n  onSelect,\n  onAddEmail,\n  onClose,\n}: {\n  triggerRef: React.RefObject<HTMLElement | null>\n  contacts: SuggestedContact[]\n  addedEmails: Set<string>\n  onSelect: (contact: SuggestedContact) => void\n  onAddEmail: (email: string) => void\n  onClose: () => void\n}) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const searchRef = React.useRef<HTMLInputElement>(null)\n  const [query, setQuery] = React.useState(\"\")\n  const [style, setStyle] = React.useState<React.CSSProperties>({\n    position: \"fixed\",\n    top: -9999,\n    left: -9999,\n  })\n\n  React.useEffect(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    const rect = trigger.getBoundingClientRect()\n    const width = Math.min(448, window.innerWidth - 32)\n    let left = rect.left\n    if (left + width > window.innerWidth - 16) {\n      left = window.innerWidth - 16 - width\n    }\n    if (left < 16) left = 16\n    const popoverHeight = 280\n    const spaceBelow = window.innerHeight - rect.bottom - 4\n    const spaceAbove = rect.top - 4\n    const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow\n    let top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4\n    if (top < 16) top = 16\n    setStyle({ position: \"fixed\", top, left, width })\n  }, [triggerRef])\n\n  React.useEffect(() => {\n    searchRef.current?.focus()\n    const trigger = triggerRef.current\n    return () => {\n      if (trigger && typeof trigger.focus === \"function\") {\n        trigger.focus()\n      }\n    }\n  }, [triggerRef])\n\n  React.useEffect(() => {\n    function handleMouseDown(event: MouseEvent) {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target as Node) &&\n        !triggerRef.current?.contains(event.target as Node)\n      ) {\n        onClose()\n      }\n    }\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        event.stopPropagation()\n        onClose()\n      }\n    }\n    document.addEventListener(\"mousedown\", handleMouseDown)\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => {\n      document.removeEventListener(\"mousedown\", handleMouseDown)\n      document.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [onClose, triggerRef])\n\n  const normalizedQuery = query.trim().toLowerCase()\n  const filtered = normalizedQuery\n    ? contacts.filter((contact) => {\n        const email = contactEmail(contact) ?? \"\"\n        return (\n          contact.name.toLowerCase().includes(normalizedQuery) ||\n          contact.role.toLowerCase().includes(normalizedQuery) ||\n          email.toLowerCase().includes(normalizedQuery)\n        )\n      })\n    : contacts\n\n  const queryIsEmail = isValidEmail(query)\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\" && queryIsEmail) {\n      event.preventDefault()\n      onAddEmail(query.trim())\n      setQuery(\"\")\n    }\n  }\n\n  return createPortal(\n    <div\n      ref={containerRef}\n      style={style}\n      className=\"bg-background border rounded-lg shadow-xl z-50 pointer-events-auto\"\n    >\n      <div className=\"flex items-center gap-2 px-3 py-2.5 border-b border-border/50\">\n        <Search className=\"size-4 text-muted-foreground shrink-0\" />\n        <input\n          ref={searchRef}\n          autoFocus\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          onKeyDown={handleKeyDown}\n          className=\"flex-1 text-[13px] bg-transparent outline-none\"\n          placeholder=\"Search contacts...\"\n        />\n      </div>\n\n      <div role=\"listbox\" className=\"max-h-[208px] overflow-y-auto p-1\">\n        {filtered.length === 0 ? (\n          <div className=\"px-3 py-4 text-center text-[13px] text-muted-foreground\">\n            <div>No contact matches &lsquo;{query}&rsquo;.</div>\n            {queryIsEmail ? (\n              <div className=\"mt-1\">Press Enter to add {query}.</div>\n            ) : null}\n          </div>\n        ) : (\n          filtered.map((contact, index) => {\n            const email = contactEmail(contact)\n            const noEmail = !email || !isValidEmail(email)\n            const alreadyAdded = email\n              ? addedEmails.has(email.toLowerCase())\n              : false\n            const disabled = noEmail || alreadyAdded\n\n            return (\n              <div\n                key={`${contact.name}-${email ?? index}`}\n                role=\"option\"\n                aria-selected={false}\n                aria-disabled={disabled}\n                onClick={() => {\n                  if (!disabled) onSelect(contact)\n                }}\n                className={cn(\n                  \"flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer hover:bg-muted/60\",\n                  disabled && \"opacity-45 pointer-events-none\",\n                )}\n              >\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-muted text-[11px] font-medium text-muted-foreground\">\n                  {getInitials(contact.name, email ?? \"?\")}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <span className=\"truncate text-[13px] font-medium text-foreground\">\n                      {contact.name}\n                    </span>\n                    <span className=\"truncate text-[11px] text-muted-foreground\">\n                      {contact.role}\n                    </span>\n                  </div>\n                  {email ? (\n                    <div className=\"truncate text-[11px] text-muted-foreground\">\n                      {email}\n                    </div>\n                  ) : null}\n                </div>\n                {alreadyAdded ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    Added\n                  </span>\n                ) : noEmail ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    No email\n                  </span>\n                ) : null}\n              </div>\n            )\n          })\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-1.5 px-3 py-2 border-t border-border/50 text-[11px] text-muted-foreground\">\n        <CornerDownLeft className=\"size-3 shrink-0\" />\n        <span>Type an address and press Enter to add someone not listed.</span>\n      </div>\n    </div>,\n    document.body,\n  )\n}\n\nexport function EmailRecipientField({\n  label,\n  recipients,\n  onRecipientsChange,\n  amber = false,\n  contacts = [],\n  showPicker = false,\n  showCcBcc = false,\n  ccBccOpen = false,\n  onCcBccToggle,\n  addedEmails,\n  placeholder,\n  contactToRecipient,\n}: EmailRecipientFieldProps) {\n  const [value, setValue] = React.useState(\"\")\n  const [pickerOpen, setPickerOpen] = React.useState(false)\n  const contactsTriggerRef = React.useRef<HTMLButtonElement>(null)\n\n  const hasUnconfirmed = recipients.some((r) => !r.confirmed)\n  const state: \"default\" | \"amber\" =\n    amber && hasUnconfirmed ? \"amber\" : \"default\"\n  const amberRow = state === \"amber\"\n\n  const added = addedEmails ?? new Set<string>()\n\n  const resolvedPlaceholder =\n    placeholder ?? (recipients.length > 0 ? \"Add another...\" : \"Add email...\")\n\n  function addEmail(email: string) {\n    const trimmed = email.trim()\n    if (!isValidEmail(trimmed)) return\n    if (added.has(trimmed.toLowerCase())) return\n    onRecipientsChange([\n      ...recipients,\n      { id: trimmed, email: trimmed, name: \"\", confirmed: false },\n    ])\n    setValue(\"\")\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if ((event.key === \"Enter\" || event.key === \",\") && isValidEmail(value)) {\n      event.preventDefault()\n      addEmail(value)\n      return\n    }\n    if (event.key === \"Backspace\" && value === \"\" && recipients.length > 0) {\n      event.preventDefault()\n      onRecipientsChange(recipients.slice(0, -1))\n    }\n  }\n\n  function confirmRecipient(id: string) {\n    onRecipientsChange(\n      recipients.map((r) => (r.id === id ? { ...r, confirmed: true } : r)),\n    )\n  }\n\n  function removeRecipient(id: string) {\n    onRecipientsChange(recipients.filter((r) => r.id !== id))\n  }\n\n  function selectContact(contact: SuggestedContact) {\n    const recipient =\n      contactToRecipient?.(contact) ??\n      ({\n        id: contactEmail(contact) ?? contact.name,\n        email: contactEmail(contact) ?? \"\",\n        name: contact.name,\n        confirmed: true,\n      } satisfies RecipientChip)\n    onRecipientsChange([...recipients, recipient])\n    setPickerOpen(false)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-start text-sm\",\n        amberRow && \"bg-amber-50/35 border-amber-200/80\",\n      )}\n    >\n      <div\n        className={cn(\n          \"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground pt-[7px]\",\n          amberRow && \"text-amber-700\",\n        )}\n      >\n        {label}\n      </div>\n\n      <div className=\"min-w-0\">\n        <div className=\"flex flex-wrap gap-1.5 items-center\">\n          {recipients.map((recipient) => (\n            <RecipientChipPill\n              key={recipient.id}\n              recipient={recipient}\n              onConfirm={() => confirmRecipient(recipient.id)}\n              onRemove={() => removeRecipient(recipient.id)}\n            />\n          ))}\n          <input\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n            onKeyDown={handleKeyDown}\n            onBlur={() => {\n              // Commit any valid pending email so it is not silently dropped\n              // when the user clicks Send without pressing Enter/comma first.\n              if (isValidEmail(value)) addEmail(value)\n            }}\n            placeholder={resolvedPlaceholder}\n            className=\"min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        {showPicker || showCcBcc ? (\n          <div className=\"flex gap-1.5 mt-2\">\n            {showPicker ? (\n              <button\n                ref={contactsTriggerRef}\n                type=\"button\"\n                onClick={() => setPickerOpen((open) => !open)}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Users className=\"size-3\" />\n                Contacts\n                <ChevronDown className=\"size-3\" />\n              </button>\n            ) : null}\n            {showCcBcc ? (\n              <button\n                type=\"button\"\n                onClick={onCcBccToggle}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Plus className=\"size-3\" />\n                {ccBccOpen ? \"Hide Cc/Bcc\" : \"Add Cc/Bcc\"}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n\n        {pickerOpen ? (\n          <ContactPickerPopover\n            triggerRef={contactsTriggerRef}\n            contacts={contacts}\n            addedEmails={added}\n            onSelect={selectContact}\n            onAddEmail={(email) => {\n              addEmail(email)\n              setPickerOpen(false)\n            }}\n            onClose={() => setPickerOpen(false)}\n          />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["handleKeyDown"]}

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/related-record-action-card.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+type RelatedRecordActionCardKind = "case" | "account" | "opportunity" | "salesforce" | "generic";
+type RelatedRecordActionIcon = "salesforce" | React.ReactNode;
+interface RelatedRecordActionCardProps {
+    kind: RelatedRecordActionCardKind;
+    label: string;
+    subtitle?: string;
+    disabledReason?: string;
+    href?: string;
+    external?: boolean;
+    icon?: RelatedRecordActionIcon;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    testId?: string;
+}
+declare function RelatedRecordActionCard({ kind, label, subtitle, disabledReason, href, external, icon, onClick, className, testId, }: RelatedRecordActionCardProps): React.JSX.Element;
+
+export { RelatedRecordActionCard, type RelatedRecordActionCardKind, type RelatedRecordActionCardProps, type RelatedRecordActionIcon };

package/dist/components/related-record-action-card.js

@@ -0,0 +1,150 @@
+"use client"
+
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { BRAND_ICONS } from "../lib/icons.js";
+import { cn } from "../lib/utils.js";
+function renderActionIcon(icon, kind) {
+  if (icon === "salesforce" || kind === "salesforce") {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: BRAND_ICONS.salesforce,
+        alt: "Salesforce",
+        className: "h-4 w-4 object-contain",
+        draggable: false
+      }
+    );
+  }
+  if (icon) {
+    return icon;
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: kind.slice(0, 1).toUpperCase() });
+}
+function RelatedRecordActionCard({
+  kind,
+  label,
+  subtitle,
+  disabledReason,
+  href,
+  external,
+  icon,
+  onClick,
+  className,
+  testId
+}) {
+  const isDisabled = Boolean(disabledReason) || !href && !onClick;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "related-record-action-card-icon",
+        className: cn(
+          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors",
+          isDisabled ? "border-border/60 bg-muted/40 text-muted-foreground" : "border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary"
+        ),
+        children: renderActionIcon(icon, kind)
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "related-record-action-card-label",
+          className: cn(
+            "block truncate text-sm font-medium transition-colors",
+            isDisabled ? "text-muted-foreground" : "text-foreground group-active:text-primary"
+          ),
+          children: label
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "related-record-action-card-subtitle",
+          className: "mt-0.5 block truncate text-xs text-muted-foreground",
+          children: subtitle
+        }
+      ),
+      disabledReason && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "related-record-action-card-disabled-reason",
+          className: "mt-1 block text-xs text-muted-foreground",
+          children: disabledReason
+        }
+      )
+    ] }),
+    external && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "opens in a new tab" }),
+      /* @__PURE__ */ jsx(
+        ExternalLink,
+        {
+          "aria-hidden": "true",
+          "data-slot": "related-record-action-card-external-icon",
+          className: cn(
+            "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
+            isDisabled ? "" : "group-active:text-primary"
+          )
+        }
+      )
+    ] })
+  ] });
+  if (isDisabled) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-disabled": "true",
+        "data-kind": kind,
+        "data-slot": "related-record-action-card",
+        "data-testid": testId,
+        className: cn(
+          "group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors",
+          "cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70",
+          className
+        ),
+        children: content
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        "data-kind": kind,
+        "data-slot": "related-record-action-card",
+        "data-testid": testId,
+        className: cn(
+          "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+          "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+          className
+        ),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "data-kind": kind,
+      "data-slot": "related-record-action-card",
+      "data-testid": testId,
+      className: cn(
+        "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+        "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+        className
+      ),
+      children: content
+    }
+  );
+}
+export {
+  RelatedRecordActionCard
+};
+//# sourceMappingURL=related-record-action-card.js.map

package/dist/components/related-record-action-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/related-record-action-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { BRAND_ICONS } from \"../lib/icons\"\nimport { cn } from \"../lib/utils\"\n\nexport type RelatedRecordActionCardKind = \"case\" | \"account\" | \"opportunity\" | \"salesforce\" | \"generic\"\n\nexport type RelatedRecordActionIcon = \"salesforce\" | React.ReactNode\n\nexport interface RelatedRecordActionCardProps {\n  kind: RelatedRecordActionCardKind\n  label: string\n  subtitle?: string\n  disabledReason?: string\n  href?: string\n  external?: boolean\n  icon?: RelatedRecordActionIcon\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n  className?: string\n  testId?: string\n}\n\nfunction renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {\n  if (icon === \"salesforce\" || kind === \"salesforce\") {\n    return (\n      <img\n        src={BRAND_ICONS.salesforce}\n        alt=\"Salesforce\"\n        className=\"h-4 w-4 object-contain\"\n        draggable={false}\n      />\n    )\n  }\n\n  if (icon) {\n    return icon\n  }\n\n  return <span aria-hidden=\"true\">{kind.slice(0, 1).toUpperCase()}</span>\n}\n\nexport function RelatedRecordActionCard({\n  kind,\n  label,\n  subtitle,\n  disabledReason,\n  href,\n  external,\n  icon,\n  onClick,\n  className,\n  testId,\n}: RelatedRecordActionCardProps) {\n  const isDisabled = Boolean(disabledReason) || (!href && !onClick)\n\n  const content = (\n    <>\n      <span\n        data-slot=\"related-record-action-card-icon\"\n        className={cn(\n          \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors\",\n          isDisabled\n            ? \"border-border/60 bg-muted/40 text-muted-foreground\"\n            : \"border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary\"\n        )}\n      >\n        {renderActionIcon(icon, kind)}\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span\n          data-slot=\"related-record-action-card-label\"\n          className={cn(\n            \"block truncate text-sm font-medium transition-colors\",\n            isDisabled ? \"text-muted-foreground\" : \"text-foreground group-active:text-primary\"\n          )}\n        >\n          {label}\n        </span>\n        {subtitle && (\n          <span\n            data-slot=\"related-record-action-card-subtitle\"\n            className=\"mt-0.5 block truncate text-xs text-muted-foreground\"\n          >\n            {subtitle}\n          </span>\n        )}\n        {disabledReason && (\n          <span\n            data-slot=\"related-record-action-card-disabled-reason\"\n            className=\"mt-1 block text-xs text-muted-foreground\"\n          >\n            {disabledReason}\n          </span>\n        )}\n      </span>\n      {external && (\n        <>\n          <span className=\"sr-only\">opens in a new tab</span>\n          <ExternalLink\n            aria-hidden=\"true\"\n            data-slot=\"related-record-action-card-external-icon\"\n            className={cn(\n              \"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors\",\n              isDisabled ? \"\" : \"group-active:text-primary\"\n            )}\n          />\n        </>\n      )}\n    </>\n  )\n\n  if (isDisabled) {\n    return (\n      <div\n        aria-disabled=\"true\"\n        data-kind={kind}\n        data-slot=\"related-record-action-card\"\n        data-testid={testId}\n        className={cn(\n          \"group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors\",\n          \"cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70\",\n          className\n        )}\n      >\n        {content}\n      </div>\n    )\n  }\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        data-kind={kind}\n        data-slot=\"related-record-action-card\"\n        data-testid={testId}\n        className={cn(\n          \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n          \"cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary\",\n          className\n        )}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      data-kind={kind}\n      data-slot=\"related-record-action-card\"\n      data-testid={testId}\n      className={cn(\n        \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n        \"cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary\",\n        className\n      )}\n    >\n      {content}\n    </button>\n  )\n}\n"],"mappings":";AA4BM,SAuEE,UAvEF,KA2CA,YA3CA;AAzBN,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAmBnB,SAAS,iBAAiB,MAA2C,MAAmC;AACtG,MAAI,SAAS,gBAAgB,SAAS,cAAc;AAClD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACb;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,UAAK,eAAY,QAAQ,eAAK,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE;AAClE;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,aAAa,QAAQ,cAAc,KAAM,CAAC,QAAQ,CAAC;AAEzD,QAAM,UACJ,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,aACI,uDACA;AAAA,QACN;AAAA,QAEC,2BAAiB,MAAM,IAAI;AAAA;AAAA,IAC9B;AAAA,IACA,qBAAC,UAAK,WAAU,kBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,aAAa,0BAA0B;AAAA,UACzC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAED,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,IACC,YACC,iCACE;AAAA,0BAAC,UAAK,WAAU,WAAU,gCAAkB;AAAA,MAC5C;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,aAAa,KAAK;AAAA,UACpB;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KAEJ;AAGF,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,KAAK,WAAW,wBAAwB;AAAA,QACxC,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,aAAW;AAAA,MACX,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/score-feedback.js

@@ -102,7 +102,7 @@ function Trigger({ className }) {
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-500" }),
+          /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-foreground" }),
           /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: label })
         ]
       }
@@ -116,9 +116,9 @@ function Trigger({ className }) {
         onClick: () => handleThumbClick("up"),
         className: cn(
           "p-1.5 rounded transition-colors",
-          thumbState === "up" ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"
+          thumbState === "up" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"
         ),
-        children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-3.5 h-3.5", fill: thumbState === "up" ? "currentColor" : "none" })
+        children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-3.5 h-3.5" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -128,9 +128,9 @@ function Trigger({ className }) {
         onClick: () => handleThumbClick("down"),
         className: cn(
           "p-1.5 rounded transition-colors",
-          thumbState === "down" ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"
+          thumbState === "down" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"
         ),
-        children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-3.5 h-3.5", fill: thumbState === "down" ? "currentColor" : "none" })
+        children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-3.5 h-3.5" })
       }
     )
   ] });
@@ -158,7 +158,7 @@ function Panel({ className }) {
           onClick: () => togglePill(pill),
           className: cn(
             "px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors",
-            selectedPills.includes(pill) ? thumbState === "up" ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800" : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
+            selectedPills.includes(pill) ? thumbState === "up" ? "bg-muted text-foreground border-border" : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
           ),
           children: pill
         },

package/dist/components/score-feedback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/score-feedback.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown, Check } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst positivePills = [\n  \"Right timing\",\n  \"Accurate data\",\n  \"Good prospect fit\",\n  \"Actionable\",\n]\n\nconst negativePills = [\n  \"Bad timing\",\n  \"Inaccurate data\",\n  \"Wrong prospect\",\n  \"Already handled\",\n  \"Not actionable\",\n  \"Other\",\n]\n\ninterface SubmittedScoreFeedback {\n  type: \"up\" | \"down\"\n  pills: string[]\n  detail: string\n}\n\ninterface ScoreFeedbackState {\n  thumbState: \"up\" | \"down\" | null\n  selectedPills: string[]\n  detailText: string\n  notedType: \"up\" | \"down\" | null\n  submittedFeedback: SubmittedScoreFeedback | null\n  otherSelected: boolean\n  hasRequiredInput: boolean\n  handleThumbClick: (type: \"up\" | \"down\") => void\n  togglePill: (pill: string) => void\n  setDetailText: (text: string) => void\n  handleSubmit: () => void\n  editSubmitted: () => void\n}\n\nconst ScoreFeedbackCtx = React.createContext<ScoreFeedbackState | null>(null)\n\nfunction useScoreFeedback() {\n  const ctx = React.useContext(ScoreFeedbackCtx)\n  if (!ctx) throw new Error(\"Must be used within ScoreFeedback.Root\")\n  return ctx\n}\n\ninterface RootProps {\n  children: React.ReactNode\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  initialFeedback?: { type: \"up\" | \"down\"; pills: string[]; detail: string } | null\n}\n\nfunction Root({ children, onSubmitFeedback, initialFeedback }: RootProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailTextState] = React.useState(\"\")\n  const [notedType, setNotedType] = React.useState<\"up\" | \"down\" | null>(null)\n  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(\n    initialFeedback ?? null\n  )\n\n  // Sync submitted feedback when initialFeedback prop changes (e.g. async\n  // detail load). Skip when the user has an in-progress edit (thumbState set).\n  React.useEffect(() => {\n    if (thumbState !== null) return\n    setSubmittedFeedback(initialFeedback ?? null)\n  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- intentionally omits thumbState to read it as a guard, not a trigger\n\n  const otherSelected = selectedPills.includes(\"Other\")\n\n  const hasRequiredInput =\n    thumbState === \"down\"\n      ? selectedPills.length > 0 && (!otherSelected || detailText.trim().length > 0)\n      : selectedPills.length > 0 || detailText.trim().length > 0\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) =>\n      prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]\n    )\n  }, [])\n\n  const handleThumbClick = React.useCallback((type: \"up\" | \"down\") => {\n    setThumbState((prev) => (prev === type ? null : type))\n    setSelectedPills([])\n    setDetailTextState(\"\")\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setSubmittedFeedback({ type: thumbState, pills: [...selectedPills], detail: detailText.trim() })\n    setNotedType(thumbState)\n    setThumbState(null)\n    setSelectedPills([])\n    setDetailTextState(\"\")\n    setTimeout(() => setNotedType(null), 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const editSubmitted = React.useCallback(() => {\n    if (!submittedFeedback) return\n    setThumbState(submittedFeedback.type)\n    setSelectedPills([...submittedFeedback.pills])\n    setDetailTextState(submittedFeedback.detail)\n    setNotedType(null)\n  }, [submittedFeedback])\n\n  return (\n    <ScoreFeedbackCtx.Provider\n      value={{\n        thumbState,\n        selectedPills,\n        detailText,\n        notedType,\n        submittedFeedback,\n        otherSelected,\n        hasRequiredInput,\n        handleThumbClick,\n        togglePill,\n        setDetailText: setDetailTextState,\n        handleSubmit,\n        editSubmitted,\n      }}\n    >\n      {children}\n    </ScoreFeedbackCtx.Provider>\n  )\n}\n\nfunction Trigger({ className }: { className?: string }) {\n  const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback()\n\n  if (notedType || (submittedFeedback && !thumbState)) {\n    const label = notedType\n      ? notedType === \"up\" ? \"Noted\" : \"Recorded\"\n      : submittedFeedback?.type === \"up\" ? \"Noted\" : \"Recorded\"\n\n    return (\n      <button\n        type=\"button\"\n        onClick={submittedFeedback ? editSubmitted : undefined}\n        className={cn(\n          \"flex items-center gap-1 shrink-0 rounded px-1.5 py-1 transition-colors\",\n          submittedFeedback ? \"cursor-pointer hover:bg-muted/50\" : \"cursor-default\",\n          className,\n        )}\n      >\n        <Check className=\"w-3 h-3 text-emerald-500\" />\n        <span className=\"text-[11px] text-muted-foreground\">{label}</span>\n      </button>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex gap-0.5 shrink-0\", className)}>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"up\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"up\"\n            ? \"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsUp className=\"w-3.5 h-3.5\" fill={thumbState === \"up\" ? \"currentColor\" : \"none\"} />\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"down\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"down\"\n            ? \"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsDown className=\"w-3.5 h-3.5\" fill={thumbState === \"down\" ? \"currentColor\" : \"none\"} />\n      </button>\n    </div>\n  )\n}\n\nfunction Panel({ className }: { className?: string }) {\n  const {\n    thumbState,\n    selectedPills,\n    detailText,\n    otherSelected,\n    hasRequiredInput,\n    togglePill,\n    setDetailText,\n    handleSubmit,\n  } = useScoreFeedback()\n\n  if (!thumbState) return null\n\n  return (\n    <div className={cn(\"overflow-hidden\", className)}>\n      <div className=\"mt-4 pt-4 pb-1 space-y-3 border-t border-border/60\">\n        <span className=\"text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider\">\n          How&apos;s this score?\n        </span>\n        <div>\n          <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n            {thumbState === \"up\" ? \"What was useful?\" : \"What\\u2019s the issue?\"}\n          </span>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n              <button\n                key={pill}\n                type=\"button\"\n                onClick={() => togglePill(pill)}\n                className={cn(\n                  \"px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors\",\n                  selectedPills.includes(pill)\n                    ? thumbState === \"up\"\n                      ? \"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800\"\n                      : \"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\"\n                    : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                )}\n              >\n                {pill}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"space-y-1\">\n          <input\n            type=\"text\"\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" && hasRequiredInput) handleSubmit()\n            }}\n            placeholder={\n              thumbState === \"up\"\n                ? \"Tell us more (optional)\"\n                : \"e.g., The risk factors are outdated\"\n            }\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring\"\n          />\n          {otherSelected && detailText.trim().length === 0 && (\n            <span className=\"text-[10px] text-red-500\">\n              Please describe when &ldquo;Other&rdquo; is selected\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2 pt-1\">\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={!hasRequiredInput}\n            className={cn(\n              \"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors\",\n              hasRequiredInput\n                ? \"bg-foreground text-background hover:bg-foreground/90\"\n                : \"bg-muted text-muted-foreground cursor-not-allowed\"\n            )}\n          >\n            Submit\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const ScoreFeedback = { Root, Trigger, Panel }\nexport { useScoreFeedback }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/score-feedback.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown, Check } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst positivePills = [\n  \"Right timing\",\n  \"Accurate data\",\n  \"Good prospect fit\",\n  \"Actionable\",\n]\n\nconst negativePills = [\n  \"Bad timing\",\n  \"Inaccurate data\",\n  \"Wrong prospect\",\n  \"Already handled\",\n  \"Not actionable\",\n  \"Other\",\n]\n\ninterface SubmittedScoreFeedback {\n  type: \"up\" | \"down\"\n  pills: string[]\n  detail: string\n}\n\ninterface ScoreFeedbackState {\n  thumbState: \"up\" | \"down\" | null\n  selectedPills: string[]\n  detailText: string\n  notedType: \"up\" | \"down\" | null\n  submittedFeedback: SubmittedScoreFeedback | null\n  otherSelected: boolean\n  hasRequiredInput: boolean\n  handleThumbClick: (type: \"up\" | \"down\") => void\n  togglePill: (pill: string) => void\n  setDetailText: (text: string) => void\n  handleSubmit: () => void\n  editSubmitted: () => void\n}\n\nconst ScoreFeedbackCtx = React.createContext<ScoreFeedbackState | null>(null)\n\nfunction useScoreFeedback() {\n  const ctx = React.useContext(ScoreFeedbackCtx)\n  if (!ctx) throw new Error(\"Must be used within ScoreFeedback.Root\")\n  return ctx\n}\n\ninterface RootProps {\n  children: React.ReactNode\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  initialFeedback?: { type: \"up\" | \"down\"; pills: string[]; detail: string } | null\n}\n\nfunction Root({ children, onSubmitFeedback, initialFeedback }: RootProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailTextState] = React.useState(\"\")\n  const [notedType, setNotedType] = React.useState<\"up\" | \"down\" | null>(null)\n  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(\n    initialFeedback ?? null\n  )\n\n  // Sync submitted feedback when initialFeedback prop changes (e.g. async\n  // detail load). Skip when the user has an in-progress edit (thumbState set).\n  React.useEffect(() => {\n    if (thumbState !== null) return\n    setSubmittedFeedback(initialFeedback ?? null)\n  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- intentionally omits thumbState to read it as a guard, not a trigger\n\n  const otherSelected = selectedPills.includes(\"Other\")\n\n  const hasRequiredInput =\n    thumbState === \"down\"\n      ? selectedPills.length > 0 && (!otherSelected || detailText.trim().length > 0)\n      : selectedPills.length > 0 || detailText.trim().length > 0\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) =>\n      prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]\n    )\n  }, [])\n\n  const handleThumbClick = React.useCallback((type: \"up\" | \"down\") => {\n    setThumbState((prev) => (prev === type ? null : type))\n    setSelectedPills([])\n    setDetailTextState(\"\")\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setSubmittedFeedback({ type: thumbState, pills: [...selectedPills], detail: detailText.trim() })\n    setNotedType(thumbState)\n    setThumbState(null)\n    setSelectedPills([])\n    setDetailTextState(\"\")\n    setTimeout(() => setNotedType(null), 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const editSubmitted = React.useCallback(() => {\n    if (!submittedFeedback) return\n    setThumbState(submittedFeedback.type)\n    setSelectedPills([...submittedFeedback.pills])\n    setDetailTextState(submittedFeedback.detail)\n    setNotedType(null)\n  }, [submittedFeedback])\n\n  return (\n    <ScoreFeedbackCtx.Provider\n      value={{\n        thumbState,\n        selectedPills,\n        detailText,\n        notedType,\n        submittedFeedback,\n        otherSelected,\n        hasRequiredInput,\n        handleThumbClick,\n        togglePill,\n        setDetailText: setDetailTextState,\n        handleSubmit,\n        editSubmitted,\n      }}\n    >\n      {children}\n    </ScoreFeedbackCtx.Provider>\n  )\n}\n\nfunction Trigger({ className }: { className?: string }) {\n  const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback()\n\n  if (notedType || (submittedFeedback && !thumbState)) {\n    const label = notedType\n      ? notedType === \"up\" ? \"Noted\" : \"Recorded\"\n      : submittedFeedback?.type === \"up\" ? \"Noted\" : \"Recorded\"\n\n    return (\n      <button\n        type=\"button\"\n        onClick={submittedFeedback ? editSubmitted : undefined}\n        className={cn(\n          \"flex items-center gap-1 shrink-0 rounded px-1.5 py-1 transition-colors\",\n          submittedFeedback ? \"cursor-pointer hover:bg-muted/50\" : \"cursor-default\",\n          className,\n        )}\n      >\n        <Check className=\"w-3 h-3 text-foreground\" />\n        <span className=\"text-[11px] text-muted-foreground\">{label}</span>\n      </button>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex gap-0.5 shrink-0\", className)}>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"up\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"up\"\n            ? \"bg-muted text-foreground\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsUp className=\"w-3.5 h-3.5\" />\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"down\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"down\"\n            ? \"bg-muted text-foreground\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsDown className=\"w-3.5 h-3.5\" />\n      </button>\n    </div>\n  )\n}\n\nfunction Panel({ className }: { className?: string }) {\n  const {\n    thumbState,\n    selectedPills,\n    detailText,\n    otherSelected,\n    hasRequiredInput,\n    togglePill,\n    setDetailText,\n    handleSubmit,\n  } = useScoreFeedback()\n\n  if (!thumbState) return null\n\n  return (\n    <div className={cn(\"overflow-hidden\", className)}>\n      <div className=\"mt-4 pt-4 pb-1 space-y-3 border-t border-border/60\">\n        <span className=\"text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider\">\n          How&apos;s this score?\n        </span>\n        <div>\n          <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n            {thumbState === \"up\" ? \"What was useful?\" : \"What\\u2019s the issue?\"}\n          </span>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n              <button\n                key={pill}\n                type=\"button\"\n                onClick={() => togglePill(pill)}\n                className={cn(\n                  \"px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors\",\n                  selectedPills.includes(pill)\n                    ? thumbState === \"up\"\n                      ? \"bg-muted text-foreground border-border\"\n                      : \"bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800\"\n                    : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                )}\n              >\n                {pill}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"space-y-1\">\n          <input\n            type=\"text\"\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" && hasRequiredInput) handleSubmit()\n            }}\n            placeholder={\n              thumbState === \"up\"\n                ? \"Tell us more (optional)\"\n                : \"e.g., The risk factors are outdated\"\n            }\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring\"\n          />\n          {otherSelected && detailText.trim().length === 0 && (\n            <span className=\"text-[10px] text-red-500\">\n              Please describe when &ldquo;Other&rdquo; is selected\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2 pt-1\">\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={!hasRequiredInput}\n            className={cn(\n              \"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors\",\n              hasRequiredInput\n                ? \"bg-foreground text-background hover:bg-foreground/90\"\n                : \"bg-muted text-muted-foreground cursor-not-allowed\"\n            )}\n          >\n            Submit\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const ScoreFeedback = { Root, Trigger, Panel }\nexport { useScoreFeedback }\n"],"mappings":"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","names":[]}