@handled-ai/design-system 0.18.4 → 0.18.6

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\nexport { displayName, getInitials, shortName, type ProfileLike } from \"./lib/user-display\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport { CollapsibleSection, type CollapsibleSectionProps } from \"./components/collapsible-section\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/contextual-quick-action-launcher\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-condition-filter\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from \"./components/feedback-primitives\"\nexport type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from \"./components/feedback-primitives\"\nexport { SignalPriorityPopover } from \"./components/signal-priority-popover\"\nexport type { SignalPriorityPopoverProps, PriorityFactor } from \"./components/signal-priority-popover\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-why-chips\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/user-display\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\nexport type { ColumnSizingState } from \"@tanstack/react-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAC5C,SAAS,aAAa,aAAa,iBAAmC;AAGtE,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,0BAAwD;AACjE,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,gBAAgB,mBAAmB,eAAe,iBAAiB,6BAA6B;AAEzG,SAAS,6BAA6B;AAEtC,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\nexport { displayName, getInitials, shortName, type ProfileLike } from \"./lib/user-display\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport { CollapsibleSection, type CollapsibleSectionProps } from \"./components/collapsible-section\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/contextual-quick-action-launcher\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-condition-filter\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/detail-drawer\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from \"./components/feedback-primitives\"\nexport type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from \"./components/feedback-primitives\"\nexport { SignalPriorityPopover } from \"./components/signal-priority-popover\"\nexport type { SignalPriorityPopoverProps, PriorityFactor } from \"./components/signal-priority-popover\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/days-open-cell\"\nexport * from \"./components/linked-entity-cell\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/pill\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport * from \"./components/quick-segment\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-why-chips\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/user-display\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\nexport type { ColumnSizingState } from \"@tanstack/react-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAC5C,SAAS,aAAa,aAAa,iBAAmC;AAGtE,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,0BAAwD;AACjE,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,gBAAgB,mBAAmB,eAAe,iBAAiB,6BAA6B;AAEzG,SAAS,6BAA6B;AAEtC,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",
@@ -171,11 +171,9 @@
     "eslint": "^9.32.0",
     "eslint-config-next": "15.3.1",
     "happy-dom": "^20.9.0",
-    "lucide-react": "^1.16.0",
     "next": "15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "recharts": "^3.8.1",
     "shadcn": "^3.0.0",
     "tailwindcss": "^4.1.11",
     "three": "^0.183.1",

