@handled-ai/design-system 0.20.0 → 0.20.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/timeline-activity.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport { sanitizeHtml } from \"../internal/safe-html\"\nimport { ChevronDown, ChevronUp, ExternalLink } from \"lucide-react\"\n\n/**\n * Gmail-like reading-pane typography for rendered, sanitized email HTML.\n * Self-contained Tailwind child-variant utilities — no global CSS. Links use\n * Gmail blue; quoted history (`blockquote.gmail_quote`) is de-emphasized with a\n * left rule and muted, slightly smaller text.\n */\nconst EMAIL_HTML_CLASS = cn(\n  \"text-sm leading-[1.62] text-foreground/90 break-words\",\n  \"[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\",\n  \"[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline\",\n  \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5\",\n  \"[&_img]:max-w-full [&_img]:h-auto\",\n  \"[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:text-[13px]\",\n  \"[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]\"\n)\n\nexport type TimelineEventTone =\n  | \"red\"\n  | \"amber\"\n  | \"emerald\"\n  | \"violet\"\n  | \"blue\"\n  | \"slate\"\n  | \"salesforce\"\n  | \"gmail\"\n\nexport interface TimelineEventActor {\n  kind: \"user\" | \"integration\" | \"system\"\n  name?: string\n  initials?: string\n  avatarUrl?: string\n  verb?: string\n}\n\nexport interface TimelineEvent {\n  id: string\n  icon: React.ReactNode\n  title: React.ReactNode\n  time: string\n  preview?: React.ReactNode\n  email?: {\n    from: string\n    fromEmail?: string\n    to: string\n    cc?: string\n    bcc?: string\n    date?: string\n    subject?: string\n    body: React.ReactNode\n    /**\n     * HTML body. When provided, the card renders formatted, Gmail-like HTML\n     * instead of the plain-text `body`. The component sanitizes it before\n     * rendering. Opt-in: when absent, the plain-text `body` path is used and\n     * existing consumers are unaffected.\n     */\n    bodyHtml?: string\n  }\n  content?: React.ReactNode\n  source?: {\n    label: string\n    url: string\n  }\n  defaultExpanded?: boolean\n  isInteractive?: boolean\n  onSourceClick?: () => void\n  tone?: TimelineEventTone\n  actor?: TimelineEventActor\n  isSystemNoise?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Tone class map — every class is a complete static string literal so\n// Tailwind's JIT scanner can detect them. NO interpolation.\n// ---------------------------------------------------------------------------\n\nexport const TONE_CLASSES: Record<\n  TimelineEventTone,\n  { dot: string; icon: string }\n> = {\n  red: {\n    dot: \"bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40\",\n    icon: \"text-red-600 dark:text-red-300\",\n  },\n  amber: {\n    dot: \"bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40\",\n    icon: \"text-amber-600 dark:text-amber-300\",\n  },\n  emerald: {\n    dot: \"bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40\",\n    icon: \"text-emerald-600 dark:text-emerald-300\",\n  },\n  violet: {\n    dot: \"bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40\",\n    icon: \"text-violet-600 dark:text-violet-300\",\n  },\n  blue: {\n    dot: \"bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40\",\n    icon: \"text-blue-600 dark:text-blue-300\",\n  },\n  slate: {\n    dot: \"bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700\",\n    icon: \"text-slate-500 dark:text-slate-300\",\n  },\n  salesforce: {\n    dot: \"bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25\",\n    icon: \"text-[#00A1E0]\",\n  },\n  gmail: {\n    dot: \"bg-white border-red-200 dark:bg-background dark:border-red-900/40\",\n    icon: \"text-red-500 dark:text-red-300\",\n  },\n}\n\nconst NEUTRAL_DOT_CLASSES = \"border-border/60 bg-background\"\nconst NEUTRAL_ICON_CLASSES = \"text-muted-foreground\"\n\nexport interface TimelineActivityProps {\n  events: TimelineEvent[]\n  className?: string\n}\n\nexport function TimelineActivity({ events, className }: TimelineActivityProps) {\n  return (\n    <div className={cn(\"space-y-0\", className)}>\n      {events.map((event, index) => (\n        <TimelineItem\n          key={event.id}\n          event={event}\n          isLast={index === events.length - 1}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {\n  if (actor.kind === \"system\") return null\n\n  if (actor.kind === \"integration\") {\n    return (\n      <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n        <span>Integration</span>\n        <span className=\"text-muted-foreground/40\">&middot;</span>\n        <span>{time}</span>\n      </div>\n    )\n  }\n\n  // actor.kind === \"user\"\n  const verb = actor.verb ?? \"performed this action\"\n  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : \"?\")\n\n  return (\n    <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n      {actor.avatarUrl ? (\n        <img\n          src={actor.avatarUrl}\n          alt={actor.name ?? \"User\"}\n          className=\"h-4 w-4 rounded-full object-cover\"\n        />\n      ) : (\n        <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground\">\n          {displayInitials}\n        </span>\n      )}\n      {actor.name && <span className=\"text-foreground font-medium\">{actor.name}</span>}\n      <span>{verb}</span>\n      <span className=\"text-muted-foreground/40\">&middot;</span>\n      <span>{time}</span>\n    </div>\n  )\n}\n\nfunction TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {\n  const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)\n  const [showAllRecipients, setShowAllRecipients] = React.useState(false)\n  const hasContent = !!event.content\n  const hasEmail = !!event.email\n\n  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null\n  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES\n  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES\n\n  return (\n    <div className=\"group relative flex gap-3.5\">\n      {!isLast && (\n        <div className=\"absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60\" />\n      )}\n\n      <div className=\"relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background\">\n        <div className={cn(\"flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background\", dotClasses, iconClasses)} data-testid=\"timeline-dot\">\n          {event.icon}\n        </div>\n      </div>\n\n      <div className=\"flex-1 pb-5 pt-0.5\">\n        <div className=\"flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"pr-4 text-[13px] leading-relaxed text-foreground\">\n            {event.title}\n          </div>\n          <span className=\"mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70\">\n            {event.time}\n          </span>\n        </div>\n\n        {event.actor && <ActorByline actor={event.actor} time={event.time} />}\n\n        {(hasContent || hasEmail) && (\n          <div className=\"mt-2\">\n            {event.isInteractive ? (\n              hasEmail ? (\n                <div className=\"overflow-hidden rounded-md border border-border/80 bg-muted/20\">\n                  <div\n                    className={cn(\n                      \"px-3 py-2.5 text-sm\",\n                      !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n                    )}\n                    onClick={() => !expanded && setExpanded(true)}\n                  >\n                    {expanded && event.email ? (\n                      <div className=\"space-y-3\">\n                        <div>\n                          <div className=\"flex items-center justify-between gap-4\">\n                            <div className=\"flex min-w-0 items-baseline gap-1.5\">\n                              <span className=\"font-semibold text-foreground text-[13px] whitespace-nowrap\">{event.email.from}</span>\n                              {event.email.fromEmail && (\n                                <span className=\"text-muted-foreground/60 text-xs truncate\">{event.email.fromEmail}</span>\n                              )}\n                            </div>\n                            {event.email.date && (\n                              <span className=\"shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap\">{event.email.date}</span>\n                            )}\n                          </div>\n                          <div className=\"mt-0.5 flex items-center gap-1 text-xs text-muted-foreground\">\n                            <span className=\"truncate\">\n                              To {event.email.to}\n                              {!showAllRecipients && (event.email.cc || event.email.bcc) ? (\n                                <>, ...</>\n                              ) : null}\n                              {showAllRecipients && event.email.cc ? (\n                                <>, {event.email.cc}</>\n                              ) : null}\n                              {showAllRecipients && event.email.bcc ? (\n                                <> <span className=\"text-muted-foreground/40\">bcc</span> {event.email.bcc}</>\n                              ) : null}\n                            </span>\n                            {(event.email.cc || event.email.bcc) && (\n                              <button\n                                type=\"button\"\n                                onClick={(e) => {\n                                  e.stopPropagation()\n                                  setShowAllRecipients((prev) => !prev)\n                                }}\n                                className=\"shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors\"\n                              >\n                                <ChevronDown className={cn(\"h-3 w-3 transition-transform\", showAllRecipients && \"rotate-180\")} />\n                              </button>\n                            )}\n                          </div>\n                        </div>\n\n                        {event.email.bodyHtml ? (\n                          // Gmail reading-pane typography; quoted history\n                          // (blockquote.gmail_quote) is de-emphasized with a left rule.\n                          <div\n                            data-slot=\"timeline-email-html\"\n                            className={EMAIL_HTML_CLASS}\n                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(event.email.bodyHtml) }}\n                          />\n                        ) : (\n                          <div className=\"whitespace-pre-line text-sm leading-relaxed text-foreground/90\">\n                            {event.email.body}\n                          </div>\n                        )}\n\n                        <button\n                          onClick={(e) => {\n                            e.stopPropagation()\n                            setExpanded(false)\n                          }}\n                          className=\"mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                        >\n                          Show less <ChevronUp className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    ) : (\n                      <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n                        <span className=\"line-clamp-1 pr-3 text-[13px]\">\n                          <span className=\"text-muted-foreground\">{event.email?.from}</span>\n                          <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n                          {event.email?.subject ? (\n                            <>\n                              <span className=\"text-muted-foreground\">{event.email.subject}</span>\n                              <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n                            </>\n                          ) : null}\n                          <span className=\"text-muted-foreground\">{event.preview}</span>\n                        </span>\n                        <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                          Expand <ChevronDown className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              ) : (\n                <div className=\"overflow-hidden rounded-md border border-border/80 bg-muted/20\">\n                  <div\n                    className={cn(\n                      \"px-3 py-2.5 text-sm\",\n                      !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n                    )}\n                    onClick={() => !expanded && setExpanded(true)}\n                  >\n                    {expanded ? (\n                      <div className=\"space-y-2\">\n                        {event.content}\n                        <div className=\"mt-2 flex items-center gap-3\">\n                          {event.source ? (\n                            event.onSourceClick ? (\n                              <button\n                                type=\"button\"\n                                onClick={(e) => { e.stopPropagation(); event.onSourceClick?.(); }}\n                                className=\"mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                              >\n                                Open in {event.source.label}\n                                <ExternalLink className=\"h-3 w-3\" />\n                              </button>\n                            ) : (\n                              <a\n                                href={event.source.url}\n                                target=\"_blank\"\n                                rel=\"noreferrer noopener\"\n                                className=\"mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                              >\n                                Open in {event.source.label}\n                                <ExternalLink className=\"h-3 w-3\" />\n                              </a>\n                            )\n                          ) : null}\n                          <button\n                            onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n                            className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                          >\n                            Show less <ChevronUp className=\"h-3 w-3\" />\n                          </button>\n                        </div>\n                      </div>\n                    ) : (\n                      <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n                        <span className=\"line-clamp-1 pr-3\">\n                          {event.preview ?? event.content}\n                        </span>\n                        <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                          Expand <ChevronDown className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )\n            ) : (\n              <div className=\"pr-2 text-sm leading-relaxed text-muted-foreground\">\n                {event.content}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}
+{"version":3,"sources":["../../src/components/timeline-activity.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport { sanitizeHtml } from \"../internal/safe-html\"\nimport { ChevronDown, ChevronUp, ExternalLink } from \"lucide-react\"\n\n/**\n * Gmail-like reading-pane typography for rendered, sanitized email HTML.\n * Self-contained Tailwind child-variant utilities — no global CSS. Links use\n * Gmail blue; quoted history (`blockquote.gmail_quote`) is de-emphasized with a\n * left rule and muted, slightly smaller text.\n */\nconst EMAIL_HTML_CLASS = cn(\n  \"text-sm leading-[1.62] text-foreground/90 break-words\",\n  \"[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\",\n  \"[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline\",\n  \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5\",\n  \"[&_img]:max-w-full [&_img]:h-auto\",\n  \"[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:text-[13px]\",\n  \"[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]\"\n)\n\nexport type TimelineActivityVariant = \"default\" | \"case-panel\"\n\nexport type TimelineEventTone =\n  | \"red\"\n  | \"amber\"\n  | \"emerald\"\n  | \"violet\"\n  | \"blue\"\n  | \"slate\"\n  | \"salesforce\"\n  | \"gmail\"\n\nexport interface TimelineEventActor {\n  kind: \"user\" | \"integration\" | \"system\"\n  name?: string\n  initials?: string\n  avatarUrl?: string\n  verb?: string\n}\n\nexport interface TimelineEvent {\n  id: string\n  icon: React.ReactNode\n  title: React.ReactNode\n  time: string\n  preview?: React.ReactNode\n  email?: {\n    from: string\n    fromEmail?: string\n    to: string\n    cc?: string\n    bcc?: string\n    date?: string\n    subject?: string\n    body: React.ReactNode\n    /**\n     * HTML body. When provided, the card renders formatted, Gmail-like HTML\n     * instead of the plain-text `body`. The component sanitizes it before\n     * rendering. Opt-in: when absent, the plain-text `body` path is used and\n     * existing consumers are unaffected.\n     */\n    bodyHtml?: string\n  }\n  content?: React.ReactNode\n  source?: {\n    label: string\n    url: string\n  }\n  defaultExpanded?: boolean\n  isInteractive?: boolean\n  onSourceClick?: () => void\n  tone?: TimelineEventTone\n  actor?: TimelineEventActor\n  isSystemNoise?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Tone class map — every class is a complete static string literal so\n// Tailwind's JIT scanner can detect them. NO interpolation.\n// ---------------------------------------------------------------------------\n\nexport const TONE_CLASSES: Record<\n  TimelineEventTone,\n  { dot: string; icon: string }\n> = {\n  red: {\n    dot: \"bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40\",\n    icon: \"text-red-600 dark:text-red-300\",\n  },\n  amber: {\n    dot: \"bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40\",\n    icon: \"text-amber-600 dark:text-amber-300\",\n  },\n  emerald: {\n    dot: \"bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40\",\n    icon: \"text-emerald-600 dark:text-emerald-300\",\n  },\n  violet: {\n    dot: \"bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40\",\n    icon: \"text-violet-600 dark:text-violet-300\",\n  },\n  blue: {\n    dot: \"bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40\",\n    icon: \"text-blue-600 dark:text-blue-300\",\n  },\n  slate: {\n    dot: \"bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700\",\n    icon: \"text-slate-500 dark:text-slate-300\",\n  },\n  salesforce: {\n    dot: \"bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25\",\n    icon: \"text-[#00A1E0]\",\n  },\n  gmail: {\n    dot: \"bg-white border-red-200 dark:bg-background dark:border-red-900/40\",\n    icon: \"text-red-500 dark:text-red-300\",\n  },\n}\n\nconst NEUTRAL_DOT_CLASSES = \"border-border/60 bg-background\"\nconst NEUTRAL_ICON_CLASSES = \"text-muted-foreground\"\n\ntype TimelineVariantClasses = {\n  outerRowGap: string\n  connector: string\n  dotWrapperSize: string\n  dot: string\n  contentPadding: string\n  titleRowSpacing: string\n  title: string\n  time: string\n  cardContainer: string\n  cardHeader: string\n  cardBody: string\n  cardFooter: string\n  collapsedPreview: string\n  actionLinkRow: string\n  actionLink: string\n  nonInteractiveContent: string\n}\n\nconst TIMELINE_VARIANT_CLASSES: Record<TimelineActivityVariant, TimelineVariantClasses> = {\n  default: {\n    outerRowGap: \"group relative flex gap-3.5\",\n    connector: \"absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60\",\n    dotWrapperSize: \"relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background\",\n    dot: \"flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background\",\n    contentPadding: \"flex-1 pb-5 pt-0.5\",\n    titleRowSpacing: \"flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between\",\n    title: \"pr-4 text-[13px] leading-relaxed text-foreground\",\n    time: \"mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70\",\n    cardContainer: \"overflow-hidden rounded-md border border-border/80 bg-muted/20\",\n    cardHeader: \"px-3 pt-2.5\",\n    cardBody: \"px-3 py-2.5 text-sm\",\n    cardFooter: \"px-3 pb-2.5\",\n    collapsedPreview: \"flex items-center justify-between gap-2 px-3 py-2.5 text-sm text-muted-foreground\",\n    actionLinkRow: \"flex items-center gap-3 px-3 pb-2.5\",\n    actionLink: \"inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\",\n    nonInteractiveContent: \"pr-2 text-sm leading-relaxed text-muted-foreground\",\n  },\n  \"case-panel\": {\n    outerRowGap: \"group relative flex gap-3\",\n    connector: \"absolute left-[7px] top-[18px] bottom-[-4px] w-px bg-border/60\",\n    dotWrapperSize: \"relative z-10 mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-background\",\n    dot: \"flex h-3.5 w-3.5 items-center justify-center rounded-full border ring-[3px] ring-background\",\n    contentPadding: \"flex-1 pb-4 pt-0.5\",\n    titleRowSpacing: \"flex min-w-0 flex-col gap-0.5 sm:flex-row sm:items-start sm:justify-between\",\n    title: \"pr-3 text-[13px] leading-snug text-foreground\",\n    time: \"mt-0.5 shrink-0 whitespace-nowrap text-[11px] leading-snug text-muted-foreground/70\",\n    cardContainer: \"overflow-hidden rounded-lg border border-border/70 bg-card shadow-sm\",\n    cardHeader: \"border-b border-border/60 bg-background px-3 py-2\",\n    cardBody: \"px-3 py-2.5 text-sm\",\n    cardFooter: \"border-t border-border/60 bg-background/50 px-3 py-1.5\",\n    collapsedPreview: \"flex items-center justify-between gap-2 px-3 py-2 text-sm text-muted-foreground\",\n    actionLinkRow: \"flex items-center justify-end gap-2 px-3 py-1.5\",\n    actionLink: \"inline-flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground\",\n    nonInteractiveContent: \"pr-2 text-[13px] leading-snug text-muted-foreground\",\n  },\n}\n\nexport interface TimelineActivityProps {\n  events: TimelineEvent[]\n  className?: string\n  variant?: TimelineActivityVariant\n}\n\nexport function TimelineActivity({ events, className, variant = \"default\" }: TimelineActivityProps) {\n  return (\n    <div className={cn(\"space-y-0\", className)} data-variant={variant}>\n      {events.map((event, index) => (\n        <TimelineItem\n          key={event.id}\n          event={event}\n          isLast={index === events.length - 1}\n          variant={variant}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {\n  if (actor.kind === \"system\") return null\n\n  if (actor.kind === \"integration\") {\n    return (\n      <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n        <span>Integration</span>\n        <span className=\"text-muted-foreground/40\">&middot;</span>\n        <span>{time}</span>\n      </div>\n    )\n  }\n\n  // actor.kind === \"user\"\n  const verb = actor.verb ?? \"performed this action\"\n  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : \"?\")\n\n  return (\n    <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n      {actor.avatarUrl ? (\n        <img\n          src={actor.avatarUrl}\n          alt={actor.name ?? \"User\"}\n          className=\"h-4 w-4 rounded-full object-cover\"\n        />\n      ) : (\n        <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground\">\n          {displayInitials}\n        </span>\n      )}\n      {actor.name && <span className=\"text-foreground font-medium\">{actor.name}</span>}\n      <span>{verb}</span>\n      <span className=\"text-muted-foreground/40\">&middot;</span>\n      <span>{time}</span>\n    </div>\n  )\n}\n\nfunction TimelineItem({\n  event,\n  isLast,\n  variant,\n}: {\n  event: TimelineEvent\n  isLast: boolean\n  variant: TimelineActivityVariant\n}) {\n  const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)\n  const [showAllRecipients, setShowAllRecipients] = React.useState(false)\n  const hasContent = !!event.content\n  const hasEmail = !!event.email\n  const classes = TIMELINE_VARIANT_CLASSES[variant]\n\n  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null\n  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES\n  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES\n\n  return (\n    <div className={classes.outerRowGap}>\n      {!isLast && (\n        <div className={classes.connector} />\n      )}\n\n      <div className={classes.dotWrapperSize}>\n        <div className={cn(classes.dot, dotClasses, iconClasses)} data-testid=\"timeline-dot\">\n          {event.icon}\n        </div>\n      </div>\n\n      <div className={classes.contentPadding}>\n        <div className={classes.titleRowSpacing}>\n          <div className={classes.title}>\n            {event.title}\n          </div>\n          <span className={classes.time}>\n            {event.time}\n          </span>\n        </div>\n\n        {event.actor && <ActorByline actor={event.actor} time={event.time} />}\n\n        {(hasContent || hasEmail) && (\n          <div className=\"mt-2\">\n            {event.isInteractive ? (\n              hasEmail ? (\n                <EmailCard\n                  event={event}\n                  expanded={expanded}\n                  setExpanded={setExpanded}\n                  showAllRecipients={showAllRecipients}\n                  setShowAllRecipients={setShowAllRecipients}\n                  variant={variant}\n                  classes={classes}\n                />\n              ) : (\n                <ContentCard\n                  event={event}\n                  expanded={expanded}\n                  setExpanded={setExpanded}\n                  variant={variant}\n                  classes={classes}\n                />\n              )\n            ) : (\n              <div className={classes.nonInteractiveContent}>\n                {event.content}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\ntype TimelineEmail = NonNullable<TimelineEvent[\"email\"]>\ntype TimelineSource = NonNullable<TimelineEvent[\"source\"]>\n\nfunction EmailMetadata({\n  email,\n  showAllRecipients,\n  setShowAllRecipients,\n}: {\n  email: TimelineEmail\n  showAllRecipients: boolean\n  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>\n}) {\n  return (\n    <>\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex min-w-0 items-baseline gap-1.5\">\n          <span className=\"font-semibold text-foreground text-[13px] whitespace-nowrap\">{email.from}</span>\n          {email.fromEmail && (\n            <span className=\"text-muted-foreground/60 text-xs truncate\">{email.fromEmail}</span>\n          )}\n        </div>\n        {email.date && (\n          <span className=\"shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap\">{email.date}</span>\n        )}\n      </div>\n      <div className=\"mt-0.5 flex items-center gap-1 text-xs text-muted-foreground\">\n        <span className=\"truncate\">\n          To {email.to}\n          {!showAllRecipients && (email.cc || email.bcc) ? (\n            <>, ...</>\n          ) : null}\n          {showAllRecipients && email.cc ? (\n            <>, {email.cc}</>\n          ) : null}\n          {showAllRecipients && email.bcc ? (\n            <> <span className=\"text-muted-foreground/40\">bcc</span> {email.bcc}</>\n          ) : null}\n        </span>\n        {(email.cc || email.bcc) && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              setShowAllRecipients((prev) => !prev)\n            }}\n            className=\"shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors\"\n          >\n            <ChevronDown className={cn(\"h-3 w-3 transition-transform\", showAllRecipients && \"rotate-180\")} />\n          </button>\n        )}\n      </div>\n    </>\n  )\n}\n\nfunction EmailBody({ email }: { email: TimelineEmail }) {\n  if (email.bodyHtml) {\n    return (\n      // Gmail reading-pane typography; quoted history\n      // (blockquote.gmail_quote) is de-emphasized with a left rule.\n      <div\n        data-slot=\"timeline-email-html\"\n        className={EMAIL_HTML_CLASS}\n        dangerouslySetInnerHTML={{ __html: sanitizeHtml(email.bodyHtml) }}\n      />\n    )\n  }\n\n  return (\n    <div className=\"whitespace-pre-line text-sm leading-relaxed text-foreground/90\">\n      {email.body}\n    </div>\n  )\n}\n\nfunction CollapsedEmailPreview({\n  email,\n  preview,\n  className,\n  actionClassName,\n  onClick,\n}: {\n  email?: TimelineEmail\n  preview?: React.ReactNode\n  className: string\n  actionClassName: string\n  onClick?: () => void\n}) {\n  return (\n    <div className={className} onClick={onClick}>\n      <span className=\"line-clamp-1 pr-3 text-[13px]\">\n        <span className=\"text-muted-foreground\">{email?.from}</span>\n        <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n        {email?.subject ? (\n          <>\n            <span className=\"text-muted-foreground\">{email.subject}</span>\n            <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n          </>\n        ) : null}\n        <span className=\"text-muted-foreground\">{preview}</span>\n      </span>\n      <button type=\"button\" className={actionClassName}>\n        Expand <ChevronDown className=\"h-3 w-3\" />\n      </button>\n    </div>\n  )\n}\n\nfunction ShowLessButton({\n  className,\n  onClick,\n  type,\n}: {\n  className: string\n  onClick: React.MouseEventHandler<HTMLButtonElement>\n  type?: \"button\"\n}) {\n  return (\n    <button type={type} onClick={onClick} className={className}>\n      Show less <ChevronUp className=\"h-3 w-3\" />\n    </button>\n  )\n}\n\nfunction SourceAction({\n  source,\n  onSourceClick,\n  className,\n}: {\n  source: TimelineSource\n  onSourceClick?: () => void\n  className: string\n}) {\n  if (onSourceClick) {\n    return (\n      <button\n        type=\"button\"\n        onClick={(e) => { e.stopPropagation(); onSourceClick(); }}\n        className={className}\n      >\n        Open in {source.label}\n        <ExternalLink className=\"h-3 w-3\" />\n      </button>\n    )\n  }\n\n  return (\n    <a\n      href={source.url}\n      target=\"_blank\"\n      rel=\"noreferrer noopener\"\n      className={className}\n    >\n      Open in {source.label}\n      <ExternalLink className=\"h-3 w-3\" />\n    </a>\n  )\n}\n\nfunction EmailCard({\n  event,\n  expanded,\n  setExpanded,\n  showAllRecipients,\n  setShowAllRecipients,\n  variant,\n  classes,\n}: {\n  event: TimelineEvent\n  expanded: boolean\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>\n  showAllRecipients: boolean\n  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>\n  variant: TimelineActivityVariant\n  classes: TimelineVariantClasses\n}) {\n  if (variant === \"default\") {\n    return (\n      <div className={classes.cardContainer} data-variant={variant}>\n        <div\n          className={cn(\n            \"px-3 py-2.5 text-sm\",\n            !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n          )}\n          onClick={() => !expanded && setExpanded(true)}\n        >\n          {expanded && event.email ? (\n            <div className=\"space-y-3\">\n              <div>\n                <EmailMetadata\n                  email={event.email}\n                  showAllRecipients={showAllRecipients}\n                  setShowAllRecipients={setShowAllRecipients}\n                />\n              </div>\n\n              <EmailBody email={event.email} />\n\n              <ShowLessButton\n                onClick={(e) => {\n                  e.stopPropagation()\n                  setExpanded(false)\n                }}\n                className=\"mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n              />\n            </div>\n          ) : (\n            <CollapsedEmailPreview\n              email={event.email}\n              preview={event.preview}\n              className=\"flex items-center justify-between gap-2 text-muted-foreground\"\n              actionClassName=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\"\n            />\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={classes.cardContainer} data-variant={variant}>\n      {expanded && event.email ? (\n        <>\n          <div className={classes.cardHeader} data-slot=\"timeline-card-header\">\n            <EmailMetadata\n              email={event.email}\n              showAllRecipients={showAllRecipients}\n              setShowAllRecipients={setShowAllRecipients}\n            />\n          </div>\n\n          <div className={classes.cardBody} data-slot=\"timeline-card-body\">\n            <EmailBody email={event.email} />\n          </div>\n\n          <div className={cn(classes.cardFooter, classes.actionLinkRow)} data-slot=\"timeline-card-footer\">\n            <ShowLessButton\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation()\n                setExpanded(false)\n              }}\n              className={classes.actionLink}\n            />\n          </div>\n        </>\n      ) : (\n        <CollapsedEmailPreview\n          email={event.email}\n          preview={event.preview}\n          className={cn(classes.collapsedPreview, \"cursor-pointer hover:bg-muted/30 transition-colors\")}\n          actionClassName={cn(classes.actionLink, \"shrink-0\")}\n          onClick={() => setExpanded(true)}\n        />\n      )}\n    </div>\n  )\n}\n\nfunction ContentCard({\n  event,\n  expanded,\n  setExpanded,\n  variant,\n  classes,\n}: {\n  event: TimelineEvent\n  expanded: boolean\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>\n  variant: TimelineActivityVariant\n  classes: TimelineVariantClasses\n}) {\n  if (variant === \"default\") {\n    return (\n      <div className={classes.cardContainer} data-variant={variant}>\n        <div\n          className={cn(\n            \"px-3 py-2.5 text-sm\",\n            !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n          )}\n          onClick={() => !expanded && setExpanded(true)}\n        >\n          {expanded ? (\n            <div className=\"space-y-2\">\n              {event.content}\n              <div className=\"mt-2 flex items-center gap-3\">\n                {event.source ? (\n                  <SourceAction\n                    source={event.source}\n                    onSourceClick={event.onSourceClick}\n                    className=\"mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                  />\n                ) : null}\n                <ShowLessButton\n                  onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n                  className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                />\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n              <span className=\"line-clamp-1 pr-3\">\n                {event.preview ?? event.content}\n              </span>\n              <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                Expand <ChevronDown className=\"h-3 w-3\" />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={classes.cardContainer} data-variant={variant}>\n      {expanded ? (\n        <>\n          <div className={classes.cardBody} data-slot=\"timeline-card-body\">\n            {event.content}\n          </div>\n          <div className={cn(classes.cardFooter, classes.actionLinkRow, event.source ? \"justify-between\" : \"justify-end\")} data-slot=\"timeline-card-footer\">\n            {event.source ? (\n              <SourceAction\n                source={event.source}\n                onSourceClick={event.onSourceClick}\n                className={classes.actionLink}\n              />\n            ) : null}\n            <ShowLessButton\n              type=\"button\"\n              onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n              className={classes.actionLink}\n            />\n          </div>\n        </>\n      ) : (\n        <div\n          className={cn(classes.collapsedPreview, \"cursor-pointer hover:bg-muted/30 transition-colors\")}\n          onClick={() => setExpanded(true)}\n        >\n          <span className=\"line-clamp-1 pr-3\">\n            {event.preview ?? event.content}\n          </span>\n          <button type=\"button\" className={cn(classes.actionLink, \"shrink-0\")}>\n            Expand <ChevronDown className=\"h-3 w-3\" />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export { EmptyState, EmptyStateProps } from './components/empty-state.js';
 export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PanelMode, PotentialContacts, RecentActivity, SystemActivity, useEntityPanel } from './components/entity-panel.js';
 export { RelatedRecordActionCard, RelatedRecordActionCardKind, RelatedRecordActionCardProps, RelatedRecordActionIcon } from './components/related-record-action-card.js';
 export { FeedbackActions, FeedbackActionsProps, FeedbackChipGroup, FeedbackChipGroupProps, FeedbackChipTree, FeedbackFooter, FeedbackFooterProps, FeedbackInput, FeedbackInputProps, FeedbackSubmitData, InlineFeedbackControl, InlineFeedbackControlProps, PersistedFeedbackData } from './components/feedback-primitives.js';
-export { A as AccountFilterTab, a as AccountsViewConfig, b as AdminTab, c as AdminViewConfig, B as BriefStyleVariant, E as EntityPanelConfig, d as EntityPanelSection, I as InboxDetailSections, e as InboxSortOption, f as InboxViewConfig, g as InsightsCustomTab, h as InsightsViewConfig, P as PriorityFactor, i as PrototypeBrandConfig, j as PrototypeConfig, Q as QueueItem, S as SignalPriorityPopover, k as SignalPriorityPopoverProps, l as SignalPriorityScoreDisplay, m as SignalScoreData, n as SignalScoreExplanationBucket, o as SignalScoreExplanationSignal, p as SignalScoreUrgencyLabel, T as TimelineSystemEventsConfig, W as WorkQueueViewConfig } from './signal-priority-popover-Cg9XPJsp.js';
+export { A as AccountFilterTab, a as AccountsViewConfig, b as AdminTab, c as AdminViewConfig, B as BriefStyleVariant, E as EntityPanelConfig, d as EntityPanelSection, I as InboxDetailSections, e as InboxSortOption, f as InboxViewConfig, g as InsightsCustomTab, h as InsightsViewConfig, P as PriorityFactor, i as PrototypeBrandConfig, j as PrototypeConfig, Q as QueueItem, S as SignalPriorityPopover, k as SignalPriorityPopoverProps, l as SignalPriorityScoreDisplay, m as SignalScoreData, n as SignalScoreExplanationBucket, o as SignalScoreExplanationSignal, p as SignalScoreUrgencyLabel, T as TimelineSystemEventsConfig, W as WorkQueueViewConfig } from './signal-priority-popover-BJHd07dU.js';
 export { FilterChip, FilterChipProps } from './components/filter-chip.js';
 export { InboxGroupHeader, InboxRow, InboxRowProps } from './components/inbox-row.js';
 export { AssigneeFilter, InboxFilterCategory, InboxToolbar, InboxToolbarProps } from './components/inbox-toolbar.js';
@@ -94,7 +94,7 @@ export { Switch } from './components/switch.js';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/table.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from './components/tabs.js';
 export { Textarea } from './components/textarea.js';
-export { TONE_CLASSES, TimelineActivity, TimelineActivityProps, TimelineEvent, TimelineEventActor, TimelineEventTone } from './components/timeline-activity.js';
+export { TONE_CLASSES, TimelineActivity, TimelineActivityProps, TimelineActivityVariant, TimelineEvent, TimelineEventActor, TimelineEventTone } from './components/timeline-activity.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/tooltip.js';
 export { ActorByline, ActorBylineProps, UserPill, UserPillProps } from './components/user-display.js';
 export { VariableAutocomplete, VariableAutocompleteProps, VariableDef, VariableGroup } from './components/variable-autocomplete.js';

package/dist/prototype/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AccountFilterTab, a as AccountsViewConfig, b as AdminTab, c as AdminViewConfig, B as BriefStyleVariant, E as EntityPanelConfig, d as EntityPanelSection, I as InboxDetailSections, e as InboxSortOption, f as InboxViewConfig, g as InsightsCustomTab, h as InsightsViewConfig, i as PrototypeBrandConfig, j as PrototypeConfig, Q as QueueItem, m as SignalScoreData, n as SignalScoreExplanationBucket, o as SignalScoreExplanationSignal, p as SignalScoreUrgencyLabel, T as TimelineSystemEventsConfig, W as WorkQueueViewConfig } from '../signal-priority-popover-Cg9XPJsp.js';
+export { A as AccountFilterTab, a as AccountsViewConfig, b as AdminTab, c as AdminViewConfig, B as BriefStyleVariant, E as EntityPanelConfig, d as EntityPanelSection, I as InboxDetailSections, e as InboxSortOption, f as InboxViewConfig, g as InsightsCustomTab, h as InsightsViewConfig, i as PrototypeBrandConfig, j as PrototypeConfig, Q as QueueItem, m as SignalScoreData, n as SignalScoreExplanationBucket, o as SignalScoreExplanationSignal, p as SignalScoreUrgencyLabel, T as TimelineSystemEventsConfig, W as WorkQueueViewConfig } from '../signal-priority-popover-BJHd07dU.js';
 export { PrototypeShell, PrototypeShellProps } from './prototype-shell.js';
 export { DetailView, DetailViewProps, PrototypeInboxView, PrototypeInboxViewProps } from './prototype-inbox-view.js';
 export { PrototypeInsightsView, PrototypeInsightsViewProps } from './prototype-insights-view.js';

