@handled-ai/design-system 0.20.13 → 0.20.15

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

@@ -113,9 +113,10 @@ function TimelineSection({
   setShowSystemEvents,
   attentionCount,
   sysEvtConfig,
-  lastActivityTime
+  lastActivityTime,
+  isCasePanel = false
 }) {
-  var _a;
+  var _a, _b, _c, _d;
   const visibleEvents = [];
   let hiddenCount = 0;
   for (const e of timelineEvents) {
@@ -124,74 +125,120 @@ function TimelineSection({
   }
   const hasSystemNoise = hiddenCount > 0;
   const toggleLabel = (_a = sysEvtConfig == null ? void 0 : sysEvtConfig.toggleLabel) != null ? _a : "System events";
+  const toggleHelp = showSystemEvents ? (_c = (_b = sysEvtConfig == null ? void 0 : sysEvtConfig.visibleHint) == null ? void 0 : _b.replace("{count}", String(hiddenCount))) != null ? _c : "Hide system events" : (_d = sysEvtConfig == null ? void 0 : sysEvtConfig.hiddenHint) != null ? _d : "Show system events";
   const firstVisibleTime = (!hasSystemNoise || showSystemEvents) && lastActivityTime ? lastActivityTime : visibleEvents.length > 0 ? visibleEvents[0].time : "";
   const visibleCount = visibleEvents.length;
   const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`;
-  return /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        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",
-        "data-testid": "timeline-header",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowTimeline((prev) => !prev),
-              className: "flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0",
-              "data-testid": "timeline-collapse-btn",
-              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 && attentionCount != null && attentionCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20", children: [
-                  attentionCount,
-                  " new"
-                ] }),
-                !showTimeline && firstVisibleTime && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground/60", "data-testid": "last-activity-hint", children: [
-                  "\xB7 Last activity ",
-                  firstVisibleTime
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", "data-testid": "event-count", children: eventCountLabel }),
-                  /* @__PURE__ */ jsx(ChevronDown, { className: `h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}` })
-                ] })
-              ]
-            }
-          ),
-          hasSystemNoise && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowSystemEvents((prev) => !prev),
-              className: cn(
-                "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors hover:text-foreground",
-                showSystemEvents ? "border-primary/40 bg-primary/10 text-primary shadow-sm hover:bg-primary/15" : "border-border bg-background text-muted-foreground hover:bg-muted/40"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        isCasePanel ? "mt-8 border-t border-border pt-8 pb-8" : "mb-8"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full items-center justify-between",
+              isCasePanel ? "gap-4 border-b border-border pb-5" : "group/timeline gap-2 rounded-md py-2 transition-colors hover:bg-muted/40 -mx-2 px-2"
+            ),
+            "data-testid": "timeline-header",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowTimeline((prev) => !prev),
+                  className: "flex min-w-0 cursor-pointer items-center gap-2 border-0 bg-transparent p-0 text-left",
+                  "data-testid": "timeline-collapse-btn",
+                  children: [
+                    /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold uppercase tracking-[0.16em] text-muted-foreground transition-colors group-hover/timeline:text-foreground", children: "ACTIVITY TIMELINE" }),
+                    !showTimeline && attentionCount != null && attentionCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20", children: [
+                      attentionCount,
+                      " new"
+                    ] }),
+                    !isCasePanel && !showTimeline && firstVisibleTime && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground/60", "data-testid": "last-activity-hint", children: [
+                      "\xB7 Last activity ",
+                      firstVisibleTime
+                    ] })
+                  ]
+                }
               ),
-              "aria-pressed": showSystemEvents,
-              "data-testid": "system-events-toggle",
-              children: [
-                toggleLabel,
-                /* @__PURE__ */ jsx(
-                  "span",
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
+                hasSystemNoise && /* @__PURE__ */ jsxs(
+                  "button",
                   {
+                    type: "button",
+                    onClick: () => setShowSystemEvents((prev) => !prev),
                     className: cn(
-                      "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-semibold tabular-nums",
-                      showSystemEvents ? "bg-primary/15 text-primary ring-1 ring-primary/30" : "bg-muted text-muted-foreground ring-1 ring-border/70"
+                      "inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors",
+                      isCasePanel ? "gap-2 px-2.5 py-1 text-xs font-medium" : "gap-3 px-3.5 py-2 text-sm font-semibold",
+                      showSystemEvents ? isCasePanel ? "border-border bg-muted text-foreground shadow-sm hover:bg-muted/80" : "border-foreground bg-foreground text-background shadow-sm hover:bg-foreground/90" : "border-border bg-background text-muted-foreground shadow-sm hover:bg-muted/40 hover:text-foreground"
                     ),
-                    "data-testid": "hidden-count-badge",
-                    children: hiddenCount
+                    "aria-pressed": showSystemEvents,
+                    "aria-label": toggleHelp,
+                    title: toggleHelp,
+                    "data-testid": "system-events-toggle",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "relative inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors",
+                            isCasePanel ? "h-3.5 w-7" : "h-4 w-8",
+                            showSystemEvents ? "bg-teal-600" : "bg-muted-foreground/25"
+                          ),
+                          "aria-hidden": "true",
+                          "data-testid": "system-events-indicator",
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "block rounded-full bg-white shadow-sm transition-transform",
+                                isCasePanel ? "h-2.5 w-2.5" : "h-3 w-3",
+                                showSystemEvents ? isCasePanel ? "translate-x-3.5" : "translate-x-4" : "translate-x-0"
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: toggleLabel }),
+                      !showSystemEvents ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn("inline-flex items-center justify-center rounded-full bg-muted px-1.5 font-bold tabular-nums text-muted-foreground", isCasePanel ? "min-w-5 text-[11px]" : "min-w-[22px] text-xs"),
+                          "data-testid": "hidden-count-badge",
+                          children: hiddenCount
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowTimeline((prev) => !prev),
+                    className: cn(
+                      "inline-flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground",
+                      isCasePanel ? "gap-3 text-sm" : "gap-1.5 text-[11px]"
+                    ),
+                    "aria-label": showTimeline ? "Collapse activity timeline" : "Expand activity timeline",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "event-count", children: eventCountLabel }),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: `h-3.5 w-3.5 transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}` })
+                    ]
                   }
                 )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    showTimeline && visibleEvents.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(TimelineActivity, { events: visibleEvents, variant: "case-panel" }) }),
-    showTimeline && !showSystemEvents && (sysEvtConfig == null ? void 0 : sysEvtConfig.hiddenHint) && hasSystemNoise && /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2", "data-testid": "timeline-footer-hint", children: sysEvtConfig.hiddenHint }),
-    showTimeline && showSystemEvents && (sysEvtConfig == null ? void 0 : sysEvtConfig.visibleHint) && hasSystemNoise && /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2", "data-testid": "timeline-footer-hint", children: sysEvtConfig.visibleHint.replace("{count}", String(hiddenCount)) })
-  ] });
+              ] })
+            ]
+          }
+        ),
+        showTimeline && visibleEvents.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(TimelineActivity, { events: visibleEvents, variant: "case-panel" }) })
+      ]
+    }
+  );
 }
 function DetailView({
   item,
@@ -260,6 +307,7 @@ function DetailView({
     timelineSystemEventsHiddenHint,
     timelineSystemEventsVisibleHint
   ]);
+  const isCasePanelV2 = sectionLayout === "case-panel-v2";
   const [showTimeline, setShowTimeline] = React.useState(false);
   const [extraActions, setExtraActions] = React.useState([]);
   const sysEvtDefaultVisible = (_a = sysEvtConfig == null ? void 0 : sysEvtConfig.defaultVisible) != null ? _a : false;
@@ -267,7 +315,8 @@ function DetailView({
   const [showSystemEvents, setShowSystemEvents] = React.useState(sysEvtDefaultVisible);
   const initialReadDoneRef = React.useRef(false);
   React.useEffect(() => {
-    if (!sysEvtStorageKey) {
+    if (!sysEvtStorageKey || isCasePanelV2) {
+      setShowSystemEvents(sysEvtDefaultVisible);
       initialReadDoneRef.current = true;
       return;
     }
@@ -275,19 +324,22 @@ function DetailView({
       const stored = localStorage.getItem(sysEvtStorageKey);
       if (stored !== null) {
         setShowSystemEvents(stored === "true");
+      } else {
+        setShowSystemEvents(sysEvtDefaultVisible);
       }
     } catch (e) {
+      setShowSystemEvents(sysEvtDefaultVisible);
     }
     initialReadDoneRef.current = true;
-  }, [sysEvtStorageKey]);
+  }, [isCasePanelV2, sysEvtDefaultVisible, sysEvtStorageKey]);
   React.useEffect(() => {
-    if (!sysEvtStorageKey) return;
+    if (!sysEvtStorageKey || isCasePanelV2) return;
     if (!initialReadDoneRef.current) return;
     try {
       localStorage.setItem(sysEvtStorageKey, String(showSystemEvents));
     } catch (e) {
     }
-  }, [showSystemEvents, sysEvtStorageKey]);
+  }, [isCasePanelV2, showSystemEvents, sysEvtStorageKey]);
   React.useEffect(() => {
     setShowTimeline(false);
     setExtraActions([]);
@@ -320,7 +372,6 @@ function DetailView({
     [suggestedActions]
   );
   const timeChipToneClass = signalData.timeChipTone === "red" ? "border-red-300 bg-red-50 text-red-700 hover:bg-red-50" : signalData.timeChipTone === "amber" ? "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-50" : "hover:bg-muted/50";
-  const isCasePanelV2 = sectionLayout === "case-panel-v2";
   const metadataChips = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       SignalPriorityPopover,
@@ -387,7 +438,8 @@ function DetailView({
       setShowSystemEvents,
       attentionCount,
       sysEvtConfig,
-      lastActivityTime
+      lastActivityTime,
+      isCasePanel: isCasePanelV2
     }
   ) : null;
   const suggestedActionsSection = sections.suggestedActions ? /* @__PURE__ */ jsx(SignalApproval.Gate, { children: /* @__PURE__ */ jsx(
@@ -481,9 +533,11 @@ function DetailView({
                 /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(SignalApproval.Actions, {}) })
               ] })
             ] }) : null,
-            renderAfterScore == null ? void 0 : renderAfterScore(item),
-            renderPrimaryAction == null ? void 0 : renderPrimaryAction(item),
-            renderCommentArea == null ? void 0 : renderCommentArea(item),
+            /* @__PURE__ */ jsxs("div", { "data-slot": "case-panel-workflow-stack", className: "space-y-10", children: [
+              renderAfterScore == null ? void 0 : renderAfterScore(item),
+              renderPrimaryAction == null ? void 0 : renderPrimaryAction(item),
+              renderCommentArea ? /* @__PURE__ */ jsx("div", { "data-slot": "case-panel-comment-area", children: renderCommentArea(item) }) : null
+            ] }),
             timelineSection
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             renderAfterScore == null ? void 0 : renderAfterScore(item),