@handled-ai/design-system 0.20.5 → 0.20.6

package/src/components/email-preview-card.tsx

@@ -4,14 +4,19 @@ import * as React from "react"
 import { Eye } from "lucide-react"
 
 import { cn } from "../lib/utils"
+import { EmailBody } from "./email-body"
+import { decodeEmailDisplayText, formatAddressList, normalizeEmailSender } from "./email-display-helpers"
 
 export interface EmailPreviewCardProps {
-  from: { name: string; email: string }
-  to?: string
+  from: { name?: string | null; email?: string | null }
+  to?: string | string[] | null
+  cc?: string | string[] | null
+  bcc?: string | string[] | null
   subject?: string
   htmlBody?: string
   textBody?: string
   signatureHtml?: string | null
+  signatureText?: string | null
   className?: string
 }
 
@@ -25,26 +30,43 @@ function getInitials(name: string): string {
     .toUpperCase()
 }
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;")
+function formatRecipientLabel(to?: string | string[] | null): string {
+  const formatted = formatAddressList(to)
+  if (!formatted) return "the recipient's"
+
+  if (Array.isArray(to) && to.length > 1) return "the recipients'"
+  return `${formatted}'s`
+}
+
+function RecipientRow({ label, value }: { label: string; value: string }) {
+  if (!value) return null
+
+  return (
+    <div className="flex items-start gap-2 text-xs text-muted-foreground">
+      <span className="w-8 shrink-0 font-medium text-muted-foreground/70">{label}</span>
+      <span className="min-w-0 flex-1 break-words">{value}</span>
+    </div>
+  )
 }
 
 export function EmailPreviewCard({
   from,
   to,
+  cc,
+  bcc,
   subject,
   htmlBody,
   textBody,
   signatureHtml,
+  signatureText,
   className,
 }: EmailPreviewCardProps) {
-  const recipientLabel = to ? `${to}'s` : "the recipient's"
-  const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : "")
+  const sender = normalizeEmailSender({ name: from.name, email: from.email, fallbackName: from.email ?? "Unknown sender" })
+  const toLabel = formatAddressList(to)
+  const ccLabel = formatAddressList(cc)
+  const bccLabel = formatAddressList(bcc)
+  const recipientLabel = formatRecipientLabel(to)
+  const subjectLabel = subject ? decodeEmailDisplayText(subject) : "(no subject)"
 
   return (
     <div className={cn("p-4 bg-muted/30 min-h-full", className)}>
@@ -58,36 +80,39 @@ export function EmailPreviewCard({
 
       <div className="bg-background border rounded-xl shadow-sm overflow-hidden">
         <div className="px-[18px] pt-4 pb-3 text-base font-semibold border-b border-border/50">
-          {subject || "(no subject)"}
+          {subjectLabel}
         </div>
 
-        <div className="flex items-center gap-3 px-[18px] pt-3">
+        <div className="flex items-start gap-3 px-[18px] pt-3">
           <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-semibold">
-            {getInitials(from.name)}
+            {getInitials(sender.name || sender.email || "?") || "?"}
           </div>
           <div className="min-w-0 flex-1">
             <div className="text-sm">
-              <span className="font-semibold text-foreground">{from.name}</span>{" "}
-              <span className="text-muted-foreground">&lt;{from.email}&gt;</span>
+              <span className="font-semibold text-foreground">{sender.name}</span>{" "}
+              {sender.email ? <span className="text-muted-foreground">&lt;{sender.email}&gt;</span> : null}
             </div>
-            <div className="text-xs text-muted-foreground">
-              {to ? `to ${to}` : "to no recipient yet"}
+            <div className="mt-1 space-y-0.5">
+              <RecipientRow label="To" value={toLabel || "no recipient yet"} />
+              <RecipientRow label="Cc" value={ccLabel} />
+              <RecipientRow label="Bcc" value={bccLabel} />
             </div>
           </div>
-          <div className="text-xs text-muted-foreground shrink-0">just now</div>
+          <div className="text-xs text-muted-foreground shrink-0 pt-0.5">just now</div>
         </div>
 
-        <div
-          className="px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap"
-          dangerouslySetInnerHTML={{ __html: bodyHtml }}
-        />
-
-        {signatureHtml ? (
-          <div
-            className="ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground"
-            dangerouslySetInnerHTML={{ __html: signatureHtml }}
+        <div className="px-[18px] py-3 ml-[47px]">
+          <EmailBody
+            html={htmlBody}
+            text={textBody}
+            detailsHtml={signatureHtml}
+            detailsText={signatureText}
+            variant="preview"
+            collapseDetails={false}
+            defaultDetailsOpen
+            className="text-[13.5px]"
           />
-        ) : null}
+        </div>
       </div>
     </div>
   )

package/src/components/timeline-activity.tsx

@@ -2,24 +2,15 @@
 
 import * as React from "react"
 import { cn } from "../lib/utils"
-import { sanitizeHtml } from "../internal/safe-html"
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
-
-/**
- * Gmail-like reading-pane typography for rendered, sanitized email HTML.
- * Self-contained Tailwind child-variant utilities — no global CSS. Links use
- * Gmail blue; quoted history (`blockquote.gmail_quote`) is de-emphasized with a
- * left rule and muted, slightly smaller text.
- */
-const EMAIL_HTML_CLASS = cn(
-  "text-sm leading-[1.62] text-foreground/90 break-words",
-  "[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
-  "[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline",
-  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
-  "[&_img]:max-w-full [&_img]:h-auto",
-  "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:text-[13px]",
-  "[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]"
-)
+import { EmailBody as SharedEmailBody } from "./email-body"
+import {
+  decodeEmailDisplayText,
+  emailBodySnippet,
+  formatAddressList,
+  formatEmailTimestamp,
+  normalizeEmailSender,
+} from "./email-display-helpers"
 
 export type TimelineActivityVariant = "default" | "case-panel"
 
@@ -320,6 +311,24 @@ function TimelineItem({
 type TimelineEmail = NonNullable<TimelineEvent["email"]>
 type TimelineSource = NonNullable<TimelineEvent["source"]>
 
+function reactNodeToDisplayText(value: React.ReactNode): string {
+  if (typeof value === "string" || typeof value === "number") return decodeEmailDisplayText(String(value))
+  return ""
+}
+
+function getTimelineEmailDisplay(email: TimelineEmail) {
+  const sender = normalizeEmailSender({ name: email.from, email: email.fromEmail })
+  const to = formatAddressList(email.to) || decodeEmailDisplayText(email.to ?? "")
+  const cc = formatAddressList(email.cc) || decodeEmailDisplayText(email.cc ?? "")
+  const bcc = formatAddressList(email.bcc) || decodeEmailDisplayText(email.bcc ?? "")
+  const date = formatEmailTimestamp(email.date) ?? decodeEmailDisplayText(email.date ?? "")
+  const subject = email.subject ? decodeEmailDisplayText(email.subject) : ""
+  const bodyText = reactNodeToDisplayText(email.body)
+  const snippet = emailBodySnippet({ bodyHtml: email.bodyHtml, body: bodyText }, 140)
+
+  return { sender, to, cc, bcc, date, subject, bodyText, snippet }
+}
+
 function EmailMetadata({
   email,
   showAllRecipients,
@@ -329,33 +338,35 @@ function EmailMetadata({
   showAllRecipients: boolean
   setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>
 }) {
+  const display = getTimelineEmailDisplay(email)
+
   return (
     <>
       <div className="flex items-center justify-between gap-4">
         <div className="flex min-w-0 items-baseline gap-1.5">
-          <span className="font-semibold text-foreground text-[13px] whitespace-nowrap">{email.from}</span>
-          {email.fromEmail && (
-            <span className="text-muted-foreground/60 text-xs truncate">{email.fromEmail}</span>
-          )}
+          <span className="font-semibold text-foreground text-[13px] whitespace-nowrap">{display.sender.name}</span>
+          {display.sender.email ? (
+            <span className="text-muted-foreground/60 text-xs truncate">{display.sender.email}</span>
+          ) : null}
         </div>
-        {email.date && (
-          <span className="shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap">{email.date}</span>
-        )}
+        {display.date ? (
+          <span className="shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap">{display.date}</span>
+        ) : null}
       </div>
       <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
         <span className="truncate">
-          To {email.to}
-          {!showAllRecipients && (email.cc || email.bcc) ? (
+          To {display.to || "no recipient yet"}
+          {!showAllRecipients && (display.cc || display.bcc) ? (
             <>, ...</>
           ) : null}
-          {showAllRecipients && email.cc ? (
-            <>, {email.cc}</>
+          {showAllRecipients && display.cc ? (
+            <>, <span className="text-muted-foreground/40">cc</span> {display.cc}</>
           ) : null}
-          {showAllRecipients && email.bcc ? (
-            <> <span className="text-muted-foreground/40">bcc</span> {email.bcc}</>
+          {showAllRecipients && display.bcc ? (
+            <> <span className="text-muted-foreground/40">bcc</span> {display.bcc}</>
           ) : null}
         </span>
-        {(email.cc || email.bcc) && (
+        {(display.cc || display.bcc) ? (
           <button
             type="button"
             onClick={(e) => {
@@ -366,30 +377,36 @@ function EmailMetadata({
           >
             <ChevronDown className={cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180")} />
           </button>
-        )}
+        ) : null}
       </div>
     </>
   )
 }
 
-function EmailBody({ email }: { email: TimelineEmail }) {
-  if (email.bodyHtml) {
-    return (
-      // Gmail reading-pane typography; quoted history
-      // (blockquote.gmail_quote) is de-emphasized with a left rule.
-      <div
-        data-slot="timeline-email-html"
-        className={EMAIL_HTML_CLASS}
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(email.bodyHtml) }}
-      />
-    )
+function TimelineEmailBody({ email }: { email: TimelineEmail }) {
+  const display = getTimelineEmailDisplay(email)
+  const bodyFallback = display.bodyText || (typeof email.body === "string" ? email.body : "")
+
+  if (!email.bodyHtml && !bodyFallback && email.body) {
+    return <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">{email.body}</div>
   }
 
-  return (
-    <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
-      {email.body}
-    </div>
+  const body = (
+    <SharedEmailBody
+      html={email.bodyHtml}
+      text={bodyFallback}
+      variant="history"
+      collapseDetails={true}
+      className="text-sm leading-relaxed"
+    />
   )
+
+  return email.bodyHtml ? <div data-slot="timeline-email-html">{body}</div> : body
+}
+
+function renderDecodedPreview(preview?: React.ReactNode): React.ReactNode {
+  if (typeof preview === "string" || typeof preview === "number") return decodeEmailDisplayText(String(preview))
+  return preview
 }
 
 function CollapsedEmailPreview({
@@ -405,18 +422,21 @@ function CollapsedEmailPreview({
   actionClassName: string
   onClick?: () => void
 }) {
+  const display = email ? getTimelineEmailDisplay(email) : null
+  const previewContent = display?.snippet || renderDecodedPreview(preview)
+
   return (
     <div className={className} onClick={onClick}>
       <span className="line-clamp-1 pr-3 text-[13px]">
-        <span className="text-muted-foreground">{email?.from}</span>
+        <span className="text-muted-foreground">{display?.sender.name}</span>
         <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
-        {email?.subject ? (
+        {display?.subject ? (
           <>
-            <span className="text-muted-foreground">{email.subject}</span>
+            <span className="text-muted-foreground">{display.subject}</span>
             <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
           </>
         ) : null}
-        <span className="text-muted-foreground">{preview}</span>
+        <span className="text-muted-foreground">{previewContent}</span>
       </span>
       <button type="button" className={actionClassName}>
         Expand <ChevronDown className="h-3 w-3" />
@@ -513,7 +533,7 @@ function EmailCard({
                 />
               </div>
 
-              <EmailBody email={event.email} />
+              <TimelineEmailBody email={event.email} />
 
               <ShowLessButton
                 onClick={(e) => {
@@ -549,7 +569,7 @@ function EmailCard({
           </div>
 
           <div className={classes.cardBody} data-slot="timeline-card-body">
-            <EmailBody email={event.email} />
+            <TimelineEmailBody email={event.email} />
           </div>
 
           <div className={cn(classes.cardFooter, classes.actionLinkRow)} data-slot="timeline-card-footer">

package/src/index.ts

@@ -21,7 +21,9 @@ export * from "./components/badge"
 export * from "./components/button"
 export * from "./components/card"
 export * from "./components/case-panel-email-composer"
+export * from "./components/email-body"
 export * from "./components/email-composer-row"
+export * from "./components/email-display-helpers"
 export * from "./components/email-preview-card"
 export * from "./components/email-recipient-field"
 export * from "./components/email-send-bar"

package/src/internal/__tests__/safe-html.test.ts

@@ -10,6 +10,12 @@ describe("sanitizeHtml", () => {
     expect(html).toBe('<p>Hi<a>bad</a><img></p>')
   })
 
+  it("removes svg, math, and other active embedded content", () => {
+    const html = sanitizeHtml('<p>Safe</p><svg><a href="https://evil.test">svg link</a></svg><math><mi>x</mi></math><object data="https://evil.test/x"></object>')
+
+    expect(html).toBe("<p>Safe</p>")
+  })
+
   it("rejects entity-obfuscated unsafe protocols", () => {
     const html = sanitizeHtml('<a href="jav&#x61;script&colon;alert(1)">bad</a><a href="java&amp;#x73;cript:alert(1)">also bad</a>')
 
@@ -35,14 +41,40 @@ describe("sanitizeHtml", () => {
 
   it("keeps common email formatting, safe links, and gmail_quote classes", () => {
     const html = sanitizeHtml(
-      '<blockquote class="gmail_quote weird$class" style="color:red"><a href="https://example.com" target="_self">Quoted</a><br><ul><li>One</li></ul></blockquote>',
+      '<blockquote class="gmail_quote weird$class"><a href="https://example.com" target="_self">Quoted</a><br><ul><li>One</li></ul></blockquote>',
     )
 
     expect(html).toContain('class="gmail_quote"')
     expect(html).toContain('href="https://example.com"')
     expect(html).toContain('rel="noopener noreferrer"')
     expect(html).toContain("<ul><li>One</li></ul>")
-    expect(html).not.toContain("style=")
+  })
+
+  it("preserves high-fidelity safe email signature markup", () => {
+    const html = sanitizeHtml(
+      '<div dir="ltr" lang="en-US" class="gmail_signature sig$v"><table><tbody><tr><td><img src="https://example.com/logo.png" width="120" height="48" alt="Acme & Co" onerror="alert(1)"></td><td><sup>TM</sup><sub>LLC</sub><span style="vertical-align: super; font-size: 10px; color: red; background-image: url(https://evil.test/x)">1</span></td></tr></tbody></table></div>',
+    )
+
+    expect(html).toContain('dir="ltr"')
+    expect(html).toContain('lang="en-US"')
+    expect(html).toContain('class="gmail_signature"')
+    expect(html).toContain('<table><tbody><tr><td><img src="https://example.com/logo.png" width="120" height="48" alt="Acme &amp; Co"></td>')
+    expect(html).toContain('<sup>TM</sup><sub>LLC</sub>')
+    expect(html).toContain('style="vertical-align: super; font-size: 10px"')
+    expect(html).not.toContain("onerror")
+    expect(html).not.toContain("color: red")
+    expect(html).not.toContain("background-image")
+  })
+
+  it("bounds image dimensions and inline font-size while preserving subscript alignment", () => {
+    const html = sanitizeHtml(
+      '<span style="vertical-align: sub; font-size: 500px">H2O</span><img src="https://example.com/x.png" width="99999" height="64" alt="x">',
+    )
+
+    expect(html).toContain('style="vertical-align: sub"')
+    expect(html).not.toContain("500px")
+    expect(html).toContain('height="64"')
+    expect(html).not.toContain('width="99999"')
   })
 })
 

package/src/internal/safe-html.ts

@@ -31,6 +31,8 @@ const ALLOWED_TAGS = new Set([
   "s",
   "span",
   "strong",
+  "sub",
+  "sup",
   "table",
   "tbody",
   "td",
@@ -42,7 +44,7 @@ const ALLOWED_TAGS = new Set([
 ])
 
 const VOID_TAGS = new Set(["br", "hr", "img"])
-const SAFE_GLOBAL_ATTRS = new Set(["aria-label", "role", "title"])
+const SAFE_GLOBAL_ATTRS = new Set(["aria-label", "dir", "lang", "role", "title"])
 const SAFE_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "tel:"])
 
 function escapeHtml(value: string): string {
@@ -116,12 +118,65 @@ function sanitizeClassName(value: string): string | null {
   return safeTokens.length ? safeTokens.join(" ") : null
 }
 
+function sanitizeDimension(value: string): string | null {
+  const trimmed = value.trim()
+  if (/^\d{1,4}$/.test(trimmed)) return trimmed
+  return null
+}
+
+function sanitizeLanguage(value: string): string | null {
+  const trimmed = value.trim()
+  if (/^[A-Za-z]{1,8}(?:-[A-Za-z0-9]{1,8})*$/.test(trimmed)) return trimmed
+  return null
+}
+
+function sanitizeDirection(value: string): string | null {
+  const trimmed = value.trim().toLowerCase()
+  return trimmed === "ltr" || trimmed === "rtl" || trimmed === "auto" ? trimmed : null
+}
+
+function sanitizeFontSize(value: string): string | null {
+  const trimmed = value.trim().toLowerCase()
+  const match = trimmed.match(/^(\d+(?:\.\d+)?)(px|em|rem|%)$/)
+  if (!match) return null
+
+  const amount = Number.parseFloat(match[1])
+  const unit = match[2]
+  const maxByUnit: Record<string, number> = { px: 72, em: 4, rem: 4, "%": 400 }
+  if (!Number.isFinite(amount) || amount <= 0 || amount > maxByUnit[unit]) return null
+  return `${amount}${unit}`
+}
+
+function sanitizeStyle(value: string): string | null {
+  const declarations: string[] = []
+
+  for (const rawDeclaration of value.split(";")) {
+    const separatorIndex = rawDeclaration.indexOf(":")
+    if (separatorIndex === -1) continue
+
+    const property = rawDeclaration.slice(0, separatorIndex).trim().toLowerCase()
+    const rawValue = decodeHtmlEntities(rawDeclaration.slice(separatorIndex + 1)).trim().toLowerCase()
+    if (!property || !rawValue || /url\s*\(|expression\s*\(/i.test(rawValue)) continue
+
+    if (property === "vertical-align" && (rawValue === "super" || rawValue === "sub")) {
+      declarations.push(`vertical-align: ${rawValue}`)
+      continue
+    }
+
+    if (property === "font-size") {
+      const fontSize = sanitizeFontSize(rawValue)
+      if (fontSize) declarations.push(`font-size: ${fontSize}`)
+    }
+  }
+
+  return declarations.length ? declarations.join("; ") : null
+}
+
 function sanitizeAttribute(tagName: string, name: string, value: string): string | null {
   const attr = name.toLowerCase()
 
   if (
     attr.startsWith("on") ||
-    attr === "style" ||
     attr === "srcdoc" ||
     attr === "formaction" ||
     attr === "xlink:href" ||
@@ -130,11 +185,26 @@ function sanitizeAttribute(tagName: string, name: string, value: string): string
     return null
   }
 
+  if (attr === "style") {
+    const safeStyle = sanitizeStyle(value)
+    return safeStyle ? `style="${escapeAttribute(safeStyle)}"` : null
+  }
+
   if (attr === "class") {
     const safeClassName = sanitizeClassName(value)
     return safeClassName ? `class="${escapeAttribute(safeClassName)}"` : null
   }
 
+  if (attr === "dir") {
+    const safeDirection = sanitizeDirection(value)
+    return safeDirection ? `dir="${escapeAttribute(safeDirection)}"` : null
+  }
+
+  if (attr === "lang") {
+    const safeLanguage = sanitizeLanguage(value)
+    return safeLanguage ? `lang="${escapeAttribute(safeLanguage)}"` : null
+  }
+
   if (SAFE_GLOBAL_ATTRS.has(attr) || attr.startsWith("aria-")) {
     return `${attr}="${escapeAttribute(value)}"`
   }
@@ -147,10 +217,15 @@ function sanitizeAttribute(tagName: string, name: string, value: string): string
     return `src="${escapeAttribute(value)}"`
   }
 
-  if (tagName === "img" && (attr === "alt" || attr === "width" || attr === "height")) {
+  if (tagName === "img" && attr === "alt") {
     return `${attr}="${escapeAttribute(value)}"`
   }
 
+  if (tagName === "img" && (attr === "width" || attr === "height")) {
+    const safeDimension = sanitizeDimension(value)
+    return safeDimension ? `${attr}="${escapeAttribute(safeDimension)}"` : null
+  }
+
   if ((tagName === "td" || tagName === "th") && (attr === "colspan" || attr === "rowspan")) {
     return `${attr}="${escapeAttribute(value)}"`
   }
@@ -219,7 +294,7 @@ function findDangerousClose(html: string, tagName: string, fromIndex: number): n
 /**
  * Conservative, deterministic sanitizer for user/email supplied HTML rendered by
  * design-system components. It keeps common email formatting tags while removing
- * executable tags, event handlers, inline styles, and unsafe URLs. This stays
+ * executable tags, event handlers, unsafe inline styles, and unsafe URLs. This stays
  * dependency-free for the shared package and intentionally favors stripping
  * ambiguous email content over preserving every possible HTML feature.
  */