@handled-ai/design-system 0.9.28 → 0.11.0

package/dist/components/step-timeline.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+type StepType = "email" | "call" | "task" | "wait" | (string & {});
+interface TimelineStep {
+    id: string;
+    type: StepType;
+    label: string;
+}
+interface StepTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    steps: TimelineStep[];
+    expandedStepId?: string;
+    onStepClick?: (stepId: string) => void;
+    onInsert?: (index: number) => void;
+    renderStepBody?: (step: TimelineStep) => React.ReactNode;
+    renderStepAccessory?: (step: TimelineStep) => React.ReactNode;
+}
+declare function StepTimeline({ steps, expandedStepId, onStepClick, onInsert, renderStepBody, renderStepAccessory, className, ...rest }: StepTimelineProps): React.JSX.Element;
+
+export { StepTimeline, type StepTimelineProps, type StepType, type TimelineStep };

package/dist/components/step-timeline.js

@@ -0,0 +1,134 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Mail, Phone, CheckSquare, Clock, Circle, ChevronUp, ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const stepTypeConfig = {
+  email: { icon: Mail, classes: "bg-blue-500/10 text-blue-600" },
+  call: { icon: Phone, classes: "bg-emerald-500/10 text-emerald-600" },
+  task: { icon: CheckSquare, classes: "bg-purple-500/10 text-purple-600" },
+  wait: { icon: Clock, classes: "bg-muted text-muted-foreground" }
+};
+const defaultStepConfig = { icon: Circle, classes: "bg-muted text-muted-foreground" };
+function StepTimeline(_a) {
+  var _b = _a, {
+    steps,
+    expandedStepId,
+    onStepClick,
+    onInsert,
+    renderStepBody,
+    renderStepAccessory,
+    className
+  } = _b, rest = __objRest(_b, [
+    "steps",
+    "expandedStepId",
+    "onStepClick",
+    "onInsert",
+    "renderStepBody",
+    "renderStepAccessory",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ "data-slot": "step-timeline", className: cn("relative ml-5", className) }, rest), { children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 bottom-0 border-l-2 border-border" }),
+    steps.map((step, index) => {
+      var _a2;
+      const expanded = step.id === expandedStepId;
+      const config = (_a2 = stepTypeConfig[step.type]) != null ? _a2 : defaultStepConfig;
+      const TypeIcon = config.icon;
+      const isInteractive = !!(onStepClick || renderStepBody);
+      const bodyId = `step-timeline-body-${step.id}`;
+      const headerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: cn("w-8 h-8 rounded-full flex items-center justify-center shrink-0", config.classes), children: /* @__PURE__ */ jsx(TypeIcon, { size: 16 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: step.type }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: step.label })
+        ] })
+      ] });
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        index > 0 && onInsert && /* @__PURE__ */ jsx("div", { className: "relative pl-8 py-1", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "step-timeline-insert",
+            onClick: () => onInsert(index),
+            className: "border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full",
+            children: "+ Add Step"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { "data-slot": "step-timeline-step", className: "relative pl-8 py-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-border bg-background z-10" }),
+          /* @__PURE__ */ jsxs("div", { "data-slot": "step-timeline-card", className: "border border-border rounded-lg overflow-hidden", children: [
+            isInteractive ? /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full px-4 py-3 gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-expanded": expanded,
+                  "aria-controls": bodyId,
+                  onClick: () => onStepClick == null ? void 0 : onStepClick(step.id),
+                  className: "flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity text-left",
+                  children: headerContent
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 shrink-0", children: [
+                renderStepAccessory && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: renderStepAccessory(step) }),
+                /* @__PURE__ */ jsx("div", { className: "shrink-0 text-muted-foreground", children: expanded ? /* @__PURE__ */ jsx(ChevronUp, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "w-full px-4 py-3 flex items-center gap-3", children: [
+              headerContent,
+              renderStepAccessory && /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: renderStepAccessory(step) })
+            ] }),
+            expanded && renderStepBody && /* @__PURE__ */ jsx("div", { id: bodyId, "data-slot": "step-timeline-body", children: renderStepBody(step) })
+          ] })
+        ] })
+      ] }, step.id);
+    }),
+    onInsert && /* @__PURE__ */ jsx("div", { className: "relative pl-8 py-1", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "step-timeline-insert",
+        onClick: () => onInsert(steps.length),
+        className: "border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full",
+        children: "+ Add Step"
+      }
+    ) })
+  ] }));
+}
+export {
+  StepTimeline
+};
+//# sourceMappingURL=step-timeline.js.map