package/dist/prototype/prototype-accounts-view.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { a as AccountsViewConfig } from '../signal-priority-popover-Cg9XPJsp.js';
+import { a as AccountsViewConfig } from '../signal-priority-popover-BJHd07dU.js';
 import { DataRow } from '../components/data-table.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';

package/dist/prototype/prototype-admin-view.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { c as AdminViewConfig } from '../signal-priority-popover-Cg9XPJsp.js';
+import { c as AdminViewConfig } from '../signal-priority-popover-BJHd07dU.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';
 import '../components/quick-action-modal.js';

package/dist/prototype/prototype-config.d.ts

@@ -11,7 +11,7 @@ import '../charts/pipeline-overview.js';
 import '../components/timeline-activity.js';
 import '../components/signal-feedback-inline.js';
 import 'lucide-react';
-export { A as AccountFilterTab, a as AccountsViewConfig, b as AdminTab, c as AdminViewConfig, B as BriefStyleVariant, E as EntityPanelConfig, d as EntityPanelSection, I as InboxDetailSections, e as InboxSortOption, f as InboxViewConfig, g as InsightsCustomTab, h as InsightsViewConfig, i as PrototypeBrandConfig, j as PrototypeConfig, Q as QueueItem, m as SignalScoreData, n as SignalScoreExplanationBucket, o as SignalScoreExplanationSignal, p as SignalScoreUrgencyLabel, T as TimelineSystemEventsConfig, W as WorkQueueViewConfig } from '../signal-priority-popover-Cg9XPJsp.js';
+export { A as AccountFilterTab, a as AccountsViewConfig, b as AdminTab, c as AdminViewConfig, B as BriefStyleVariant, E as EntityPanelConfig, d as EntityPanelSection, I as InboxDetailSections, e as InboxSortOption, f as InboxViewConfig, g as InsightsCustomTab, h as InsightsViewConfig, i as PrototypeBrandConfig, j as PrototypeConfig, Q as QueueItem, m as SignalScoreData, n as SignalScoreExplanationBucket, o as SignalScoreExplanationSignal, p as SignalScoreUrgencyLabel, T as TimelineSystemEventsConfig, W as WorkQueueViewConfig } from '../signal-priority-popover-BJHd07dU.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-modal.js';
 import '../components/score-semantics.js';

