@handled-ai/design-system 0.9.28 → 0.11.0

package/src/components/suggested-actions.tsx

@@ -18,7 +18,6 @@ import {
   ThumbsUp,
   ThumbsDown,
   Check,
-  RefreshCw,
   ArrowLeft,
   Mail,
   Phone,
@@ -31,21 +30,8 @@ import {
   Globe,
 } from "lucide-react"
 import { Button } from "./button"
-
-// ---------------------------------------------------------------------------
-// Brand Icons (image-based from registry)
-// ---------------------------------------------------------------------------
-
-function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {
-  return (
-    <img
-      src={src}
-      alt={alt}
-      className={`${className ?? ""} object-contain`}
-      draggable={false}
-    />
-  )
-}
+import { DraftFeedbackInline } from "./draft-feedback-inline"
+import { AccountContactsPopover, BrandIcon } from "./account-contacts-popover"
 
 export interface SuggestedActionsIconMap {
   gmail?: string
@@ -248,186 +234,6 @@ function AiEditPanel({ onApply }: { onApply?: (pills: string[], description: str
   )
 }
 
-// ---------------------------------------------------------------------------
-// DraftFeedbackInline
-// ---------------------------------------------------------------------------
-
-const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"]
-const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"]
-
-function DraftFeedbackInline({
-  onRegenerateRequest,
-  onSubmitFeedback,
-  onDiscardRequest,
-}: {
-  onRegenerateRequest?: (pills: string[], detail: string) => void
-  onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
-  onDiscardRequest?: (pills: string[], detail: string) => void
-}) {
-  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(null)
-  const [selectedPills, setSelectedPills] = React.useState<string[]>([])
-  const [detailText, setDetailText] = React.useState("")
-  const [noted, setNoted] = React.useState(false)
-  const [regenerated, setRegenerated] = React.useState(false)
-
-  const togglePill = React.useCallback((pill: string) => {
-    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))
-  }, [])
-
-  const handleSubmit = React.useCallback(() => {
-    if (!thumbState) return
-    onSubmitFeedback?.(thumbState, selectedPills, detailText)
-    setNoted(true)
-    setTimeout(() => {
-      setThumbState(null)
-      setSelectedPills([])
-      setDetailText("")
-      setNoted(false)
-    }, 3000)
-  }, [thumbState, selectedPills, detailText, onSubmitFeedback])
-
-  const handleRegenerate = React.useCallback(() => {
-    if (!thumbState) return
-    onRegenerateRequest?.(selectedPills, detailText)
-    setRegenerated(true)
-    setTimeout(() => {
-      setThumbState(null)
-      setSelectedPills([])
-      setDetailText("")
-      setRegenerated(false)
-    }, 3000)
-  }, [thumbState, selectedPills, detailText, onRegenerateRequest])
-
-  const handleDiscard = React.useCallback(() => {
-    if (!thumbState) return
-    onDiscardRequest?.(selectedPills, detailText)
-  }, [thumbState, selectedPills, detailText, onDiscardRequest])
-
-  if (noted) {
-    return (
-      <div className="flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200">
-        <Check className="w-3.5 h-3.5 text-emerald-500" />
-        <span className="text-xs text-muted-foreground">Feedback recorded</span>
-      </div>
-    )
-  }
-
-  if (regenerated) {
-    return (
-      <div className="py-2 animate-in fade-in slide-in-from-top-1 duration-200">
-        <div className="flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800">
-          <RefreshCw className="w-3 h-3 text-indigo-500 animate-spin" />
-          <span className="text-xs font-medium text-indigo-600 dark:text-indigo-400">Regenerating draft...</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-0">
-      <div className="flex items-center justify-between">
-        <span className="text-sm text-foreground font-medium">How&apos;s this draft?</span>
-        <div className="flex gap-1">
-          <button
-            onClick={() => {
-              setThumbState(thumbState === "up" ? null : "up")
-              setSelectedPills([])
-              setDetailText("")
-            }}
-            className={`p-1.5 rounded transition-colors ${
-              thumbState === "up"
-                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
-                : "hover:bg-muted text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            <ThumbsUp className="w-4 h-4" fill={thumbState === "up" ? "currentColor" : "none"} />
-          </button>
-          <button
-            onClick={() => {
-              setThumbState(thumbState === "down" ? null : "down")
-              setSelectedPills([])
-              setDetailText("")
-            }}
-            className={`p-1.5 rounded transition-colors ${
-              thumbState === "down"
-                ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
-                : "hover:bg-muted text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            <ThumbsDown className="w-4 h-4" fill={thumbState === "down" ? "currentColor" : "none"} />
-          </button>
-        </div>
-      </div>
-
-      {thumbState && (
-        <div className="pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200">
-          <div>
-            <span className="text-xs text-muted-foreground mb-2 block font-medium">
-              {thumbState === "up" ? "What worked well?" : "What needs improvement?"}
-            </span>
-            <div className="flex flex-wrap gap-1.5">
-              {(thumbState === "up" ? positivePills : negativePills).map((pill) => (
-                <button
-                  key={pill}
-                  onClick={() => togglePill(pill)}
-                  className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${
-                    selectedPills.includes(pill)
-                      ? thumbState === "up"
-                        ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
-                        : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800"
-                      : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
-                  }`}
-                >
-                  {pill}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <textarea
-            value={detailText}
-            onChange={(e) => setDetailText(e.target.value)}
-            placeholder={thumbState === "up" ? "Add specific praise (optional)..." : "Provide specific instructions (optional)..."}
-            className="w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
-          />
-
-          <div className="flex items-center gap-2 pt-1">
-            {thumbState === "down" ? (
-              <>
-                <button
-                  onClick={handleRegenerate}
-                  disabled={selectedPills.length === 0 && detailText.length === 0}
-                  className={`flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${
-                    selectedPills.length > 0 || detailText.length > 0
-                      ? "bg-foreground text-background hover:bg-foreground/90"
-                      : "bg-muted text-muted-foreground cursor-not-allowed"
-                  }`}
-                >
-                  <RefreshCw className="w-3 h-3" />
-                  Regenerate draft
-                </button>
-                <button
-                  onClick={handleDiscard}
-                  className="flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5"
-                >
-                  Discard draft
-                </button>
-              </>
-            ) : (
-              <button
-                onClick={handleSubmit}
-                className="flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent"
-              >
-                Submit feedback
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // EditorToolbar
 // ---------------------------------------------------------------------------
@@ -696,173 +502,6 @@ function ContactCard({
   )
 }
 
-// ---------------------------------------------------------------------------
-// AccountContactsPopover
-// ---------------------------------------------------------------------------
-
-function AccountContactsPopover({
-  contacts,
-  onSelect,
-  onSelectTo,
-  onSelectCc,
-  onSelectBcc,
-  onViewAll,
-  onOpenRecentActivity,
-  trigger,
-  iconMap,
-}: {
-  contacts: SuggestedContact[]
-  onSelect: (contact: SuggestedContact) => void
-  onSelectTo?: (contact: SuggestedContact) => void
-  onSelectCc?: (contact: SuggestedContact) => void
-  onSelectBcc?: (contact: SuggestedContact) => void
-  onViewAll?: () => void
-  onOpenRecentActivity?: () => void
-  trigger: React.ReactNode
-  iconMap?: SuggestedActionsIconMap
-}) {
-  const [open, setOpen] = React.useState(false)
-  const triggerRef = React.useRef<HTMLDivElement>(null)
-  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})
-
-  React.useEffect(() => {
-    if (open && triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect()
-      const popoverWidth = Math.min(448, window.innerWidth - 32)
-      let left = rect.right - popoverWidth
-      if (left < 16) left = 16
-      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth
-      setPopoverStyle({ position: "fixed", top: rect.bottom + 4, left })
-    }
-  }, [open])
-
-  return (
-    <div>
-      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>
-      {open && (
-        <>
-          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div style={popoverStyle} className="fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150">
-            <div className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide">
-              Account Contacts
-            </div>
-            <div className="max-h-48 overflow-y-auto">
-              {contacts.map((c, i) => (
-                <div
-                  key={i}
-                  role="button"
-                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}
-                  className="flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer"
-                >
-                  <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0">
-                    {c.name.split(" ").map((n) => n[0]).join("")}
-                  </div>
-                  <div className="flex-1 min-w-0 overflow-hidden">
-                    <div className="truncate text-sm font-medium text-foreground">{c.name}</div>
-                    <div className="truncate text-xs text-muted-foreground leading-tight">
-                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? ""}
-                    </div>
-                    {c.lastActivity && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          onOpenRecentActivity?.()
-                          setOpen(false)
-                        }}
-                        className="mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
-                      >
-                        <Clock className="w-3 h-3 shrink-0" />
-                        <span className="shrink-0 font-medium">Last activity</span>
-                        <span className="shrink-0 text-muted-foreground/60">·</span>
-                        <span className="shrink-0">{c.lastActivity.date}</span>
-                        <span className="shrink-0 text-muted-foreground/60">·</span>
-                        <span className="truncate capitalize">{c.lastActivity.type}</span>
-                      </button>
-                    )}
-                  </div>
-                  <div className="ml-2 flex items-center gap-1.5 shrink-0">
-                    {onSelectTo && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          onSelectTo(c)
-                          setOpen(false)
-                        }}
-                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
-                      >
-                        To
-                      </button>
-                    )}
-                    {onSelectCc && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          onSelectCc(c)
-                          setOpen(false)
-                        }}
-                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
-                      >
-                        Cc
-                      </button>
-                    )}
-                    {onSelectBcc && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          onSelectBcc(c)
-                          setOpen(false)
-                        }}
-                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
-                      >
-                        Bcc
-                      </button>
-                    )}
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        if (c.salesforceUrl) {
-                          window.open(c.salesforceUrl, "_blank", "noopener,noreferrer")
-                        } else {
-                          onViewAll?.()
-                        }
-                      }}
-                      className="h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0"
-                      aria-label={`Open ${c.name} in Salesforce`}
-                    >
-                      {iconMap?.salesforce ? (
-                        <BrandIcon src={iconMap.salesforce} alt="Salesforce" className="w-3.5 h-3.5" />
-                      ) : (
-                        <ExternalLink className="w-3.5 h-3.5 text-muted-foreground" />
-                      )}
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-            {onViewAll && (
-              <>
-                <div className="h-px bg-border mx-3 my-1" />
-                <button
-                  onClick={() => { onViewAll(); setOpen(false) }}
-                  className="flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
-                >
-                  <ExternalLink className="w-3 h-3" />
-                  View all contacts
-                </button>
-              </>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // EmailHeader (Notion Mail style)
 // ---------------------------------------------------------------------------

package/src/components/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/variable-autocomplete.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface VariableDef {
+  name: string
+  description?: string
+  source?: string
+}
+
+interface VariableGroup {
+  label: string
+  variables: VariableDef[]
+}
+
+interface VariableAutocompleteProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  groups: VariableGroup[]
+  filter?: string
+  onSelect: (variable: VariableDef) => void
+  onClose: () => void
+  maxResults?: number
+}
+
+function VariableAutocomplete({
+  groups,
+  filter = "",
+  onSelect,
+  onClose,
+  maxResults = 10,
+  className,
+  ...rest
+}: VariableAutocompleteProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [activeIndex, setActiveIndex] = React.useState(-1)
+
+  // Build filtered results preserving group structure
+  const filteredGroups = React.useMemo(
+    () =>
+      groups
+        .map((group) => ({
+          ...group,
+          variables: group.variables.filter((v) =>
+            v.name.toLowerCase().startsWith(filter.toLowerCase())
+          ),
+        }))
+        .filter((group) => group.variables.length > 0),
+    [groups, filter]
+  )
+
+  // Flatten for indexing / keyboard navigation, respecting maxResults
+  const allFiltered = React.useMemo(() => {
+    const result: { group: VariableGroup; variable: VariableDef }[] = []
+    for (const group of filteredGroups) {
+      for (const variable of group.variables) {
+        if (result.length >= maxResults) break
+        result.push({ group, variable })
+      }
+      if (result.length >= maxResults) break
+    }
+    return result
+  }, [filteredGroups, maxResults])
+
+  // Reset active index when results change
+  React.useEffect(() => {
+    setActiveIndex(-1)
+  }, [filter])
+
+  React.useEffect(() => {
+    function handleMouseDown(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onClose()
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        setActiveIndex((prev) => (prev < allFiltered.length - 1 ? prev + 1 : 0))
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault()
+        setActiveIndex((prev) => (prev > 0 ? prev - 1 : allFiltered.length - 1))
+      }
+      if (e.key === "Enter" && activeIndex >= 0 && activeIndex < allFiltered.length) {
+        e.preventDefault()
+        onSelect(allFiltered[activeIndex].variable)
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown)
+    document.addEventListener("keydown", handleKeyDown)
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown)
+      document.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [onClose, onSelect, allFiltered, activeIndex])
+
+  if (allFiltered.length === 0) {
+    return null
+  }
+
+  // Group the capped results back for rendering
+  const groupsToRender: { label: string; items: { variable: VariableDef; flatIndex: number }[] }[] = []
+  let flatIndex = 0
+  for (const group of filteredGroups) {
+    const items: { variable: VariableDef; flatIndex: number }[] = []
+    for (const variable of group.variables) {
+      if (flatIndex >= maxResults) break
+      items.push({ variable, flatIndex })
+      flatIndex++
+    }
+    if (items.length > 0) {
+      groupsToRender.push({ label: group.label, items })
+    }
+    if (flatIndex >= maxResults) break
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      data-slot="variable-autocomplete"
+      className={cn(
+        "absolute z-50 bg-popover border border-border rounded-lg shadow-lg w-64 overflow-hidden",
+        className
+      )}
+      {...rest}
+    >
+      <div data-slot="variable-autocomplete-header" className="px-3 py-1.5 border-b border-border">
+        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+          Insert variable
+        </span>
+      </div>
+      <div role="listbox" aria-label="Variables" className="overflow-y-auto" style={{ maxHeight: "312px" }}>
+        {groupsToRender.map((group) => (
+          <div key={group.label} role="group" aria-label={group.label}>
+            <div data-slot="variable-autocomplete-group-label" className="px-3 py-1 text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">
+              {group.label}
+            </div>
+            {group.items.map(({ variable, flatIndex: idx }) => (
+              <button
+                type="button"
+                key={`${group.label}:${variable.name}`}
+                role="option"
+                aria-selected={idx === activeIndex}
+                data-slot="variable-autocomplete-item"
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => onSelect(variable)}
+                onMouseEnter={() => setActiveIndex(idx)}
+                className={cn(
+                  "w-full text-left px-3 py-2 cursor-pointer transition-colors flex items-start justify-between gap-2",
+                  idx === activeIndex ? "bg-muted/50" : "hover:bg-muted/30"
+                )}
+              >
+                <div className="min-w-0">
+                  <div className="text-xs font-mono text-blue-600">{`{{${variable.name}}}`}</div>
+                  {variable.description && (
+                    <div className="text-[10px] text-muted-foreground">{variable.description}</div>
+                  )}
+                </div>
+                {variable.source && (
+                  <span className="text-[9px] px-1.5 py-0.5 rounded bg-muted/30 text-muted-foreground shrink-0 mt-0.5 capitalize">
+                    {variable.source}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { VariableAutocomplete, type VariableAutocompleteProps, type VariableDef, type VariableGroup }

package/src/index.ts

@@ -19,6 +19,8 @@ export * from "./components/avatar"
 export * from "./components/badge"
 export * from "./components/button"
 export * from "./components/card"
+export * from "./components/compliance-badge"
+export * from "./components/contact-chip"
 export * from "./components/contact-list"
 export * from "./components/dashboard-cards"
 export * from "./components/data-table"
@@ -29,15 +31,19 @@ export * from "./components/data-table-toolbar"
 export * from "./components/detail-view"
 export * from "./components/dialog"
 export * from "./components/dropdown-menu"
+export * from "./components/empty-state"
 export * from "./components/entity-panel"
+export * from "./components/filter-chip"
 export * from "./components/inbox-row"
 export * from "./components/inbox-toolbar"
+export * from "./components/inline-banner"
 export * from "./components/input"
 export * from "./components/insights-filter-bar"
 export * from "./components/item-list"
 export * from "./components/item-list-display"
 export * from "./components/item-list-filter"
 export * from "./components/item-list-toolbar"
+export * from "./components/kbd-hint"
 export * from "./components/label"
 export * from "./components/message"
 export * from "./components/metric-card"
@@ -54,6 +60,7 @@ export {
 export * from "./components/quick-action-sidebar-nav"
 export * from "./components/recommended-actions-section"
 export * from "./components/report-card"
+export * from "./components/rich-text-toolbar"
 export * from "./components/score-analysis-modal"
 export * from "./components/score-breakdown"
 export * from "./components/score-feedback"
@@ -65,17 +72,25 @@ export * from "./components/sheet"
 export * from "./components/sidebar"
 export * from "./components/signal-feedback-inline"
 export * from "./components/simple-data-table"
-export * from "./components/virtualized-data-table"
 export * from "./components/skeleton"
 export * from "./components/status-badge"
+export * from "./components/step-timeline"
+export * from "./components/sticky-action-bar"
 export * from "./components/styled-bar-list"
+export { DraftFeedbackInline } from "./components/draft-feedback-inline"
+export type { DraftFeedbackInlineProps } from "./components/draft-feedback-inline"
+export { AccountContactsPopover, BrandIcon } from "./components/account-contacts-popover"
+export type { AccountContactsPopoverProps } from "./components/account-contacts-popover"
 export * from "./components/suggested-actions"
+export * from "./components/switch"
 export * from "./components/table"
 export * from "./components/tabs"
 export * from "./components/textarea"
 export * from "./components/timeline-activity"
 export * from "./components/tooltip"
+export * from "./components/variable-autocomplete"
 export * from "./components/view-mode-toggle"
+export * from "./components/virtualized-data-table"
 
 // Charts (re-exported for backward compatibility with root imports)
 export * from "./charts/index"