package/dist/components/step-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/step-timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { Mail, Phone, CheckSquare, Clock, Circle, ChevronUp, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ntype StepType = \"email\" | \"call\" | \"task\" | \"wait\" | (string & {})\n\ninterface TimelineStep {\n  id: string\n  type: StepType\n  label: string\n}\n\ninterface StepTimelineProps extends React.HTMLAttributes<HTMLDivElement> {\n  steps: TimelineStep[]\n  expandedStepId?: string\n  onStepClick?: (stepId: string) => void\n  onInsert?: (index: number) => void\n  renderStepBody?: (step: TimelineStep) => React.ReactNode\n  renderStepAccessory?: (step: TimelineStep) => React.ReactNode\n}\n\nconst stepTypeConfig: Record<string, { icon: LucideIcon; classes: string }> = {\n  email: { icon: Mail, classes: \"bg-blue-500/10 text-blue-600\" },\n  call: { icon: Phone, classes: \"bg-emerald-500/10 text-emerald-600\" },\n  task: { icon: CheckSquare, classes: \"bg-purple-500/10 text-purple-600\" },\n  wait: { icon: Clock, classes: \"bg-muted text-muted-foreground\" },\n}\n\nconst defaultStepConfig: { icon: LucideIcon; classes: string } = { icon: Circle, classes: \"bg-muted text-muted-foreground\" }\n\nfunction StepTimeline({\n  steps,\n  expandedStepId,\n  onStepClick,\n  onInsert,\n  renderStepBody,\n  renderStepAccessory,\n  className,\n  ...rest\n}: StepTimelineProps) {\n  return (\n    <div data-slot=\"step-timeline\" className={cn(\"relative ml-5\", className)} {...rest}>\n      <div className=\"absolute left-0 top-0 bottom-0 border-l-2 border-border\" />\n\n      {steps.map((step, index) => {\n        const expanded = step.id === expandedStepId\n        const config = stepTypeConfig[step.type] ?? defaultStepConfig\n        const TypeIcon = config.icon\n        const isInteractive = !!(onStepClick || renderStepBody)\n        const bodyId = `step-timeline-body-${step.id}`\n\n        const headerContent = (\n          <>\n            <div className={cn(\"w-8 h-8 rounded-full flex items-center justify-center shrink-0\", config.classes)}>\n              <TypeIcon size={16} />\n            </div>\n            <div className=\"flex flex-col min-w-0\">\n              <span className=\"text-[11px] font-medium text-muted-foreground uppercase tracking-wider\">\n                {step.type}\n              </span>\n              <span className=\"text-sm font-medium\">{step.label}</span>\n            </div>\n          </>\n        )\n\n        return (\n          <React.Fragment key={step.id}>\n            {index > 0 && onInsert && (\n              <div className=\"relative pl-8 py-1\">\n                <button\n                  type=\"button\"\n                  data-slot=\"step-timeline-insert\"\n                  onClick={() => onInsert(index)}\n                  className=\"border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full\"\n                >\n                  + Add Step\n                </button>\n              </div>\n            )}\n\n            <div data-slot=\"step-timeline-step\" className=\"relative pl-8 py-2\">\n              <div className=\"absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-border bg-background z-10\" />\n\n              <div data-slot=\"step-timeline-card\" className=\"border border-border rounded-lg overflow-hidden\">\n                {isInteractive ? (\n                  <div className=\"flex items-center w-full px-4 py-3 gap-3\">\n                    <button\n                      type=\"button\"\n                      aria-expanded={expanded}\n                      aria-controls={bodyId}\n                      onClick={() => onStepClick?.(step.id)}\n                      className=\"flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity text-left\"\n                    >\n                      {headerContent}\n                    </button>\n                    <div className=\"ml-auto flex items-center gap-2 shrink-0\">\n                      {renderStepAccessory && (\n                        <div className=\"shrink-0\">\n                          {renderStepAccessory(step)}\n                        </div>\n                      )}\n                      <div className=\"shrink-0 text-muted-foreground\">\n                        {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n                      </div>\n                    </div>\n                  </div>\n                ) : (\n                  <div className=\"w-full px-4 py-3 flex items-center gap-3\">\n                    {headerContent}\n                    {renderStepAccessory && (\n                      <div className=\"ml-auto shrink-0\">\n                        {renderStepAccessory(step)}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {expanded && renderStepBody && (\n                  <div id={bodyId} data-slot=\"step-timeline-body\">\n                    {renderStepBody(step)}\n                  </div>\n                )}\n              </div>\n            </div>\n          </React.Fragment>\n        )\n      })}\n\n      {onInsert && (\n        <div className=\"relative pl-8 py-1\">\n          <button\n            type=\"button\"\n            data-slot=\"step-timeline-insert\"\n            onClick={() => onInsert(steps.length)}\n            className=\"border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full\"\n          >\n            + Add Step\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { StepTimeline, type StepTimelineProps, type TimelineStep, type StepType }\n"],"mappings":"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","names":["_a"]}