package/dist/prototype/prototype-inbox-view.d.ts

@@ -3,7 +3,7 @@ import { OpportunityDraft, ApprovalState, OpportunityPreview } from '../componen
 import { SourceDef } from '../components/detail-view.js';
 import { SuggestedAction, SuggestedContact } from '../components/suggested-actions.js';
 import { TimelineEvent } from '../components/timeline-activity.js';
-import { Q as QueueItem, I as InboxDetailSections, m as SignalScoreData, f as InboxViewConfig, B as BriefStyleVariant, T as TimelineSystemEventsConfig } from '../signal-priority-popover-Cg9XPJsp.js';
+import { Q as QueueItem, I as InboxDetailSections, m as SignalScoreData, f as InboxViewConfig, B as BriefStyleVariant, T as TimelineSystemEventsConfig } from '../signal-priority-popover-BJHd07dU.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';
 import '../components/quick-action-modal.js';
@@ -47,11 +47,17 @@ interface DetailViewProps {
     hideApproveButton?: boolean;
     signalBriefCopy?: InboxViewConfig["signalBriefCopy"];
     briefStyleVariant?: BriefStyleVariant;
+    /** Opt-in detail panel section ordering. Defaults to the existing layout. */
+    sectionLayout?: InboxViewConfig["sectionLayout"];
     renderDetailExtra?: (item: QueueItem) => React.ReactNode;
     /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
     renderBeforeScore?: (item: QueueItem) => React.ReactNode;
     /** Render content between the signal score section and the activity timeline. */
     renderAfterScore?: (item: QueueItem) => React.ReactNode;
+    /** Render primary case-panel content between the opportunity section and comment area. */
+    renderPrimaryAction?: (item: QueueItem) => React.ReactNode;
+    /** Render case-panel comment content before the activity timeline. */
+    renderCommentArea?: (item: QueueItem) => React.ReactNode;
     lastActivityTime?: string;
     /** Render extra content inline with the detail title. */
     renderTitleExtra?: (item: QueueItem) => React.ReactNode;
@@ -95,7 +101,7 @@ interface DetailViewProps {
     /** @deprecated Use `timelineSystemEventsConfig.visibleHint`. */
     timelineSystemEventsVisibleHint?: string;
 }
-declare function DetailView({ item, sections, getSignalScore, buildSuggestedActions, buildSourceItems: _buildSourceItems, getTimelineEvents, accountContacts, emailSignature, iconMap, onOpenEntityPanel, onOpenRecentActivity, onSuggestedActionFeedback: _onSuggestedActionFeedback, onScoreFeedback: _onScoreFeedback, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, briefStyleVariant, renderDetailExtra, renderBeforeScore, renderAfterScore, lastActivityTime, renderTitleExtra, renderTitleActionRow, renderTitleSubtext, renderMetadataExtra, metadataLayout, accountDetailsButtonLabel, getAccountDetailsButtonAriaLabel, onOpenSignalBucket, approveButtonIconUrl, opportunityPreview, onRequestApproval, attentionCount, timelineSystemEventsConfig: configProp, timelineSystemEventsToggleLabel, timelineSystemEventsStorageKey, timelineSystemEventsDefaultVisible, timelineSystemEventsHiddenHint, timelineSystemEventsVisibleHint, }: DetailViewProps): React.JSX.Element;
-declare function PrototypeInboxView({ items, filterCategories, detailSections, accountContacts, buildAccountContacts, emailSignature, buildSuggestedActions: buildSuggestedActionsProp, buildSourceItems: buildSourceItemsProp, getSignalScore: getSignalScoreProp, getTimelineEvents, iconMap, hideToolbarActions, hideHoverActions, onSuggestedActionFeedback, onScoreFeedback, onOpenSignalBucket, headerActions, onOpenEntityPanel, onOpenRecentActivity, onItemSelect, defaultViewMode, buildEntityChips, quickFilterTabs, hideAccountsButton, accountDetailsLabel, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, briefStyleVariant, renderDetailExtra, renderBeforeScore, renderAfterScore, lastActivityTime, timelineSystemEventsConfig, attentionCount, renderTitleExtra, renderTitleActionRow, renderTitleSubtext, accountDetailsButtonLabel, getAccountDetailsButtonAriaLabel, sortOptions, activeSortId, onSortChange, }: PrototypeInboxViewProps): React.JSX.Element;
+declare function DetailView({ item, sections, getSignalScore, buildSuggestedActions, buildSourceItems: _buildSourceItems, getTimelineEvents, accountContacts, emailSignature, iconMap, onOpenEntityPanel, onOpenRecentActivity, onSuggestedActionFeedback: _onSuggestedActionFeedback, onScoreFeedback: _onScoreFeedback, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, briefStyleVariant, sectionLayout, renderDetailExtra, renderBeforeScore, renderAfterScore, renderPrimaryAction, renderCommentArea, lastActivityTime, renderTitleExtra, renderTitleActionRow, renderTitleSubtext, renderMetadataExtra, metadataLayout, accountDetailsButtonLabel, getAccountDetailsButtonAriaLabel, onOpenSignalBucket, approveButtonIconUrl, opportunityPreview, onRequestApproval, attentionCount, timelineSystemEventsConfig: configProp, timelineSystemEventsToggleLabel, timelineSystemEventsStorageKey, timelineSystemEventsDefaultVisible, timelineSystemEventsHiddenHint, timelineSystemEventsVisibleHint, }: DetailViewProps): React.JSX.Element;
+declare function PrototypeInboxView({ items, filterCategories, detailSections, accountContacts, buildAccountContacts, emailSignature, buildSuggestedActions: buildSuggestedActionsProp, buildSourceItems: buildSourceItemsProp, getSignalScore: getSignalScoreProp, getTimelineEvents, iconMap, hideToolbarActions, hideHoverActions, onSuggestedActionFeedback, onScoreFeedback, onOpenSignalBucket, headerActions, onOpenEntityPanel, onOpenRecentActivity, onItemSelect, defaultViewMode, buildEntityChips, quickFilterTabs, hideAccountsButton, accountDetailsLabel, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, briefStyleVariant, sectionLayout, renderDetailExtra, renderBeforeScore, renderAfterScore, renderPrimaryAction, renderCommentArea, lastActivityTime, timelineSystemEventsConfig, attentionCount, renderTitleExtra, renderTitleActionRow, renderTitleSubtext, accountDetailsButtonLabel, getAccountDetailsButtonAriaLabel, sortOptions, activeSortId, onSortChange, }: PrototypeInboxViewProps): React.JSX.Element;
 
 export { DetailView, type DetailViewProps, PrototypeInboxView, type PrototypeInboxViewProps };

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

@@ -62,6 +62,7 @@ import {
   SuggestedActions
 } from "../components/suggested-actions.js";
 import { TimelineActivity } from "../components/timeline-activity.js";
+import { cn } from "../lib/utils.js";
 function dotColorClass(statusColor) {
   if (statusColor === "red") return "bg-[#f43f5e]";
   if (statusColor === "yellow" || statusColor === "amber" || statusColor === "orange") return "bg-[#eab308]";
@@ -162,7 +163,10 @@ function TimelineSection({
             {
               type: "button",
               onClick: () => setShowSystemEvents((prev) => !prev),
-              className: "flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground cursor-pointer",
+              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"
+              ),
               "aria-pressed": showSystemEvents,
               "data-testid": "system-events-toggle",
               children: [
@@ -170,7 +174,10 @@ function TimelineSection({
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold min-w-[18px] tabular-nums",
+                    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"
+                    ),
                     "data-testid": "hidden-count-badge",
                     children: hiddenCount
                   }
@@ -181,7 +188,7 @@ function TimelineSection({
         ]
       }
     ),
-    showTimeline && visibleEvents.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(TimelineActivity, { events: visibleEvents }) }),
+    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)) })
   ] });