package/src/charts/__tests__/insights-charts.test.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import { describe, expect, it, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+
+import { EmptyChartState } from "../empty-chart-state"
+import { PipelineOverview, type PipelineStage, type PipelineStageMetrics } from "../pipeline-overview"
+
+vi.mock("@nivo/sankey", () => ({
+  ResponsiveSankey: ({ data }: { data: { nodes: unknown[]; links: unknown[] } }) => (
+    <div data-testid="mock-sankey">{data.nodes.length}:{data.links.length}</div>
+  ),
+}))
+
+const stages: PipelineStage[] = [
+  { id: "received", label: "Received", count: 100, trend: "+5%", nextConversion: "80%" },
+  { id: "contacted", label: "Contacted", count: 80, trend: "+3%", nextConversion: null },
+]
+
+const metrics: Record<string, PipelineStageMetrics> = {
+  received: { medianTime: "1d", avgTime: "2d", dropOffs: [] },
+  contacted: { medianTime: "2d", avgTime: "3d", dropOffs: [] },
+}
+
+function renderPipeline(variant?: "sankey" | "compact", onFilterChange = vi.fn()) {
+  return render(
+    <PipelineOverview
+      variant={variant}
+      stages={stages}
+      stageMetrics={metrics}
+      stageTimings={[{ median: "1d", avg: "2d" }, null]}
+      filterOptions={["Facility", "Source"]}
+      onFilterChange={onFilterChange}
+    />
+  )
+}
+
+describe("Insights chart primitives", () => {
+  it("EmptyChartState renders defaults and action", () => {
+    const { container } = render(<EmptyChartState action={<button type="button">Reset</button>} />)
+
+    expect(container.querySelector('[data-slot="empty-chart-state"]')).not.toBeNull()
+    expect(screen.getByText("No chart data")).not.toBeNull()
+    expect(screen.getByRole("button", { name: "Reset" })).not.toBeNull()
+  })
+
+  it("PipelineOverview default variant preserves Sankey rendering and callbacks", () => {
+    const onFilterChange = vi.fn()
+    renderPipeline(undefined, onFilterChange)
+
+    expect(screen.getByTestId("mock-sankey")).not.toBeNull()
+    fireEvent.click(screen.getByRole("button", { name: "Source" }))
+    expect(onFilterChange).toHaveBeenCalledWith("Source")
+  })
+
+  it("PipelineOverview compact variant renders compact bars instead of Sankey", () => {
+    const { container } = renderPipeline("compact")
+
+    expect(screen.queryByTestId("mock-sankey")).toBeNull()
+    expect(container.querySelector('[data-slot="pipeline-overview-compact"]')).not.toBeNull()
+    expect(container.querySelectorAll('[data-slot="pipeline-overview-compact-bar"]')).toHaveLength(2)
+  })
+})

package/src/charts/empty-chart-state.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { BarChart3 } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface EmptyChartStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+}
+
+export function EmptyChartState({
+  title = "No chart data",
+  description = "Try adjusting filters or selecting a different time range.",
+  icon,
+  action,
+  className,
+  ...props
+}: EmptyChartStateProps) {
+  return (
+    <div
+      data-slot="empty-chart-state"
+      className={cn(
+        "flex min-h-[240px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/30 p-8 text-center",
+        className
+      )}
+      {...props}
+    >
+      <div data-slot="empty-chart-state-icon" className="mb-3 text-muted-foreground [&>svg]:h-10 [&>svg]:w-10">
+        {icon ?? <BarChart3 aria-hidden="true" />}
+      </div>
+      <div data-slot="empty-chart-state-title" className="text-sm font-semibold text-foreground">
+        {title}
+      </div>
+      {description ? (
+        <div data-slot="empty-chart-state-description" className="mt-1 max-w-sm text-sm text-muted-foreground">
+          {description}
+        </div>
+      ) : null}
+      {action ? <div data-slot="empty-chart-state-action" className="mt-4">{action}</div> : null}
+    </div>
+  )
+}

package/src/charts/index.ts

@@ -11,3 +11,4 @@ export * from "./volume-analysis-chart"
 export * from "./top-line-metrics"
 export * from "./pipeline-overview"
 export * from "./sankey-chart"
+export * from "./empty-chart-state"

package/src/charts/pipeline-overview.tsx