package/dist/components/sticky-action-bar.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    bordered?: boolean;
+}
+declare function StickyActionBar({ left, right, bordered, className, ...rest }: StickyActionBarProps): React.JSX.Element;
+
+export { StickyActionBar, type StickyActionBarProps };

package/dist/components/sticky-action-bar.js

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function StickyActionBar(_a) {
+  var _b = _a, { left, right, bordered = true, className } = _b, rest = __objRest(_b, ["left", "right", "bordered", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "sticky-action-bar",
+      className: cn(
+        "flex items-center justify-between sticky bottom-0 bg-background",
+        bordered && "pt-3 border-t border-border/50",
+        className
+      )
+    }, rest), {
+      children: [
+        left && /* @__PURE__ */ jsx("div", { "data-slot": "sticky-action-bar-left", className: "flex items-center gap-1", children: left }),
+        right && /* @__PURE__ */ jsx("div", { "data-slot": "sticky-action-bar-right", className: "ml-auto flex items-center gap-2", children: right })
+      ]
+    })
+  );
+}
+export {
+  StickyActionBar
+};
+//# sourceMappingURL=sticky-action-bar.js.map

package/dist/components/sticky-action-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sticky-action-bar.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  left?: React.ReactNode\n  right?: React.ReactNode\n  bordered?: boolean\n}\n\nfunction StickyActionBar({ left, right, bordered = true, className, ...rest }: StickyActionBarProps) {\n  return (\n    <div\n      data-slot=\"sticky-action-bar\"\n      className={cn(\n        \"flex items-center justify-between sticky bottom-0 bg-background\",\n        bordered && \"pt-3 border-t border-border/50\",\n        className\n      )}\n      {...rest}\n    >\n      {left && (\n        <div data-slot=\"sticky-action-bar-left\" className=\"flex items-center gap-1\">\n          {left}\n        </div>\n      )}\n      {right && (\n        <div data-slot=\"sticky-action-bar-right\" className=\"ml-auto flex items-center gap-2\">\n          {right}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { StickyActionBar, type StickyActionBarProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYI,SAUI,KAVJ;AAVJ,SAAS,UAAU;AAQnB,SAAS,gBAAgB,IAA4E;AAA5E,eAAE,QAAM,OAAO,WAAW,MAAM,UAVzD,IAUyB,IAA8C,iBAA9C,IAA8C,CAA5C,QAAM,SAAO,YAAiB;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,OACI,OAPL;AAAA,MASE;AAAA,gBACC,oBAAC,SAAI,aAAU,0BAAyB,WAAU,2BAC/C,gBACH;AAAA,QAED,SACC,oBAAC,SAAI,aAAU,2BAA0B,WAAU,mCAChD,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/suggested-actions.js

@@ -39,7 +39,6 @@ import {
   ThumbsUp,
   ThumbsDown,
   Check,
-  RefreshCw,
   ArrowLeft,
   Mail,
   Phone,
@@ -52,17 +51,8 @@ import {
   Globe
 } from "lucide-react";
 import { Button } from "./button.js";
-function BrandIcon({ src, alt, className }) {
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt,
-      className: `${className != null ? className : ""} object-contain`,
-      draggable: false
-    }
-  );
-}
+import { DraftFeedbackInline } from "./draft-feedback-inline.js";
+import { AccountContactsPopover, BrandIcon } from "./account-contacts-popover.js";
 function getActionTypeIcon(type, className, iconMap) {
   switch (type) {
     case "email":
@@ -138,143 +128,6 @@ function AiEditPanel({ onApply }) {
     ] })
   ] });
 }
