@handled-ai/design-system 0.9.27 → 0.10.0

package/src/components/step-timeline.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Mail, Phone, CheckSquare, Clock, Circle, ChevronUp, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+type StepType = "email" | "call" | "task" | "wait" | (string & {})
+
+interface TimelineStep {
+  id: string
+  type: StepType
+  label: string
+}
+
+interface StepTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: TimelineStep[]
+  expandedStepId?: string
+  onStepClick?: (stepId: string) => void
+  onInsert?: (index: number) => void
+  renderStepBody?: (step: TimelineStep) => React.ReactNode
+  renderStepAccessory?: (step: TimelineStep) => React.ReactNode
+}
+
+const stepTypeConfig: Record<string, { icon: LucideIcon; classes: string }> = {
+  email: { icon: Mail, classes: "bg-blue-500/10 text-blue-600" },
+  call: { icon: Phone, classes: "bg-emerald-500/10 text-emerald-600" },
+  task: { icon: CheckSquare, classes: "bg-purple-500/10 text-purple-600" },
+  wait: { icon: Clock, classes: "bg-muted text-muted-foreground" },
+}
+
+const defaultStepConfig: { icon: LucideIcon; classes: string } = { icon: Circle, classes: "bg-muted text-muted-foreground" }
+
+function StepTimeline({
+  steps,
+  expandedStepId,
+  onStepClick,
+  onInsert,
+  renderStepBody,
+  renderStepAccessory,
+  className,
+  ...rest
+}: StepTimelineProps) {
+  return (
+    <div data-slot="step-timeline" className={cn("relative ml-5", className)} {...rest}>
+      <div className="absolute left-0 top-0 bottom-0 border-l-2 border-border" />
+
+      {steps.map((step, index) => {
+        const expanded = step.id === expandedStepId
+        const config = stepTypeConfig[step.type] ?? defaultStepConfig
+        const TypeIcon = config.icon
+        const isInteractive = !!(onStepClick || renderStepBody)
+        const bodyId = `step-timeline-body-${step.id}`
+
+        const headerContent = (
+          <>
+            <div className={cn("w-8 h-8 rounded-full flex items-center justify-center shrink-0", config.classes)}>
+              <TypeIcon size={16} />
+            </div>
+            <div className="flex flex-col min-w-0">
+              <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
+                {step.type}
+              </span>
+              <span className="text-sm font-medium">{step.label}</span>
+            </div>
+          </>
+        )
+
+        return (
+          <React.Fragment key={step.id}>
+            {index > 0 && onInsert && (
+              <div className="relative pl-8 py-1">
+                <button
+                  type="button"
+                  data-slot="step-timeline-insert"
+                  onClick={() => onInsert(index)}
+                  className="border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full"
+                >
+                  + Add Step
+                </button>
+              </div>
+            )}
+
+            <div data-slot="step-timeline-step" className="relative pl-8 py-2">
+              <div className="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-border bg-background z-10" />
+
+              <div data-slot="step-timeline-card" className="border border-border rounded-lg overflow-hidden">
+                {isInteractive ? (
+                  <div className="flex items-center w-full px-4 py-3 gap-3">
+                    <button
+                      type="button"
+                      aria-expanded={expanded}
+                      aria-controls={bodyId}
+                      onClick={() => onStepClick?.(step.id)}
+                      className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity text-left"
+                    >
+                      {headerContent}
+                    </button>
+                    <div className="ml-auto flex items-center gap-2 shrink-0">
+                      {renderStepAccessory && (
+                        <div className="shrink-0">
+                          {renderStepAccessory(step)}
+                        </div>
+                      )}
+                      <div className="shrink-0 text-muted-foreground">
+                        {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="w-full px-4 py-3 flex items-center gap-3">
+                    {headerContent}
+                    {renderStepAccessory && (
+                      <div className="ml-auto shrink-0">
+                        {renderStepAccessory(step)}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {expanded && renderStepBody && (
+                  <div id={bodyId} data-slot="step-timeline-body">
+                    {renderStepBody(step)}
+                  </div>
+                )}
+              </div>
+            </div>
+          </React.Fragment>
+        )
+      })}
+
+      {onInsert && (
+        <div className="relative pl-8 py-1">
+          <button
+            type="button"
+            data-slot="step-timeline-insert"
+            onClick={() => onInsert(steps.length)}
+            className="border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full"
+          >
+            + Add Step
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { StepTimeline, type StepTimelineProps, type TimelineStep, type StepType }

package/src/components/sticky-action-bar.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  left?: React.ReactNode
+  right?: React.ReactNode
+  bordered?: boolean
+}
+
+function StickyActionBar({ left, right, bordered = true, className, ...rest }: StickyActionBarProps) {
+  return (
+    <div
+      data-slot="sticky-action-bar"
+      className={cn(
+        "flex items-center justify-between sticky bottom-0 bg-background",
+        bordered && "pt-3 border-t border-border/50",
+        className
+      )}
+      {...rest}
+    >
+      {left && (
+        <div data-slot="sticky-action-bar-left" className="flex items-center gap-1">
+          {left}
+        </div>
+      )}
+      {right && (
+        <div data-slot="sticky-action-bar-right" className="ml-auto flex items-center gap-2">
+          {right}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { StickyActionBar, type StickyActionBarProps }

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,21 @@ 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 * 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"

package/src/prototype/prototype-config.ts

@@ -85,7 +85,7 @@ export interface InboxViewConfig {
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean
   accountDetailsLabel?: string
-  onSignalApprove?: (item: QueueItem) => void
+  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: {
     approveButton?: string
@@ -94,6 +94,7 @@ export interface InboxViewConfig {
     dismissedStatus?: string
     opportunityCreated?: string
     confirmPrompt?: string
+    creatingStatus?: string
   }
   /** When true, the approve/create-opportunity button is hidden but the dismiss button remains. */
   hideApproveButton?: boolean

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

@@ -123,7 +123,7 @@ export interface DetailViewProps {
   onOpenEntityPanel?: () => void
   onOpenRecentActivity?: () => void
   onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
-  onSignalApprove?: (item: QueueItem) => void
+  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: InboxViewConfig["signalLabels"]
   hideApproveButton?: boolean
@@ -289,7 +289,7 @@ export function DetailView({
                 ? null
                 : typeof introOpt === "function"
                   ? introOpt(item)
-                  : introOpt ?? `We detected signals that suggest a potential opportunity with ${item.company}.`
+                  : introOpt ?? `Signals indicate a potential opportunity for ${item.company}.`
             return (
               <div className="mb-8">
                 {briefHeading ? (

package/src/styles/globals.css

@@ -65,6 +65,28 @@
   /* Brand colors */
   --brand-purple: #6B5FCF;
 
+  /* Semantic status colors */
+  --status-active-bg: #ecfdf5;
+  --status-active-fg: #059669;
+  --status-active-border: #a7f3d0;
+
+  --status-pending-bg: #fffbeb;
+  --status-pending-fg: #d97706;
+  --status-pending-border: #fde68a;
+
+  /* Intentionally identical to status-pending — same visual, different semantic meaning */
+  --status-warning-bg: #fffbeb;
+  --status-warning-fg: #d97706;
+  --status-warning-border: #fde68a;
+
+  --status-info-bg: #eff6ff;
+  --status-info-fg: #2563eb;
+  --status-info-border: #bfdbfe;
+
+  --status-destructive-bg: #fef2f2;
+  --status-destructive-fg: #dc2626;
+  --status-destructive-border: #fecaca;
+
   --chart-1: var(--gray-900);
   --chart-2: var(--gray-700);
   --chart-3: var(--gray-500);
@@ -129,6 +151,28 @@
   /* Brand colors */
   --brand-purple: #6B5FCF;
 
+  /* Semantic status colors (dark) */
+  --status-active-bg: #022c22;
+  --status-active-fg: #34d399;
+  --status-active-border: #065f46;
+
+  --status-pending-bg: #451a03;
+  --status-pending-fg: #fbbf24;
+  --status-pending-border: #92400e;
+
+  /* Intentionally identical to status-pending — same visual, different semantic meaning */
+  --status-warning-bg: #451a03;
+  --status-warning-fg: #fbbf24;
+  --status-warning-border: #92400e;
+
+  --status-info-bg: #1e1b4b;
+  --status-info-fg: #60a5fa;
+  --status-info-border: #1e40af;
+
+  --status-destructive-bg: #450a0a;
+  --status-destructive-fg: #f87171;
+  --status-destructive-border: #991b1b;
+
   --chart-1: var(--gray-900);
   --chart-2: var(--gray-700);
   --chart-3: var(--gray-600);
@@ -196,6 +240,22 @@
 
   --color-brand-purple: var(--brand-purple);
 
+  --color-status-active-bg: var(--status-active-bg);
+  --color-status-active-fg: var(--status-active-fg);
+  --color-status-active-border: var(--status-active-border);
+  --color-status-pending-bg: var(--status-pending-bg);
+  --color-status-pending-fg: var(--status-pending-fg);
+  --color-status-pending-border: var(--status-pending-border);
+  --color-status-warning-bg: var(--status-warning-bg);
+  --color-status-warning-fg: var(--status-warning-fg);
+  --color-status-warning-border: var(--status-warning-border);
+  --color-status-info-bg: var(--status-info-bg);
+  --color-status-info-fg: var(--status-info-fg);
+  --color-status-info-border: var(--status-info-border);
+  --color-status-destructive-bg: var(--status-destructive-bg);
+  --color-status-destructive-fg: var(--status-destructive-fg);
+  --color-status-destructive-border: var(--status-destructive-border);
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);