@@ -125,6 +125,7 @@ function StageHoverCard({
 
 export interface PipelineOverviewProps {
   title?: string
+  variant?: "sankey" | "compact"
   stages: PipelineStage[]
   stageMetrics: Record<string, PipelineStageMetrics>
   stageTimings: (PipelineStageTiming | null)[]
@@ -162,6 +163,7 @@ export interface PipelineOverviewProps {
 
 export function PipelineOverview({
   title = "Pipeline Overview",
+  variant = "sankey",
   stages,
   stageMetrics,
   stageTimings,
@@ -217,6 +219,10 @@ export function PipelineOverview({
     [sankeyMargin],
   )
   const effectiveLabelPadding = sankeyLabelPadding ?? 16
+  const compactMaxCount = React.useMemo(
+    () => Math.max(...stages.map((stage) => stage.count), 1),
+    [stages],
+  )
 
   const sankeyData = React.useMemo(() => {
     const breakdown =
@@ -424,8 +430,41 @@ export function PipelineOverview({
         })}
       </div>
 
-      {/* Sankey Chart */}
+      {variant === "compact" ? (
+        <div data-slot="pipeline-overview-compact" className="mt-4 space-y-2">
+          {stages.map((stage, index) => {
+            const width = `${Math.max((stage.count / compactMaxCount) * 100, 4)}%`
+
+            return (
+              <div key={stage.id} className="rounded-lg border border-border bg-background p-3">
+                <div className="mb-2 flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-medium text-foreground">{stage.label}</div>
+                    <div className="text-xs text-muted-foreground">{stage.trend}</div>
+                  </div>
+                  <div className="text-right text-lg font-bold text-foreground">
+                    {stage.count.toLocaleString()}
+                  </div>
+                </div>
+                <div className="h-2 overflow-hidden rounded-full bg-muted">
+                  <div
+                    data-slot="pipeline-overview-compact-bar"
+                    className="h-full rounded-full bg-emerald-600"
+                    style={{ width }}
+                  />
+                </div>
+                {index < stages.length - 1 && stage.nextConversion ? (
+                  <div className="mt-2 text-xs text-muted-foreground">
+                    {stage.nextConversion} to {stages[index + 1]?.label}
+                  </div>
+                ) : null}
+              </div>
+            )
+          })}
+        </div>
+      ) : (
       <div
+        data-slot="pipeline-overview-sankey"
         className="relative mt-4 w-full"
         style={{ height: 400, minWidth: 0 }}
       >
@@ -471,6 +510,7 @@ export function PipelineOverview({
           }}
         />
       </div>
+      )}
     </div>
   )
 }

package/src/components/__tests__/insights-primitives.test.tsx

@@ -0,0 +1,135 @@
+import React from "react"
+import { describe, expect, it, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+
+import { DaysOpenCell, getDaysOpenIntent } from "../days-open-cell"
+import { DetailDrawer } from "../detail-drawer"
+import { InsightsFilterBar } from "../insights-filter-bar"
+import { LinkedEntityCell } from "../linked-entity-cell"
+import { KpiStrip } from "../metric-card"
+import { Pill, StatusPill } from "../pill"
+import { QuickSegment } from "../quick-segment"
+
+describe("Insights primitives", () => {
+  it("renders compact InsightsFilterBar without changing default API", () => {
+    const { container } = render(
+      <InsightsFilterBar
+        variant="compact"
+        filters={[{ id: "status", label: "Status", options: ["All", "Open"], defaultValue: "All" }]}
+        values={{ status: "Open" }}
+        onChange={() => {}}
+        onClearAll={() => {}}
+      />
+    )
+
+    const bar = container.querySelector('[data-slot="insights-filter-bar"]')!
+    expect(bar.className).toContain("p-2")
+    expect(bar.className).toContain("gap-2")
+    expect(screen.getByRole("button", { name: /Status: Open/i }).className).toContain("h-7")
+  })
+
+  it("renders KpiStrip items and changes", () => {
+    const { container } = render(
+      <KpiStrip
+        items={[
+          { label: "New", value: 42, unit: "leads", change: { value: "8%", direction: "up" } },
+          { label: "Aging", value: 12, subtitle: "over SLA", change: { value: "3%", direction: "down", isGood: true } },
+        ]}
+      />
+    )
+
+    expect(container.querySelectorAll('[data-slot="kpi-strip-item"]')).toHaveLength(2)
+    expect(screen.getByText("New")).not.toBeNull()
+    expect(screen.getByText("42")).not.toBeNull()
+    expect(screen.getByText("8%")).not.toBeNull()
+  })
+
+  it("renders neutral KpiStrip changes without an up/down icon or red/green intent", () => {
+    const { container } = render(
+      <KpiStrip
+        items={[
+          { label: "Stable", value: 10, change: { value: "0%", direction: "neutral" } },
+        ]}
+      />
+    )
+
+    const change = container.querySelector('[data-slot="kpi-strip-change"]')
+    expect(change?.className).toContain("text-muted-foreground")
+    expect(change?.className).not.toContain("text-red-600")
+    expect(change?.className).not.toContain("text-emerald-600")
+    expect(change?.querySelector("svg")).toBeNull()
+  })
+
+  it("QuickSegment exposes selected state and invokes onSelect", () => {
+    const onSelect = vi.fn()
+    render(<QuickSegment label="At risk" value="risk" count={5} selected onSelect={onSelect} />)
+
+    const button = screen.getByRole("button", { name: /At risk/i })
+    expect(button.getAttribute("aria-pressed")).toBe("true")
+    expect(screen.getByText("5")).not.toBeNull()
+    fireEvent.click(button)
+    expect(onSelect).toHaveBeenCalledWith("risk")
+  })
+
+  it("LinkedEntityCell renders entity links and metadata", () => {
+    const onNavigate = vi.fn()
+    render(
+      <LinkedEntityCell
+        name="Acme Health"
+        href="/accounts/acme"
+        subtitle="Account"
+        meta="Tier 1"
+        onNavigate={onNavigate}
+      />
+    )
+
+    const link = screen.getByRole("link", { name: "Acme Health" })
+    expect(link.getAttribute("href")).toBe("/accounts/acme")
+    expect(screen.getByText(/Tier 1/)).not.toBeNull()
+    fireEvent.click(link)
+    expect(onNavigate).toHaveBeenCalled()
+  })
+
+  it("DaysOpenCell maps thresholds to status intents", () => {
+    expect(getDaysOpenIntent(2, 7, 30)).toBe("success")
+    expect(getDaysOpenIntent(10, 7, 30)).toBe("warning")
+    expect(getDaysOpenIntent(45, 7, 30)).toBe("error")
+
+    render(<DaysOpenCell days={45} />)
+    expect(screen.getByTestId("days-open-pill").getAttribute("data-variant")).toBe("error")
+  })
+
+  it("Pill and StatusPill render wrapper variants", () => {
+    const { container } = render(
+      <div>
+        <Pill variant="info">Info</Pill>
+        <StatusPill status="Blocked" intent="error" />
+      </div>
+    )
+
+    expect(container.querySelector('[data-slot="pill"]')?.getAttribute("data-variant")).toBe("info")
+    expect(container.querySelector('[data-slot="status-pill"]')?.getAttribute("data-variant")).toBe("error")
+    expect(screen.getByText("Blocked")).not.toBeNull()
+  })
+
+  it("DetailDrawer renders title, content, and footer when open", () => {
+    render(
+      <DetailDrawer
+        open
+        onOpenChange={() => {}}
+        title="Referral details"
+        description="A drawer for insights"
+        footer={<button type="button">Done</button>}
+      >
+        <div>Drawer body</div>
+      </DetailDrawer>
+    )
+
+    expect(screen.getByText("Referral details")).not.toBeNull()
+    expect(screen.getByText("A drawer for insights")).not.toBeNull()
+    expect(screen.getByText("Drawer body")).not.toBeNull()
+    expect(screen.getByRole("button", { name: "Done" })).not.toBeNull()
+    expect(document.querySelector('[data-slot="detail-drawer"]')?.className).toContain("flex")
+    expect(document.querySelector('[data-slot="detail-drawer"]')?.className).toContain("flex-col")
+  })
+})

package/src/components/days-open-cell.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { StatusPill, type PillStatus } from "./pill"
+
+export interface DaysOpenCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  days: number | null | undefined
+  warningAt?: number
+  criticalAt?: number
+  emptyLabel?: string
+  suffix?: string
+}
+
+function getDaysOpenIntent(days: number, warningAt: number, criticalAt: number): PillStatus {
+  if (days >= criticalAt) return "error"
+  if (days >= warningAt) return "warning"
+  return "success"
+}
+
+export function DaysOpenCell({
+  days,
+  warningAt = 7,
+  criticalAt = 30,
+  emptyLabel = "—",
+  suffix = "d open",
+  className,
+  ...props
+}: DaysOpenCellProps) {
+  if (days === null || days === undefined) {
+    return (
+      <div data-slot="days-open-cell" className={cn("text-sm text-muted-foreground", className)} {...props}>
+        {emptyLabel}
+      </div>
+    )
+  }
+
+  const intent = getDaysOpenIntent(days, warningAt, criticalAt)
+
+  return (
+    <div data-slot="days-open-cell" className={cn("inline-flex items-center", className)} {...props}>
+      <StatusPill data-testid="days-open-pill" status={`${days} ${suffix}`} intent={intent}>
+        {days} {suffix}
+      </StatusPill>
+    </div>
+  )
+}
+
+export { getDaysOpenIntent }

package/src/components/detail-drawer.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "./sheet"
+
+export interface DetailDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: React.ReactNode
+  description?: React.ReactNode
+  children: React.ReactNode
+  footer?: React.ReactNode
+  side?: "right" | "left"
+  className?: string
+  contentClassName?: string
+}
+
+export function DetailDrawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  side = "right",
+  className,
+  contentClassName,
+}: DetailDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="detail-drawer"
+        side={side}
+        className={cn("flex w-full flex-col gap-0 p-0 sm:max-w-xl", className)}
+      >
+        <SheetHeader data-slot="detail-drawer-header" className="border-b border-border p-5">
+          <SheetTitle>{title}</SheetTitle>
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
+        </SheetHeader>
+        <div data-slot="detail-drawer-content" className={cn("flex-1 overflow-y-auto p-5", contentClassName)}>
+          {children}
+        </div>
+        {footer ? (
+          <SheetFooter data-slot="detail-drawer-footer" className="border-t border-border p-5">
+            {footer}
+          </SheetFooter>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  )
+}

package/src/components/insights-filter-bar.tsx

@@ -23,6 +23,7 @@ export interface FilterDefinition {
 
 export interface InsightsFilterBarProps {
   filters: FilterDefinition[]
+  variant?: "default" | "compact"
   values: Record<string, string>
   onChange: (filterId: string, value: string) => void
   onClearAll?: () => void
@@ -45,6 +46,7 @@ function InsightsFilterBar({
   onChange,
   onClearAll,
   className,
+  variant = "default",
 }: InsightsFilterBarProps) {
   const showClearAll = onClearAll && hasNonDefaultValue(filters, values)
 
@@ -52,11 +54,12 @@ function InsightsFilterBar({
     <div
       data-slot="insights-filter-bar"
       className={cn(
-        "flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm",
+        "flex flex-wrap items-center rounded-md border border-border bg-card shadow-sm",
+        variant === "compact" ? "gap-2 p-2" : "gap-3 p-4",
         className
       )}
     >
-      <div className="flex items-center gap-2">
+      <div className={cn("flex items-center gap-2", variant === "compact" && "sr-only")}>
         <FilterIcon className="h-4 w-4 text-muted-foreground" />
         <span className="text-sm font-medium text-muted-foreground">
           Filters:
@@ -80,7 +83,10 @@ function InsightsFilterBar({
               <Button
                 variant="outline"
                 size="sm"
-                className="h-8 gap-1.5 text-xs font-normal shadow-none"
+                className={cn(
+                  "gap-1.5 text-xs font-normal shadow-none",
+                  variant === "compact" ? "h-7 px-2" : "h-8"
+                )}
               >
                 {IconComp ? (
                   <IconComp className="h-3.5 w-3.5 text-muted-foreground" />
@@ -118,7 +124,10 @@ function InsightsFilterBar({
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 text-xs text-destructive hover:text-destructive"
+            className={cn(
+              "text-xs text-destructive hover:text-destructive",
+              variant === "compact" ? "h-7 px-2" : "h-8"
+            )}
             onClick={onClearAll}
           >
             Clear All

package/src/components/linked-entity-cell.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { ExternalLink } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: React.ReactNode
+  href?: string
+  subtitle?: React.ReactNode
+  meta?: React.ReactNode
+  icon?: React.ReactNode
+  external?: boolean
+  onNavigate?: () => void
+}
+
+export function LinkedEntityCell({
+  name,
+  href,
+  subtitle,
+  meta,
+  icon,
+  external = false,
+  onNavigate,
+  className,
+  ...props
+}: LinkedEntityCellProps) {
+  const content = (
+    <>
+      <span className="truncate">{name}</span>
+      {external ? <ExternalLink className="h-3 w-3 shrink-0 opacity-60" aria-hidden="true" /> : null}
+    </>
+  )
+
+  return (
+    <div
+      data-slot="linked-entity-cell"
+      className={cn("flex min-w-0 items-center gap-2", className)}
+      {...props}
+    >
+      {icon ? (
+        <span data-slot="linked-entity-cell-icon" className="shrink-0 text-muted-foreground">
+          {icon}
+        </span>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        {href ? (
+          <a
+            data-slot="linked-entity-cell-link"
+            href={href}
+            target={external ? "_blank" : undefined}
+            rel={external ? "noreferrer" : undefined}
+            onClick={onNavigate}
+            className="inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline"
+          >
+            {content}
+          </a>
+        ) : (
+          <span data-slot="linked-entity-cell-name" className="block truncate font-medium text-foreground">
+            {name}
+          </span>
+        )}
+        {subtitle || meta ? (
+          <div data-slot="linked-entity-cell-meta" className="mt-0.5 truncate text-xs text-muted-foreground">
+            {subtitle}
+            {subtitle && meta ? <span className="px-1">·</span> : null}
+            {meta}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}