@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/entity-panel.js

@@ -0,0 +1,584 @@
+"use client"
+
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./sheet.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import {
+  Plus,
+  ExternalLink,
+  Mail,
+  FileText,
+  MessageCircle,
+  Briefcase,
+  Building2,
+  Users,
+  X,
+  ChevronDown,
+  ChevronUp,
+  Link as LinkIcon,
+  Maximize2,
+  Minimize2,
+  CalendarDays
+} from "lucide-react";
+import { TimelineActivity } from "./timeline-activity.js";
+function EntityPanel({
+  isOpen,
+  onClose,
+  children
+}) {
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  React.useEffect(() => {
+    if (!isOpen) setIsFullscreen(false);
+  }, [isOpen]);
+  const handleClose = React.useCallback(() => {
+    setIsFullscreen(false);
+    onClose(false);
+  }, [onClose]);
+  const panelContent = /* @__PURE__ */ jsx(EntityPanelContext.Provider, { value: { isFullscreen, setIsFullscreen, onClose: handleClose }, children });
+  if (isFullscreen && isOpen) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: panelContent }) });
+  }
+  return /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: "right",
+      className: "w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col",
+      showCloseButton: false,
+      children: [
+        /* @__PURE__ */ jsx(SheetHeader, { className: "sr-only p-0", children: /* @__PURE__ */ jsx(SheetTitle, { children: "Entity panel" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: panelContent })
+      ]
+    }
+  ) });
+}
+const EntityPanelContext = React.createContext({
+  isFullscreen: false,
+  setIsFullscreen: () => {
+  },
+  onClose: () => {
+  }
+});
+function useEntityPanel() {
+  return React.useContext(EntityPanelContext);
+}
+function EntityPanelHeader({
+  icon,
+  title,
+  badgeLabel,
+  subtitle: _subtitle,
+  headerAction
+}) {
+  const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+      icon != null ? icon : /* @__PURE__ */ jsx(CalendarDays, { className: "w-5 h-5 text-muted-foreground shrink-0" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground truncate", children: title }),
+      badgeLabel && /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0",
+          children: badgeLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 ml-4 text-muted-foreground", children: [
+      headerAction,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "p-1.5 rounded-md hover:bg-secondary transition-colors",
+          title: "Copy Link",
+          children: /* @__PURE__ */ jsx(LinkIcon, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsFullscreen(!isFullscreen),
+          className: "p-1.5 rounded-md hover:bg-secondary transition-colors",
+          title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+          children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "p-1.5 rounded-md hover:bg-secondary transition-colors",
+          title: "Close",
+          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+        }
+      )
+    ] })
+  ] });
+}
+function EntityPanelTabs({
+  tabs,
+  activeTab,
+  onTabChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6 border-b border-border mb-6", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onTabChange(tab.id),
+      className: `pb-3 text-sm font-medium border-b-2 transition-colors ${activeTab === tab.id ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+      children: tab.label
+    },
+    tab.id
+  )) });
+}
+function EntityMetadataGrid({ fields }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-[160px_1fr] gap-y-4 gap-x-6 mb-8 text-sm", children: fields.map((field, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground font-medium", children: [
+      /* @__PURE__ */ jsx(field.icon, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { children: field.label })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-foreground", children: field.value })
+  ] }, idx)) });
+}
+function EntitySection({
+  title,
+  children,
+  action
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "mb-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+      action
+    ] }),
+    children
+  ] });
+}
+function EntityActivityItem({
+  icon,
+  title,
+  description,
+  date
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-[13px]", children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-muted-foreground shrink-0", children: icon != null ? icon : /* @__PURE__ */ jsx(CalendarDays, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-foreground leading-relaxed", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground/70 mt-0.5", children: description }),
+      date && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground/70 mt-0.5", children: date })
+    ] })
+  ] });
+}
+function SystemActivity() {
+  return /* @__PURE__ */ jsx(EntitySection, { title: "System Activity", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(
+      EntityActivityItem,
+      {
+        title: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "System" }),
+          " enriched the lead"
+        ] }),
+        date: "Today at 10:15 AM"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EntityActivityItem,
+      {
+        icon: /* @__PURE__ */ jsx(Mail, { className: "w-4 h-4" }),
+        title: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Jackie Lee" }),
+          " submitted website form"
+        ] }),
+        date: "Yesterday at 3:22 PM"
+      }
+    )
+  ] }) });
+}
+function EntityPanelBrandIcon({
+  src,
+  alt,
+  className,
+  fallback
+}) {
+  if (!src) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx("img", { src, alt, className });
+}
+function PotentialContacts({
+  icons
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Potential Contacts" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "3 identified" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-0 pt-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0", children: "Primary" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-foreground truncate", children: "Jackie Lee" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm shrink-0", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm truncate", children: "VP Finance" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsx("button", { className: "h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors", children: /* @__PURE__ */ jsx(
+            EntityPanelBrandIcon,
+            {
+              src: icons == null ? void 0 : icons.linkedin,
+              alt: "LinkedIn",
+              className: "w-3.5 h-3.5 object-contain",
+              fallback: /* @__PURE__ */ jsx(LinkIcon, { className: "w-3.5 h-3.5 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("button", { className: "h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors", children: /* @__PURE__ */ jsx(
+            EntityPanelBrandIcon,
+            {
+              src: icons == null ? void 0 : icons.gmail,
+              alt: "Gmail",
+              className: "w-3.5 h-3.5 object-contain",
+              fallback: /* @__PURE__ */ jsx(Mail, { className: "w-3.5 h-3.5 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", className: "bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1", children: [
+            /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 mr-1" }),
+            " Add to SF"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0", children: "78%" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-foreground truncate", children: "Marcus Webb" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm shrink-0", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm truncate", children: "CEO" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsx("button", { className: "h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors", children: /* @__PURE__ */ jsx(
+            EntityPanelBrandIcon,
+            {
+              src: icons == null ? void 0 : icons.linkedin,
+              alt: "LinkedIn",
+              className: "w-3.5 h-3.5 object-contain",
+              fallback: /* @__PURE__ */ jsx(LinkIcon, { className: "w-3.5 h-3.5 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", className: "bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1", children: [
+            /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 mr-1" }),
+            " Add to SF"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0", children: "65%" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-foreground truncate", children: "Priya Shah" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm shrink-0", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm truncate", children: "Head of Ops" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsx("button", { className: "h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors", children: /* @__PURE__ */ jsx(
+            EntityPanelBrandIcon,
+            {
+              src: icons == null ? void 0 : icons.linkedin,
+              alt: "LinkedIn",
+              className: "w-3.5 h-3.5 object-contain",
+              fallback: /* @__PURE__ */ jsx(LinkIcon, { className: "w-3.5 h-3.5 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("button", { className: "h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors", children: /* @__PURE__ */ jsx(
+            EntityPanelBrandIcon,
+            {
+              src: icons == null ? void 0 : icons.gmail,
+              alt: "Gmail",
+              className: "w-3.5 h-3.5 object-contain",
+              fallback: /* @__PURE__ */ jsx(Mail, { className: "w-3.5 h-3.5 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", className: "bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1", children: [
+            /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 mr-1" }),
+            " Add to SF"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function RecentActivity({
+  title = "Recent Activity",
+  count = "10 total events",
+  filters = [],
+  items = []
+}) {
+  return /* @__PURE__ */ jsxs("div", { id: "entity-recent-activity", className: "space-y-4 mb-8 scroll-m-20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+      count && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: count })
+    ] }),
+    filters.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: filters.map((filter) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-7 text-xs rounded-md shadow-none font-medium border-border text-muted-foreground hover:text-foreground",
+        children: filter
+      },
+      filter
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder: "Search activity...",
+        className: "h-9 text-sm bg-background border-border shadow-none"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(TimelineActivity, { events: items }) })
+  ] });
+}
+function ConnectedApps({
+  icons
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Connected Apps" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "3 connected" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-0 pt-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(
+            EntityPanelBrandIcon,
+            {
+              src: icons == null ? void 0 : icons.slack,
+              alt: "Slack",
+              className: "w-4 h-4 object-contain",
+              fallback: /* @__PURE__ */ jsx(MessageCircle, { className: "w-4 h-4 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-foreground leading-snug truncate", children: "#lunchclub-acmeco" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60", children: "Slack Channel" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground", children: "Open" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(
+            EntityPanelBrandIcon,
+            {
+              src: icons == null ? void 0 : icons.gdoc,
+              alt: "Google Docs",
+              className: "w-4 h-4 object-contain",
+              fallback: /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-foreground leading-snug truncate", children: "Account Strategy Document" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60", children: "Google Document" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground", children: "Open" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4 text-foreground" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-foreground leading-snug truncate", children: "Customer Success Playbook" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60", children: "Notion Page" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground", children: "Open" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function EntityDetails({ onClose: _onClose }) {
+  const [activeTab, setActiveTab] = React.useState("overview");
+  const [showMore, setShowMore] = React.useState(false);
+  const leadFields = [
+    { icon: Users, label: "Lead Name", value: /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Jackie Lee" }) },
+    { icon: Briefcase, label: "Title", value: /* @__PURE__ */ jsx("span", { className: "font-medium", children: "VP Finance" }) },
+    { icon: Building2, label: "Company", value: /* @__PURE__ */ jsx("span", { className: "font-medium", children: "CloudKitchen" }) },
+    { icon: Mail, label: "Lead Source", value: /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Inbound \u2014 Website form" }) },
+    {
+      icon: ({ className }) => /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full border-[2px] border-amber-500" }) }),
+      label: "Lead Status",
+      value: /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-amber-700 border-amber-200 bg-amber-50 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800 shadow-none font-medium px-2 py-0 text-[11px]", children: "New \u2014 Not Contacted" })
+    },
+    { icon: Users, label: "Lead Owner", value: /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sarah Johnson (SDR)" }) },
+    {
+      icon: Building2,
+      label: "Industry",
+      value: /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-blue-700 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800 shadow-none font-medium px-2 py-0 text-[11px]", children: "Food Tech / Logistics" })
+    },
+    { icon: Users, label: "Company Size", value: /* @__PURE__ */ jsx("span", { className: "font-medium", children: "200-500 employees" }) }
+  ];
+  const visibleFields = showMore ? leadFields : leadFields.slice(0, 6);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+    /* @__PURE__ */ jsx(
+      EntityPanelHeader,
+      {
+        icon: /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-sm font-medium text-muted-foreground shrink-0", children: "CK" }),
+        title: "CloudKitchen",
+        badgeLabel: "Lead",
+        subtitle: "Last enriched: Today at 10:15 AM"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EntityPanelTabs,
+      {
+        tabs: [
+          { id: "overview", label: "Overview" },
+          { id: "details", label: "Details" }
+        ],
+        activeTab,
+        onTabChange: (id) => setActiveTab(id)
+      }
+    ),
+    activeTab === "overview" ? /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+      /* @__PURE__ */ jsx(EntityMetadataGrid, { fields: visibleFields }),
+      leadFields.length > 6 && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setShowMore(!showMore),
+          className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-8",
+          children: [
+            showMore ? "See less" : "See more",
+            showMore ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(EntitySection, { title: "Company Signals", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Recent funding: $45M Series B, 3 months ago",
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "1" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Hiring: 3 finance/treasury roles in last 30 days",
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "2" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Market expansion: 8 \u2192 15 US markets planned",
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "3" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(EntitySection, { title: "Contact Signals (Jackie Lee)", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Started role: 12 days ago",
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "4" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Previous: Deel \u2014 operations/finance",
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "4" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "LinkedIn connections to existing customers: 2 detected",
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "4" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(SourcesToggle, {})
+    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-0", children: /* @__PURE__ */ jsx(EntitySection, { title: "Estimated Tech Stack", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground min-w-[100px] shrink-0", children: "Banking:" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 italic", children: "Unknown" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground min-w-[100px] shrink-0", children: "Corporate Cards:" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground font-medium", children: [
+          "Brex ",
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal", children: "(from job posting requirements)" }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "2" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 mt-1 shrink-0", children: "\u2022" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground min-w-[100px] shrink-0", children: "Payroll:" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground font-medium", children: [
+          "Gusto ",
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal", children: "(from LinkedIn integrations)" }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full", children: "5" })
+        ] })
+      ] })
+    ] }) }) })
+  ] });
+}
+function SourcesToggle() {
+  const [expanded, setExpanded] = React.useState(false);
+  const sources = [
+    { name: "Crunchbase", type: "Funding data", lastPull: "2h ago" },
+    { name: "LinkedIn", type: "People & company", lastPull: "12h ago" },
+    { name: "LinkedIn Jobs", type: "Hiring signals", lastPull: "1d ago" },
+    { name: "PR Newswire", type: "News & press", lastPull: "6h ago" },
+    { name: "Clearbit", type: "Tech stack & firmographics", lastPull: "2h ago" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "flex items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          "Sources",
+          /* @__PURE__ */ jsx(ChevronDown, { className: `w-3.5 h-3.5 transition-transform duration-200 ${expanded ? "rotate-180" : ""}` })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: "pt-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200", children: sources.map((src, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground py-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 text-[9px] font-medium text-muted-foreground/50 border border-border rounded-full", children: idx + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: src.name }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: src.type })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: src.lastPull })
+    ] }, idx)) })
+  ] });
+}
+export {
+  ConnectedApps,
+  EntityActivityItem,
+  EntityDetails,
+  EntityMetadataGrid,
+  EntityPanel,
+  EntityPanelHeader,
+  EntityPanelTabs,
+  EntitySection,
+  PotentialContacts,
+  RecentActivity,
+  SystemActivity
+};
+//# sourceMappingURL=entity-panel.js.map