@handled-ai/design-system 0.20.16 → 0.20.17

package/src/components/rich-text-toolbar.tsx

@@ -13,8 +13,16 @@ type RichTextAction =
   | "align" | "list"
   | "delete"
 
+interface RichTextFontOption {
+  label: string
+  value: string
+}
+
 interface RichTextToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
   onAction?: (action: RichTextAction) => void
+  fontOptions?: RichTextFontOption[]
+  selectedFontFamily?: string
+  onFontFamilyChange?: (fontFamily: string) => void
 }
 
 function ToolbarButton({
@@ -43,7 +51,32 @@ function ToolbarButton({
   )
 }
 
-function RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps) {
+function RichTextToolbar({
+  onAction,
+  className,
+  fontOptions,
+  selectedFontFamily,
+  onFontFamilyChange,
+  ...rest
+}: RichTextToolbarProps) {
+  const [fontMenuOpen, setFontMenuOpen] = React.useState(false)
+  const fontMenuRef = React.useRef<HTMLDivElement | null>(null)
+  const selectedFontOption = fontOptions?.find((option) => option.value === selectedFontFamily) ?? fontOptions?.[0]
+  const fontLabel = selectedFontOption?.label ?? "Sans Serif"
+  const hasFontMenu = Boolean(fontOptions?.length && onFontFamilyChange)
+
+  React.useEffect(() => {
+    if (!fontMenuOpen) return
+
+    function handleDocumentMouseDown(event: MouseEvent) {
+      if (fontMenuRef.current?.contains(event.target as Node)) return
+      setFontMenuOpen(false)
+    }
+
+    document.addEventListener("mousedown", handleDocumentMouseDown)
+    return () => document.removeEventListener("mousedown", handleDocumentMouseDown)
+  }, [fontMenuOpen])
+
   return (
     <div
       data-slot="rich-text-toolbar"
@@ -58,17 +91,48 @@ function RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps)
 
         <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
 
-        <button
-          type="button"
-          data-slot="rich-text-toolbar-button"
-          onClick={() => onAction?.("font")}
-          aria-label="Font family"
-          aria-haspopup="true"
-          className="text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1"
-        >
-          Sans Serif
-          <ChevronDown size={10} />
-        </button>
+        <div className="relative" ref={fontMenuRef}>
+          <button
+            type="button"
+            data-slot="rich-text-toolbar-button"
+            onClick={() => {
+              onAction?.("font")
+              if (hasFontMenu) setFontMenuOpen((open) => !open)
+            }}
+            aria-label="Font family"
+            aria-haspopup="menu"
+            aria-expanded={hasFontMenu ? fontMenuOpen : undefined}
+            className="text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1"
+          >
+            {fontLabel}
+            <ChevronDown size={10} />
+          </button>
+
+          {hasFontMenu && fontMenuOpen ? (
+            <div
+              role="menu"
+              aria-label="Font family"
+              className="absolute left-0 bottom-full z-50 mb-1 min-w-32 overflow-hidden rounded-md border border-border bg-background py-1 shadow-md"
+            >
+              {fontOptions!.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={option.value === selectedFontFamily}
+                  className="block w-full px-2.5 py-1.5 text-left text-xs text-foreground hover:bg-muted/60"
+                  style={{ fontFamily: option.value }}
+                  onClick={() => {
+                    onFontFamilyChange?.(option.value)
+                    setFontMenuOpen(false)
+                  }}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
 
         <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
 
@@ -87,4 +151,4 @@ function RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps)
   )
 }
 
-export { RichTextToolbar, type RichTextToolbarProps, type RichTextAction }
+export { RichTextToolbar, type RichTextToolbarProps, type RichTextAction, type RichTextFontOption }

package/src/prototype/__tests__/detail-view-case-panel-v2.test.tsx

@@ -152,24 +152,6 @@ describe("DetailView case-panel-v2 section layout", () => {
     )
   })
 
-  it("adds a consistent stack around the case-panel workflow sections", () => {
-    const { container } = renderDetailView({
-      sectionLayout: "case-panel-v2",
-      renderPrimaryAction: () => <section>Primary action marker</section>,
-      renderCommentArea: () => <section>Comment area marker</section>,
-    })
-
-    const stack = container.querySelector('[data-slot="case-panel-workflow-stack"]')
-    const commentArea = container.querySelector('[data-slot="case-panel-comment-area"]')
-    expect(stack?.className).toContain("space-y-10")
-    expect(commentArea).not.toBeNull()
-    expectInDocumentOrder(
-      screen.getByText("Primary action marker"),
-      screen.getByText("Comment area marker"),
-      screen.getByText(/activity timeline/i),
-    )
-  })
-
   it("renders signal brief and chip-backed Why section without a separate The why block", () => {
     renderDetailView({ sectionLayout: "case-panel-v2" })
 

package/src/prototype/__tests__/detail-view-timeline-system-events.test.tsx

@@ -142,58 +142,6 @@ describe("DetailView timeline system-events toggle", () => {
     expect(container.textContent).not.toContain("Score updated -1")
   })
 
-  it("keeps case-panel system events off by default even when localStorage has a stale visible value", async () => {
-    store["test-show-score-changes"] = "true"
-    const { container } = render(<DetailView {...baseProps({ sectionLayout: "case-panel-v2" })} />)
-    expandTimeline(container)
-
-    const toggle = container.querySelector('[data-testid="system-events-toggle"]') as HTMLElement
-    const eventCount = container.querySelector('[data-testid="event-count"]')
-    expect(toggle).toHaveAttribute("aria-pressed", "false")
-    expect(eventCount?.textContent).toBe("2 events")
-    expect(container.textContent).not.toContain("Score updated +3")
-    expect(localStorageMock.setItem).not.toHaveBeenCalledWith("test-show-score-changes", "false")
-  })
-
-  it("resets case-panel system events to the default when the selected item changes", () => {
-    const { container, rerender } = render(
-      <DetailView {...baseProps({ sectionLayout: "case-panel-v2" })} />,
-    )
-    expandTimeline(container)
-    let toggle = container.querySelector('[data-testid="system-events-toggle"]') as HTMLElement
-
-    fireEvent.click(toggle)
-    expect(toggle).toHaveAttribute("aria-pressed", "true")
-    expect(container.textContent).toContain("Score updated +3")
-
-    rerender(
-      <DetailView
-        {...baseProps({
-          sectionLayout: "case-panel-v2",
-          item: { ...baseItem, id: "2", title: "Second Signal" },
-        })}
-      />,
-    )
-    expandTimeline(container)
-    toggle = container.querySelector('[data-testid="system-events-toggle"]') as HTMLElement
-
-    expect(toggle).toHaveAttribute("aria-pressed", "false")
-    expect(container.textContent).not.toContain("Score updated +3")
-    expect(localStorageMock.setItem).not.toHaveBeenCalledWith("test-show-score-changes", "true")
-  })
-
-  it("uses a shorter, quieter system-events control in the case-panel variant", () => {
-    const { container } = render(<DetailView {...baseProps({ sectionLayout: "case-panel-v2" })} />)
-    const toggle = container.querySelector('[data-testid="system-events-toggle"]') as HTMLElement
-    const indicator = container.querySelector('[data-testid="system-events-indicator"]') as HTMLElement
-    const count = container.querySelector('[data-testid="hidden-count-badge"]') as HTMLElement
-
-    expect(toggle.className).toContain("py-1")
-    expect(toggle.className).toContain("text-xs")
-    expect(indicator.className).toContain("h-3.5")
-    expect(count.className).toContain("text-[11px]")
-  })
-
   it("reveals system-noise events when toggle is clicked", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)

package/src/prototype/prototype-inbox-view.tsx

@@ -309,12 +309,9 @@ function TimelineSection({
               type="button"
               onClick={() => setShowSystemEvents((prev) => !prev)}
               className={cn(
-                "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",
+                "inline-flex shrink-0 cursor-pointer items-center gap-3 rounded-full border px-3.5 py-2 text-sm font-semibold transition-colors",
                 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-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"
               )}
               aria-pressed={showSystemEvents}
@@ -324,25 +321,23 @@ function TimelineSection({
             >
               <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"
+                  "relative inline-flex h-4 w-8 shrink-0 items-center rounded-full p-0.5 transition-colors",
+                  showSystemEvents ? "bg-teal-600" : "bg-muted-foreground/30"
                 )}
                 aria-hidden="true"
                 data-testid="system-events-indicator"
               >
                 <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"
+                    "block h-3 w-3 rounded-full bg-white shadow-sm transition-transform",
+                    showSystemEvents ? "translate-x-4" : "translate-x-0"
                   )}
                 />
               </span>
               <span>{toggleLabel}</span>
               {!showSystemEvents ? (
                 <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")}
+                  className="inline-flex min-w-[22px] items-center justify-center rounded-full bg-muted px-1.5 text-xs font-bold tabular-nums text-muted-foreground"
                   data-testid="hidden-count-badge"
                 >
                   {hiddenCount}
@@ -455,8 +450,6 @@ export function DetailView({
     timelineSystemEventsVisibleHint,
   ])
 
-  const isCasePanelV2 = sectionLayout === "case-panel-v2"
-
   const [showTimeline, setShowTimeline] = React.useState(false)
   const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])
 
@@ -466,17 +459,9 @@ export function DetailView({
   const [showSystemEvents, setShowSystemEvents] = React.useState(sysEvtDefaultVisible)
   const initialReadDoneRef = React.useRef(false)
 
-  // Read persisted value from localStorage on mount. Case-panel timelines always
-  // start from the configured default so stale local state cannot make system
-  // events prominent by default in the inbox detail panel.
+  // Read persisted value from localStorage on mount
   React.useEffect(() => {
-    if (isCasePanelV2) {
-      setShowSystemEvents(sysEvtDefaultVisible)
-      initialReadDoneRef.current = true
-      return
-    }
     if (!sysEvtStorageKey) {
-      setShowSystemEvents(sysEvtDefaultVisible)
       initialReadDoneRef.current = true
       return
     }
@@ -484,27 +469,23 @@ export function DetailView({
       const stored = localStorage.getItem(sysEvtStorageKey)
       if (stored !== null) {
         setShowSystemEvents(stored === "true")
-      } else {
-        setShowSystemEvents(sysEvtDefaultVisible)
       }
     } catch {
       // localStorage unavailable — ignore
-      setShowSystemEvents(sysEvtDefaultVisible)
     }
     initialReadDoneRef.current = true
-  }, [isCasePanelV2, item.id, sysEvtDefaultVisible, sysEvtStorageKey])
+  }, [sysEvtStorageKey])
 
-  // Write to localStorage when the toggle changes (skip case-panel timelines so
-  // they stay off by default on the next case/session).
+  // Write to localStorage when the toggle changes (skip initial if matching default)
   React.useEffect(() => {
-    if (!sysEvtStorageKey || isCasePanelV2) return
+    if (!sysEvtStorageKey) return
     if (!initialReadDoneRef.current) return
     try {
       localStorage.setItem(sysEvtStorageKey, String(showSystemEvents))
     } catch {
       // localStorage unavailable — ignore
     }
-  }, [isCasePanelV2, showSystemEvents, sysEvtStorageKey])
+  }, [showSystemEvents, sysEvtStorageKey])
 
   React.useEffect(() => {
     setShowTimeline(false)
@@ -547,6 +528,8 @@ export function DetailView({
         ? "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-50"
         : "hover:bg-muted/50"
 
+  const isCasePanelV2 = sectionLayout === "case-panel-v2"
+
   // The metadata chips row (priority · deadline · account · renderMetadataExtra). Rendered above
   // the brief by default, or beneath it when `metadataLayout === "below-brief"` (case-panel redesign).
   const metadataChips = (
@@ -779,16 +762,10 @@ export function DetailView({
                 </>
               ) : null}
 
-              <div data-slot="case-panel-workflow-stack" className="space-y-10">
-                {/* After-score content slot (e.g. OpportunityPanel) */}
-                {renderAfterScore?.(item)}
-                {renderPrimaryAction?.(item)}
-                {renderCommentArea ? (
-                  <div data-slot="case-panel-comment-area">
-                    {renderCommentArea(item)}
-                  </div>
-                ) : null}
-              </div>
+              {/* After-score content slot (e.g. OpportunityPanel) */}
+              {renderAfterScore?.(item)}
+              {renderPrimaryAction?.(item)}
+              {renderCommentArea?.(item)}
               {timelineSection}
             </>
           ) : (