@@ -206,9 +213,12 @@ function DetailView({
   hideApproveButton,
   signalBriefCopy,
   briefStyleVariant = "default",
+  sectionLayout = "default",
   renderDetailExtra,
   renderBeforeScore,
   renderAfterScore,
+  renderPrimaryAction,
+  renderCommentArea,
   lastActivityTime,
   renderTitleExtra,
   renderTitleActionRow,
@@ -310,6 +320,8 @@ 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 v2WhyText = signalData.signalBrief ? signalData.whyNow || signalData.urgencyExplanation : void 0;
   const metadataChips = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       SignalPriorityPopover,
@@ -366,6 +378,36 @@ function DetailView({
     ] }) }),
     renderMetadataExtra == null ? void 0 : renderMetadataExtra(item)
   ] });
+  const timelineSection = sections.timeline && timelineEvents.length > 0 ? /* @__PURE__ */ jsx(
+    TimelineSection,
+    {
+      timelineEvents,
+      showTimeline,
+      setShowTimeline,
+      showSystemEvents,
+      setShowSystemEvents,
+      attentionCount,
+      sysEvtConfig,
+      lastActivityTime
+    }
+  ) : null;
+  const suggestedActionsSection = 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)
+    }
+  ) }) : null;
   return /* @__PURE__ */ jsx(
     SignalApproval.Root,
     {
@@ -399,7 +441,7 @@ function DetailView({
             ] }),
             renderTitleActionRow ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap items-center gap-2", children: renderTitleActionRow(item) }) : null
           ] }),