-const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"];
-const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"];
-function DraftFeedbackInline({
-  onRegenerateRequest,
-  onSubmitFeedback,
-  onDiscardRequest
-}) {
-  const [thumbState, setThumbState] = React.useState(null);
-  const [selectedPills, setSelectedPills] = React.useState([]);
-  const [detailText, setDetailText] = React.useState("");
-  const [noted, setNoted] = React.useState(false);
-  const [regenerated, setRegenerated] = React.useState(false);
-  const togglePill = React.useCallback((pill) => {
-    setSelectedPills((prev) => prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]);
-  }, []);
-  const handleSubmit = React.useCallback(() => {
-    if (!thumbState) return;
-    onSubmitFeedback == null ? void 0 : onSubmitFeedback(thumbState, selectedPills, detailText);
-    setNoted(true);
-    setTimeout(() => {
-      setThumbState(null);
-      setSelectedPills([]);
-      setDetailText("");
-      setNoted(false);
-    }, 3e3);
-  }, [thumbState, selectedPills, detailText, onSubmitFeedback]);
-  const handleRegenerate = React.useCallback(() => {
-    if (!thumbState) return;
-    onRegenerateRequest == null ? void 0 : onRegenerateRequest(selectedPills, detailText);
-    setRegenerated(true);
-    setTimeout(() => {
-      setThumbState(null);
-      setSelectedPills([]);
-      setDetailText("");
-      setRegenerated(false);
-    }, 3e3);
-  }, [thumbState, selectedPills, detailText, onRegenerateRequest]);
-  const handleDiscard = React.useCallback(() => {
-    if (!thumbState) return;
-    onDiscardRequest == null ? void 0 : onDiscardRequest(selectedPills, detailText);
-  }, [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("span", { className: "text-xs text-muted-foreground", children: "Feedback recorded" })
-    ] });
-  }
-  if (regenerated) {
-    return /* @__PURE__ */ jsx("div", { className: "py-2 animate-in fade-in slide-in-from-top-1 duration-200", children: /* @__PURE__ */ jsxs("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", children: [
-      /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3 text-indigo-500 animate-spin" }),
-      /* @__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: [
-    /* @__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: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => {
-              setThumbState(thumbState === "up" ? null : "up");
-              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" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => {
-              setThumbState(thumbState === "down" ? null : "down");
-              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" })
-          }
-        )
-      ] })
-    ] }),
-    thumbState && /* @__PURE__ */ jsxs("div", { className: "pt-3 space-y-3 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(
-          "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"}`,
-            children: pill
-          },
-          pill
-        )) })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          value: detailText,
-          onChange: (e) => setDetailText(e.target.value),
-          placeholder: thumbState === "up" ? "Add specific praise (optional)..." : "Provide specific instructions (optional)...",
-          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__ */ jsxs(
-          "button",
-          {
-            onClick: handleRegenerate,
-            disabled: selectedPills.length === 0 && detailText.length === 0,
-            className: `flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${selectedPills.length > 0 || detailText.length > 0 ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted text-muted-foreground cursor-not-allowed"}`,
-            children: [
-              /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3" }),
-              "Regenerate draft"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleDiscard,
-            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",
-            children: "Discard draft"
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: handleSubmit,
-          className: "flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent",
-          children: "Submit feedback"
-        }
-      ) })
-    ] })
-  ] });
-}
 function EditorToolbar() {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-4 py-2 border-t border-border bg-muted/5 flex-wrap", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center mr-2 gap-1 shrink-0", children: [
@@ -473,161 +326,6 @@ function ContactCard({
     }
   );
 }
-function AccountContactsPopover({
-  contacts,
-  onSelect,
-  onSelectTo,
-  onSelectCc,
-  onSelectBcc,
-  onViewAll,
-  onOpenRecentActivity,
-  trigger,
-  iconMap
-}) {
-  const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef(null);
-  const [popoverStyle, setPopoverStyle] = React.useState({});
-  React.useEffect(() => {
-    if (open && triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      const popoverWidth = Math.min(448, window.innerWidth - 32);
-      let left = rect.right - popoverWidth;
-      if (left < 16) left = 16;
-      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth;
-      setPopoverStyle({ position: "fixed", top: rect.bottom + 4, left });
-    }
-  }, [open]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: () => setOpen(!open), children: trigger }),
-    open && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }),
-      /* @__PURE__ */ jsxs("div", { style: popoverStyle, className: "fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150", children: [
-        /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide", children: "Account Contacts" }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto", children: contacts.map((c, i) => {
-          var _a, _b, _c, _d, _e, _f;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "button",
-              onClick: () => {
-                (onSelectTo != null ? onSelectTo : onSelect)(c);
-                setOpen(false);
-              },
-              className: "flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0", children: c.name.split(" ").map((n) => n[0]).join("") }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
-                  /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: c.name }),
-                  /* @__PURE__ */ jsxs("div", { className: "truncate text-xs text-muted-foreground leading-tight", children: [
-                    c.role,
-                    " \xB7 ",
-                    (_f = (_e = (_c = (_b = c.email) != null ? _b : (_a = c.emails) == null ? void 0 : _a[0]) != null ? _c : c.phone) != null ? _e : (_d = c.phones) == null ? void 0 : _d[0]) != null ? _f : ""
-                  ] }),
-                  c.lastActivity && /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onOpenRecentActivity == null ? void 0 : onOpenRecentActivity();
-                        setOpen(false);
-                      },
-                      className: "mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
-                      children: [
-                        /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3 shrink-0" }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium", children: "Last activity" }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/60", children: "\xB7" }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: c.lastActivity.date }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/60", children: "\xB7" }),
-                        /* @__PURE__ */ jsx("span", { className: "truncate capitalize", children: c.lastActivity.type })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-1.5 shrink-0", children: [
-                  onSelectTo && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onSelectTo(c);
-                        setOpen(false);
-                      },
-                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
-                      children: "To"
-                    }
-                  ),
-                  onSelectCc && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onSelectCc(c);
-                        setOpen(false);
-                      },
-                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
-                      children: "Cc"
-                    }
-                  ),
-                  onSelectBcc && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onSelectBcc(c);
-                        setOpen(false);
-                      },
-                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
-                      children: "Bcc"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        if (c.salesforceUrl) {
-                          window.open(c.salesforceUrl, "_blank", "noopener,noreferrer");
-                        } else {
-                          onViewAll == null ? void 0 : onViewAll();
-                        }
-                      },
-                      className: "h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0",
-                      "aria-label": `Open ${c.name} in Salesforce`,
-                      children: (iconMap == null ? void 0 : iconMap.salesforce) ? /* @__PURE__ */ jsx(BrandIcon, { src: iconMap.salesforce, alt: "Salesforce", className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5 text-muted-foreground" })
-                    }
-                  )
-                ] })
-              ]
-            },
-            i
-          );
-        }) }),
-        onViewAll && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => {
-                onViewAll();
-                setOpen(false);
-              },
-              className: "flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
-              children: [
-                /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3" }),
-                "View all contacts"
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
-}
 function EmailHeader({
   fromName,
   fromEmail,