@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/prototype/prototype-inbox-view.js

@@ -0,0 +1,701 @@
+"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));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronRight,
+  Filter,
+  FileText,
+  Clock,
+  CheckSquare,
+  Eye,
+  Plus,
+  Building,
+  LayoutList,
+  Columns2,
+  Square,
+  Tag
+} from "lucide-react";
+import { Button } from "../components/button.js";
+import { Badge } from "../components/badge.js";
+import { Input } from "../components/input.js";
+import { ViewModeToggle } from "../components/view-mode-toggle.js";
+import {
+  InboxToolbar
+} from "../components/inbox-toolbar.js";
+import { GroupedListView } from "../components/item-list.js";
+import { SignalApproval } from "../components/signal-feedback-inline.js";
+import { ScoreBreakdown } from "../components/score-breakdown.js";
+import { Citation } from "../components/detail-view.js";
+import {
+  SuggestedActions
+} from "../components/suggested-actions.js";
+import { TimelineActivity } from "../components/timeline-activity.js";
+const DEFAULT_DETAIL_SECTIONS = {
+  signalBrief: true,
+  suggestedActions: true,
+  timeline: true
+};
+const DEFAULT_SIGNAL_SCORE = {
+  score: 65,
+  factors: [
+    { key: "trigger", label: "Trigger strength", score: 70, why: "Moderate signal detected based on account activity" },
+    { key: "fit", label: "Company fit", score: 65, why: "Reasonable fit based on company profile" },
+    { key: "timing", label: "Timing", score: 58, why: "Within general evaluation window" }
+  ],
+  whyNow: "Moderate signals detected that warrant review and potential outreach.",
+  evidence: [
+    "Activity patterns suggest potential opportunity",
+    "Company profile aligns with target segment"
+  ],
+  confidence: 72
+};
+function DetailView({
+  item,
+  sections,
+  getSignalScore,
+  buildSuggestedActions,
+  buildSourceItems,
+  getTimelineEvents,
+  accountContacts,
+  emailSignature,
+  iconMap,
+  onOpenEntityPanel,
+  onOpenRecentActivity,
+  onSuggestedActionFeedback: _onSuggestedActionFeedback,
+  signalLabels
+}) {
+  const [evidenceExpanded, setEvidenceExpanded] = React.useState(false);
+  const [showTimeline, setShowTimeline] = React.useState(false);
+  const [extraActions, setExtraActions] = React.useState([]);
+  React.useEffect(() => {
+    setShowTimeline(false);
+    setEvidenceExpanded(false);
+    setExtraActions([]);
+  }, [item.id]);
+  const signalData = React.useMemo(
+    () => getSignalScore(item.company),
+    [getSignalScore, item.company]
+  );
+  const suggestedActions = React.useMemo(
+    () => [...buildSuggestedActions(item), ...extraActions],
+    [buildSuggestedActions, item, extraActions]
+  );
+  const sourceItems = React.useMemo(() => buildSourceItems(item), [buildSourceItems, item]);
+  const timelineEvents = React.useMemo(
+    () => {
+      var _a;
+      return (_a = getTimelineEvents == null ? void 0 : getTimelineEvents(item)) != null ? _a : [];
+    },
+    [getTimelineEvents, item]
+  );
+  const handleDuplicate = React.useCallback(
+    (id) => {
+      const base = suggestedActions.find((a) => a.id === id);
+      if (!base || base.type !== "email") return;
+      const clone = __spreadProps(__spreadValues({}, base), {
+        id: `${base.id}-dup-${Date.now()}`,
+        emailMeta: base.emailMeta ? __spreadProps(__spreadValues({}, base.emailMeta), { to: void 0 }) : void 0
+      });
+      setExtraActions((prev) => [...prev, clone]);
+    },
+    [suggestedActions]
+  );
+  return /* @__PURE__ */ jsx(
+    SignalApproval.Root,
+    {
+      companyName: item.company,
+      opportunityUrl: `https://acme.lightning.force.com/lightning/r/Opportunity/006${item.id}/view`,
+      labels: signalLabels,
+      onApprove: () => {
+        console.log("Approved signal:", { taskId: item.id, company: item.company });
+      },
+      onApproveFeedback: (reasons, detail) => {
+        var _a;
+        (_a = signalData.onApproveFeedback) == null ? void 0 : _a.call(signalData, reasons, detail);
+        console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail });
+      },
+      onDismiss: (reasons, detail) => {
+        var _a;
+        (_a = signalData.onDismissFeedback) == null ? void 0 : _a.call(signalData, reasons, detail);
+        console.log("Dismissed signal:", { taskId: item.id, reasons, detail });
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl p-6 pb-12 md:p-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "pb-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+                children: [
+                  /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5" }),
+                  "Back"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.company })
+          ] }),
+          /* @__PURE__ */ jsx("h1", { className: "mb-3 text-2xl font-bold tracking-tight text-foreground", children: item.title }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-wrap items-center gap-2", children: [
+            item.statusColor === "red" && /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1 rounded-md bg-red-50 px-2.5 py-1 text-xs font-semibold text-red-700", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold", children: "!" }),
+              " Urgent"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground", children: item.tag1 }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onOpenEntityPanel,
+                className: "ml-1 inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-muted/30 px-2 py-1 transition-colors hover:bg-muted/50",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-4 w-4 items-center justify-center rounded bg-muted-foreground/10 text-[9px] font-semibold text-muted-foreground", children: item.company.substring(0, 1) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: item.company }),
+                  /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/50" })
+                ]
+              }
+            )
+          ] }),
+          sections.signalBrief && (() => {
+            var _a;
+            const pct = signalData.score;
+            const scoreColor = pct >= 70 ? "text-emerald-600" : pct >= 40 ? "text-amber-600" : "text-red-600";
+            const barColor = pct >= 70 ? "bg-emerald-500" : pct >= 40 ? "bg-amber-500" : "bg-red-500";
+            const scoreLabel = pct >= 70 ? "HIGH" : pct >= 40 ? "MEDIUM" : "LOW";
+            const evidenceWithCitations = sourceItems.length >= 4 ? [
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                "There are ",
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "3 unusual signals" }),
+                " including a large balance outflow and reduced login frequency",
+                /* @__PURE__ */ jsx(Citation, { number: 1, source: sourceItems[0] }),
+                /* @__PURE__ */ jsx(Citation, { number: 2, source: sourceItems[1] }),
+                /* @__PURE__ */ jsx(Citation, { number: 3, source: sourceItems[2] })
+              ] }),
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                "Scott mentioned in ",
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "#treasury-questions" }),
+                " that they are actively looking for treasury management options",
+                /* @__PURE__ */ jsx(Citation, { number: 4, source: sourceItems[2] })
+              ] }),
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                "You have a recent email thread regarding optimization options that hasn't been replied to",
+                /* @__PURE__ */ jsx(Citation, { number: 5, source: sourceItems[3] })
+              ] })
+            ] : signalData.evidence.map((ev, i) => /* @__PURE__ */ jsx("span", { children: ev }, i));
+            return /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3", children: "Signal brief" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed mb-2", children: [
+                "We detected signals that suggest a potential opportunity with ",
+                item.company,
+                "."
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/90 leading-relaxed mb-4", children: signalData.whyNow }),
+              /* @__PURE__ */ jsxs("div", { className: "mb-5 rounded-md border border-border bg-muted/20 p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider", children: "Signal Score" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold text-foreground", children: [
+                      signalData.score,
+                      "/100"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: `text-[10px] font-bold uppercase ${scoreColor}`, children: scoreLabel })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "h-1.5 bg-muted rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `h-full rounded-full transition-all duration-500 ${barColor}`,
+                    style: { width: `${signalData.score}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setEvidenceExpanded((prev) => !prev),
+                    className: "flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 transition-transform duration-200 ${evidenceExpanded ? "rotate-180" : ""}` }),
+                      "View more"
+                    ]
+                  }
+                ),
+                evidenceExpanded && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3", children: [
+                  /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: evidenceWithCitations.map((ev, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground leading-relaxed", children: ev })
+                  ] }, index)) }),
+                  /* @__PURE__ */ jsx(
+                    ScoreBreakdown,
+                    {
+                      factors: signalData.factors,
+                      onFactorFeedback: (_a = signalData.onFactorFeedback) != null ? _a : ((key, type, detail) => console.log("Signal factor feedback:", { company: item.company, factor: key, type, detail }))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SignalApproval.Actions, {})
+                ] })
+              ] }),
+              !evidenceExpanded && /* @__PURE__ */ jsx(SignalApproval.Actions, {})
+            ] });
+          })(),
+          sections.timeline && timelineEvents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowTimeline((prev) => !prev),
+                className: "group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2 cursor-pointer",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors", children: "Activity timeline" }),
+                    !showTimeline && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground/60", children: "\xB7 Last activity 1d ago" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium text-muted-foreground", children: [
+                      timelineEvents.length,
+                      " events"
+                    ] }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: `h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}` })
+                  ] })
+                ]
+              }
+            ),
+            showTimeline && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(TimelineActivity, { events: timelineEvents }) })
+          ] })
+        ] }),
+        sections.suggestedActions && /* @__PURE__ */ jsx(SignalApproval.Gate, { children: /* @__PURE__ */ jsx(
+          SuggestedActions,
+          {
+            actions: suggestedActions,
+            accountContacts,
+            signature: emailSignature,
+            iconMap,
+            onDismiss: (id) => console.log("Dismiss action:", id),
+            onSend: (id) => console.log("Send action:", id),
+            onSaveDraft: (id) => console.log("Save draft:", id),
+            onDuplicate: handleDuplicate,
+            onOpenAccountDetails: onOpenEntityPanel,
+            onOpenRecentActivity,
+            onMarkComplete: (id) => console.log("Mark complete:", id),
+            onDispatchAgent: (id) => console.log("Dispatch agent:", id)
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function PrototypeInboxView({
+  items,
+  filterCategories,
+  detailSections,
+  accountContacts = [],
+  buildAccountContacts,
+  emailSignature = "",
+  buildSuggestedActions: buildSuggestedActionsProp,
+  buildSourceItems: buildSourceItemsProp,
+  getSignalScore: getSignalScoreProp,
+  getTimelineEvents,
+  iconMap = {},
+  hideToolbarActions,
+  hideHoverActions,
+  onSuggestedActionFeedback,
+  headerActions,
+  onOpenEntityPanel,
+  onOpenRecentActivity,
+  onItemSelect,
+  defaultViewMode,
+  buildEntityChips,
+  quickFilterTabs,
+  hideAccountsButton,
+  accountDetailsLabel,
+  signalLabels
+}) {
+  var _a;
+  const [inboxViewMode, setInboxViewMode] = React.useState(
+    defaultViewMode === "list" ? "list" : defaultViewMode === "split" ? "inbox" : "inbox"
+  );
+  const [previousViewMode, setPreviousViewMode] = React.useState("inbox");
+  const [selectedTask, setSelectedTask] = React.useState(items[0]);
+  const [inboxAssignee, setInboxAssignee] = React.useState("me");
+  const [inboxFilters, setInboxFilters] = React.useState({});
+  const [activeQuickFilter, setActiveQuickFilter] = React.useState("all");
+  const [splitViewSearch, setSplitViewSearch] = React.useState("");
+  const sections = React.useMemo(
+    () => __spreadValues(__spreadValues({}, DEFAULT_DETAIL_SECTIONS), detailSections),
+    [detailSections]
+  );
+  const resolvedFilterCategories = React.useMemo(
+    () => filterCategories != null ? filterCategories : [
+      {
+        id: "category",
+        label: "Category",
+        icon: /* @__PURE__ */ jsx(Tag, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+        options: [...new Set(items.map((i) => i.tag1))]
+      },
+      {
+        id: "account",
+        label: "Account",
+        icon: /* @__PURE__ */ jsx(Building, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+        options: [...new Set(items.map((i) => i.company))]
+      }
+    ],
+    [filterCategories, items]
+  );
+  const buildSuggestedActions = React.useMemo(
+    () => buildSuggestedActionsProp != null ? buildSuggestedActionsProp : (() => []),
+    [buildSuggestedActionsProp]
+  );
+  const buildSourceItems = React.useMemo(
+    () => buildSourceItemsProp != null ? buildSourceItemsProp : (() => []),
+    [buildSourceItemsProp]
+  );
+  const getSignalScore = React.useMemo(
+    () => getSignalScoreProp != null ? getSignalScoreProp : (() => DEFAULT_SIGNAL_SCORE),
+    [getSignalScoreProp]
+  );
+  const filterFieldMap = React.useMemo(() => {
+    const map = {};
+    for (const cat of resolvedFilterCategories) {
+      switch (cat.id) {
+        case "category":
+        case "signalType":
+          map[cat.id] = (item, v) => item.tag1.toLowerCase() === v.toLowerCase();
+          break;
+        case "account":
+          map[cat.id] = (item, v) => item.company.toLowerCase() === v.toLowerCase();
+          break;
+        default:
+          map[cat.id] = (item, v) => {
+            const lv = v.toLowerCase();
+            return item.tag1.toLowerCase() === lv || item.company.toLowerCase() === lv || item.title.toLowerCase().includes(lv) || item.details.toLowerCase().includes(lv);
+          };
+      }
+    }
+    return map;
+  }, [resolvedFilterCategories]);
+  const filteredItems = React.useMemo(() => {
+    const activeFilters = Object.entries(inboxFilters).filter(
+      ([, value]) => value && value !== "all"
+    );
+    if (activeFilters.length === 0) return items;
+    return items.filter(
+      (item) => activeFilters.every(([key, value]) => {
+        const matcher = filterFieldMap[key];
+        return matcher ? matcher(item, value) : true;
+      })
+    );
+  }, [items, inboxFilters, filterFieldMap]);
+  const resolvedQuickFilterTabs = React.useMemo(() => {
+    if (quickFilterTabs) return quickFilterTabs;
+    const uniqueTags = [...new Set(items.map((i) => i.tag1))];
+    return uniqueTags.map((tag) => ({
+      id: tag.toLowerCase().replace(/\s+/g, "-"),
+      label: tag
+    }));
+  }, [quickFilterTabs, items]);
+  const quickFilterTabCounts = React.useMemo(() => {
+    var _a2;
+    const counts = {};
+    for (const tab of resolvedQuickFilterTabs) {
+      const match = ((_a2 = tab.matchValue) != null ? _a2 : tab.label).toLowerCase();
+      counts[tab.id] = items.filter((i) => i.tag1.toLowerCase() === match).length;
+    }
+    return counts;
+  }, [resolvedQuickFilterTabs, items]);
+  const splitViewItems = React.useMemo(() => {
+    var _a2;
+    let filtered = items;
+    if (activeQuickFilter !== "all") {
+      const activeTab = resolvedQuickFilterTabs.find((t) => t.id === activeQuickFilter);
+      if (activeTab) {
+        const match = ((_a2 = activeTab.matchValue) != null ? _a2 : activeTab.label).toLowerCase();
+        filtered = filtered.filter(
+          (item) => item.tag1.toLowerCase() === match
+        );
+      }
+    }
+    if (splitViewSearch.trim()) {
+      const q = splitViewSearch.trim().toLowerCase();
+      filtered = filtered.filter(
+        (item) => item.tag1.toLowerCase().includes(q) || item.company.toLowerCase().includes(q) || item.title.toLowerCase().includes(q)
+      );
+    }
+    return filtered;
+  }, [items, activeQuickFilter, resolvedQuickFilterTabs, splitViewSearch]);
+  const inboxGroups = React.useMemo(() => {
+    const urgent = filteredItems.filter((i) => i.statusColor === "red");
+    const active = filteredItems.filter((i) => i.statusColor !== "red");
+    return [
+      { key: "urgent", label: "Urgent", items: urgent },
+      { key: "active", label: "Active", items: active }
+    ].filter((g) => g.items.length > 0);
+  }, [filteredItems]);
+  const renderInboxRow = React.useCallback(
+    (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: `h-2 w-2 shrink-0 rounded-full ${item.statusColor === "red" ? "bg-[#f43f5e]" : "bg-[#3b82f6]"}` }),
+      /* @__PURE__ */ jsx("span", { className: "w-[80px] shrink-0 font-mono text-xs text-muted-foreground/80", children: item.id }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap", children: item.tag1 }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: item.title }),
+      /* @__PURE__ */ jsx("span", { className: "w-[120px] shrink-0 truncate text-xs font-medium text-foreground", children: item.company }),
+      /* @__PURE__ */ jsx("span", { className: "w-[80px] shrink-0 text-right text-xs text-muted-foreground", children: item.time })
+    ] }),
+    []
+  );
+  const handleInboxItemSelect = React.useCallback(
+    (item) => {
+      setSelectedTask(item);
+      if (onItemSelect) {
+        onItemSelect(item);
+      } else if (inboxViewMode === "list") {
+        setPreviousViewMode("list");
+        setInboxViewMode("detail");
+      }
+    },
+    [inboxViewMode, onItemSelect]
+  );
+  const handleBackFromDetail = React.useCallback(() => {
+    setInboxViewMode(previousViewMode);
+  }, [previousViewMode]);
+  const handleViewModeChange = React.useCallback((id) => {
+    const mode = id;
+    if (mode !== "detail") {
+      setPreviousViewMode(mode);
+    }
+    setInboxViewMode(mode);
+  }, []);
+  React.useEffect(() => {
+    const mql = window.matchMedia("(max-width: 768px)");
+    function handleChange(e) {
+      if (e.matches && inboxViewMode === "inbox") {
+        setPreviousViewMode("inbox");
+        setInboxViewMode("detail");
+      }
+    }
+    handleChange(mql);
+    mql.addEventListener("change", handleChange);
+    return () => mql.removeEventListener("change", handleChange);
+  }, [inboxViewMode]);
+  const detailViewProps = {
+    item: selectedTask,
+    sections,
+    getSignalScore,
+    buildSuggestedActions,
+    buildSourceItems,
+    getTimelineEvents,
+    accountContacts: (_a = buildAccountContacts == null ? void 0 : buildAccountContacts(selectedTask)) != null ? _a : accountContacts,
+    emailSignature,
+    iconMap,
+    onOpenEntityPanel,
+    onOpenRecentActivity,
+    onSuggestedActionFeedback,
+    signalLabels
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-4 py-3 shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        inboxViewMode === "detail" ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleBackFromDetail,
+            className: "flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+              "Back"
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Inbox" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "bg-muted text-muted-foreground hover:bg-muted font-medium text-[11px] px-2 py-0.5 rounded-md", children: items.length })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          ViewModeToggle,
+          {
+            modes: [
+              { id: "inbox", icon: /* @__PURE__ */ jsx(Columns2, { className: "h-3.5 w-3.5" }), label: "Split View" },
+              { id: "list", icon: /* @__PURE__ */ jsx(LayoutList, { className: "h-3.5 w-3.5" }), label: "List View" },
+              { id: "detail", icon: /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5" }), label: "Detail View" }
+            ],
+            activeMode: inboxViewMode,
+            onModeChange: handleViewModeChange
+          }
+        ),
+        headerActions
+      ] })
+    ] }),
+    inboxViewMode === "detail" ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-1 flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(DetailView, __spreadValues({}, detailViewProps)) }) }) : inboxViewMode === "list" ? /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto bg-background", children: [
+      /* @__PURE__ */ jsx(
+        InboxToolbar,
+        {
+          assignee: inboxAssignee,
+          onAssigneeChange: setInboxAssignee,
+          filterCategories: resolvedFilterCategories,
+          selectedFilters: inboxFilters,
+          onFilterChange: (catId, val) => setInboxFilters((prev) => __spreadProps(__spreadValues({}, prev), { [catId]: val })),
+          onClearFilters: () => setInboxFilters({})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        GroupedListView,
+        {
+          groups: inboxGroups,
+          renderRow: renderInboxRow,
+          getItemKey: (item) => item.id,
+          selectedKey: selectedTask.id,
+          onItemClick: handleInboxItemSelect,
+          emptyMessage: "No inbox items"
+        }
+      )
+    ] }) : (
+      /* Split view */
+      /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-[380px] w-[380px] flex-col border-r border-border bg-background shadow-sm z-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 border-b border-border p-4 shrink-0", children: [
+            !hideToolbarActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground", children: /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground", children: /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4" }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground", children: /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground", children: /* @__PURE__ */ jsx(CheckSquare, { className: "w-4 h-4" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Button, { size: "sm", className: "h-8 px-4 bg-foreground text-background hover:bg-foreground/90 text-xs font-semibold gap-1.5 rounded-md", children: [
+                /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }),
+                " Add Task"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+                /* @__PURE__ */ jsx(Filter, { className: "absolute left-2.5 top-1.5 w-4 h-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: "h-8 pl-8 text-xs bg-background border-border rounded-md shadow-none",
+                    placeholder: "Filter by category...",
+                    value: splitViewSearch,
+                    onChange: (e) => setSplitViewSearch(e.target.value)
+                  }
+                )
+              ] }),
+              !hideAccountsButton && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 text-xs font-medium rounded-md shadow-none", children: [
+                /* @__PURE__ */ jsx(Building, { className: "w-3.5 h-3.5 mr-1.5" }),
+                " ",
+                accountDetailsLabel != null ? accountDetailsLabel : "Accounts"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 overflow-x-auto pb-1 mt-1 scrollbar-hide", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  variant: activeQuickFilter === "all" ? "default" : "outline",
+                  className: `h-7 rounded-full px-3.5 text-[11px] font-semibold shadow-none ${activeQuickFilter === "all" ? "bg-foreground text-background hover:bg-foreground/90" : "bg-transparent border-border text-muted-foreground hover:text-foreground"}`,
+                  onClick: () => setActiveQuickFilter("all"),
+                  children: "All"
+                }
+              ),
+              resolvedQuickFilterTabs.map((tab) => {
+                var _a2;
+                const count = (_a2 = tab.count) != null ? _a2 : quickFilterTabCounts[tab.id];
+                return /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: activeQuickFilter === tab.id ? "default" : "outline",
+                    className: `h-7 rounded-full px-3.5 text-[11px] font-medium shadow-none ${activeQuickFilter === tab.id ? "bg-foreground text-background hover:bg-foreground/90" : "bg-transparent border-border text-muted-foreground hover:text-foreground"}`,
+                    onClick: () => setActiveQuickFilter(tab.id),
+                    children: [
+                      tab.label,
+                      count != null && count > 0 ? ` (${count})` : ""
+                    ]
+                  },
+                  tab.id
+                );
+              })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+            splitViewItems.map((item) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => {
+                  setSelectedTask(item);
+                  onItemSelect == null ? void 0 : onItemSelect(item);
+                },
+                className: `cursor-pointer border-b border-border p-4 transition-colors group relative border-l-2 ${selectedTask.id === item.id ? "bg-muted/30 border-l-brand-purple" : "bg-transparent border-l-transparent hover:bg-muted/10"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-[13px] font-semibold text-foreground leading-tight", children: item.title }),
+                    selectedTask.id !== item.id && item.tag1 && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md border border-border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: item.tag1 }),
+                    /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/80", children: item.time })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 mt-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${item.statusColor === "red" ? "bg-[#f43f5e]" : "bg-[#3b82f6]"}` }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground leading-tight", children: item.details })
+                  ] }),
+                  buildEntityChips && (() => {
+                    const chips = buildEntityChips(item);
+                    if (!chips.length) return null;
+                    return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 mt-2 flex-wrap", children: chips.map((chip) => /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          var _a2;
+                          e.stopPropagation();
+                          (_a2 = chip.onClick) == null ? void 0 : _a2.call(chip);
+                        },
+                        className: "inline-flex items-center gap-1 rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded bg-muted-foreground/10 text-[8px] font-semibold", children: chip.avatarLetter }),
+                          chip.label
+                        ]
+                      },
+                      chip.id
+                    )) });
+                  })(),
+                  !hideHoverActions && /* @__PURE__ */ jsxs("div", { className: `absolute right-4 bottom-4 flex items-center gap-1.5 bg-background shadow-sm rounded-md px-1 py-0.5 border border-border ${selectedTask.id === item.id ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity"}`, children: [
+                    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 rounded text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(CheckSquare, { className: "w-3.5 h-3.5" }) }),
+                    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 rounded text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5" }) })
+                  ] })
+                ]
+              },
+              item.id
+            )),
+            /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "h-8 text-xs font-semibold rounded-md shadow-none", children: "See more" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-full flex-1 flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(DetailView, __spreadValues({}, detailViewProps)) }) })
+      ] })
+    )
+  ] });
+}
+export {
+  DetailView,
+  PrototypeInboxView
+};
+//# sourceMappingURL=prototype-inbox-view.js.map