-          metadataLayout === "default" ? /* @__PURE__ */ jsx("div", { className: "mb-6 flex flex-wrap items-center gap-2", children: metadataChips }) : null,
+          !isCasePanelV2 && metadataLayout === "default" ? /* @__PURE__ */ jsx("div", { className: "mb-6 flex flex-wrap items-center gap-2", children: metadataChips }) : null,
           sections.signalBrief && (() => {
             var _a2;
             const briefHeading = (_a2 = signalBriefCopy == null ? void 0 : signalBriefCopy.heading) != null ? _a2 : "Signal brief";
@@ -410,52 +452,51 @@ function DetailView({
               briefHeading ? /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3", children: briefHeading }) : null,
               briefIntro && !signalData.signalBrief ? /* @__PURE__ */ jsx("p", { className: isProminent ? "text-sm text-foreground/70 leading-relaxed mb-2" : "text-sm text-muted-foreground leading-relaxed mb-2", children: briefIntro }) : null,
               signalData.signalBrief ? /* @__PURE__ */ jsx("p", { className: isProminent ? "text-base text-foreground leading-relaxed mb-4" : "text-sm text-foreground/90 leading-relaxed mb-4", children: signalData.signalBrief }) : /* @__PURE__ */ jsx("p", { className: isProminent ? "text-base text-foreground leading-relaxed mb-4" : "text-sm text-foreground/90 leading-relaxed mb-4", children: signalData.whyNow }),
-              metadataLayout === "below-brief" ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: metadataChips }) : null,
-              renderBeforeScore == null ? void 0 : renderBeforeScore(item),
-              /* @__PURE__ */ jsx(
-                ScoreWhyChips,
-                {
-                  item,
-                  signalData,
-                  onOpenSignalBucket
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(SignalApproval.Actions, {}) })
+              isCasePanelV2 || metadataLayout === "below-brief" ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: metadataChips }) : null,
+              !isCasePanelV2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                renderBeforeScore == null ? void 0 : renderBeforeScore(item),
+                /* @__PURE__ */ jsx(
+                  ScoreWhyChips,
+                  {
+                    item,
+                    signalData,
+                    onOpenSignalBucket
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(SignalApproval.Actions, {}) })
+              ] }) : null
             ] });
           })(),
-          renderAfterScore == null ? void 0 : renderAfterScore(item),
-          sections.timeline && timelineEvents.length > 0 && /* @__PURE__ */ jsx(
-            TimelineSection,
-            {
-              timelineEvents,
-              showTimeline,
-              setShowTimeline,
-              showSystemEvents,
-              setShowSystemEvents,
-              attentionCount,
-              sysEvtConfig,
-              lastActivityTime
-            }
-          )
+          isCasePanelV2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            sections.signalBrief ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              renderBeforeScore == null ? void 0 : renderBeforeScore(item),
+              v2WhyText ? /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3", children: "The why" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/90 leading-relaxed mb-4", children: v2WhyText })
+              ] }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+                /* @__PURE__ */ jsx(
+                  ScoreWhyChips,
+                  {
+                    item,
+                    signalData,
+                    onOpenSignalBucket
+                  }
+                ),
+                /* @__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),
+            timelineSection
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderAfterScore == null ? void 0 : renderAfterScore(item),
+            timelineSection
+          ] })
         ] }),
-        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)
-          }
-        ) }),
-        renderDetailExtra == null ? void 0 : renderDetailExtra(item)
+        !isCasePanelV2 ? suggestedActionsSection : null,
+        !isCasePanelV2 ? renderDetailExtra == null ? void 0 : renderDetailExtra(item) : null
       ] })
     },
     item.id
@@ -493,9 +534,12 @@ function PrototypeInboxView({
   hideApproveButton,
   signalBriefCopy,
   briefStyleVariant,
+  sectionLayout,
   renderDetailExtra,
   renderBeforeScore,
   renderAfterScore,
+  renderPrimaryAction,
+  renderCommentArea,
   lastActivityTime,
   timelineSystemEventsConfig,
   attentionCount,
@@ -695,9 +739,12 @@ function PrototypeInboxView({
     hideApproveButton,
     signalBriefCopy,
     briefStyleVariant,
+    sectionLayout,
     renderDetailExtra,
     renderBeforeScore,
     renderAfterScore,
+    renderPrimaryAction,
+    renderCommentArea,
     lastActivityTime,
     timelineSystemEventsConfig,
     attentionCount,