@handled-ai/design-system 0.17.2 → 0.18.1

package/dist/components/pill.d.ts

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Insights-friendly pill convenience wrappers.
+ *
+ * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces
+ * such as tables, KPI strips, and filter summaries. They intentionally wrap the
+ * existing Badge/StatusBadge visual language and are not a replacement for all
+ * Badge usage across the design system.
+ */
+type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
+declare const pillVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "neutral" | "info" | "warning" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
+}
+declare function Pill({ className, variant, ...props }: PillProps): React.JSX.Element;
+interface StatusPillProps extends Omit<PillProps, "variant"> {
+    status: React.ReactNode;
+    intent?: PillStatus;
+}
+declare function StatusPill({ status, intent, children, ...props }: StatusPillProps): React.JSX.Element;
+
+export { Pill, type PillProps, type PillStatus, StatusPill, type StatusPillProps, pillVariants };

package/dist/components/pill.js

@@ -0,0 +1,77 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+const pillVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white dark:bg-destructive/60",
+        outline: "border-border bg-background text-foreground",
+        ghost: "border-transparent bg-transparent text-muted-foreground",
+        success: "border-transparent bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100",
+        warning: "border-transparent bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100",
+        error: "border-transparent bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100",
+        neutral: "border-transparent bg-muted text-foreground",
+        info: "border-transparent bg-blue-100 text-blue-950 dark:bg-blue-950 dark:text-blue-100"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+function Pill(_a) {
+  var _b = _a, { className, variant = "neutral" } = _b, props = __objRest(_b, ["className", "variant"]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    __spreadValues({
+      "data-slot": "pill",
+      "data-variant": variant,
+      className: cn(pillVariants({ variant }), className)
+    }, props)
+  );
+}
+function StatusPill(_c) {
+  var _d = _c, { status, intent = "neutral", children } = _d, props = __objRest(_d, ["status", "intent", "children"]);
+  return /* @__PURE__ */ jsx(Pill, __spreadProps(__spreadValues({ "data-slot": "status-pill", variant: intent }, props), { children: children != null ? children : status }));
+}
+export {
+  Pill,
+  StatusPill,
+  pillVariants
+};
+//# sourceMappingURL=pill.js.map

package/dist/components/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\n\n/**\n * Insights-friendly pill convenience wrappers.\n *\n * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces\n * such as tables, KPI strips, and filter summaries. They intentionally wrap the\n * existing Badge/StatusBadge visual language and are not a replacement for all\n * Badge usage across the design system.\n */\nexport type PillStatus = \"success\" | \"warning\" | \"error\" | \"neutral\" | \"info\"\n\nconst pillVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground\",\n        secondary: \"border-transparent bg-secondary text-secondary-foreground\",\n        destructive: \"border-transparent bg-destructive text-white dark:bg-destructive/60\",\n        outline: \"border-border bg-background text-foreground\",\n        ghost: \"border-transparent bg-transparent text-muted-foreground\",\n        success: \"border-transparent bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100\",\n        warning: \"border-transparent bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100\",\n        error: \"border-transparent bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100\",\n        neutral: \"border-transparent bg-muted text-foreground\",\n        info: \"border-transparent bg-blue-100 text-blue-950 dark:bg-blue-950 dark:text-blue-100\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n    },\n  }\n)\n\nexport interface PillProps\n  extends React.ComponentProps<\"span\">,\n    VariantProps<typeof pillVariants> {}\n\nexport function Pill({ className, variant = \"neutral\", ...props }: PillProps) {\n  return (\n    <span\n      data-slot=\"pill\"\n      data-variant={variant}\n      className={cn(pillVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport interface StatusPillProps extends Omit<PillProps, \"variant\"> {\n  status: React.ReactNode\n  intent?: PillStatus\n}\n\nexport function StatusPill({ status, intent = \"neutral\", children, ...props }: StatusPillProps) {\n  return (\n    <Pill data-slot=\"status-pill\" variant={intent} {...props}>\n      {children ?? status}\n    </Pill>\n  )\n}\n\nexport { pillVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CI;AA3CJ,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAYnB,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMO,SAAS,KAAK,IAAyD;AAAzD,eAAE,aAAW,UAAU,UA1C5C,IA0CqB,IAAqC,kBAArC,IAAqC,CAAnC,aAAW;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,OAC9C;AAAA,EACN;AAEJ;AAOO,SAAS,WAAW,IAAqE;AAArE,eAAE,UAAQ,SAAS,WAAW,SA1DzD,IA0D2B,IAA2C,kBAA3C,IAA2C,CAAzC,UAAQ,UAAoB;AACvD,SACE,oBAAC,qCAAK,aAAU,eAAc,SAAS,UAAY,QAAlD,EACE,wCAAY,SACf;AAEJ;","names":[]}

package/dist/components/quick-segment.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface QuickSegmentProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "value"> {
+    label: React.ReactNode;
+    value: string;
+    selected?: boolean;
+    count?: number | string;
+    description?: React.ReactNode;
+    onSelect?: (value: string) => void;
+}
+declare function QuickSegment({ label, value, selected, count, description, onSelect, className, type, ...props }: QuickSegmentProps): React.JSX.Element;
+
+export { QuickSegment, type QuickSegmentProps };

package/dist/components/quick-segment.js

@@ -0,0 +1,96 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function QuickSegment(_a) {
+  var _b = _a, {
+    label,
+    value,
+    selected = false,
+    count,
+    description,
+    onSelect,
+    className,
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "value",
+    "selected",
+    "count",
+    "description",
+    "onSelect",
+    "className",
+    "type"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      "data-slot": "quick-segment",
+      "data-selected": selected ? "true" : "false",
+      type,
+      "aria-pressed": selected,
+      className: cn(
+        "inline-flex min-h-8 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors",
+        selected ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+        className
+      ),
+      onClick: (event) => {
+        var _a2;
+        (_a2 = props.onClick) == null ? void 0 : _a2.call(props, event);
+        if (!event.defaultPrevented) onSelect == null ? void 0 : onSelect(value);
+      }
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "quick-segment-label", children: label }),
+        count !== void 0 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "quick-segment-count",
+            className: cn(
+              "rounded-full px-1.5 py-0.5 text-[11px] leading-none",
+              selected ? "bg-primary-foreground/20 text-primary-foreground" : "bg-muted text-muted-foreground"
+            ),
+            children: count
+          }
+        ) : null,
+        description ? /* @__PURE__ */ jsx("span", { "data-slot": "quick-segment-description", className: "sr-only", children: description }) : null
+      ]
+    })
+  );
+}
+export {
+  QuickSegment
+};
+//# sourceMappingURL=quick-segment.js.map

package/dist/components/quick-segment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/quick-segment.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface QuickSegmentProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onSelect\" | \"value\"> {\n  label: React.ReactNode\n  value: string\n  selected?: boolean\n  count?: number | string\n  description?: React.ReactNode\n  onSelect?: (value: string) => void\n}\n\nexport function QuickSegment({\n  label,\n  value,\n  selected = false,\n  count,\n  description,\n  onSelect,\n  className,\n  type = \"button\",\n  ...props\n}: QuickSegmentProps) {\n  return (\n    <button\n      data-slot=\"quick-segment\"\n      data-selected={selected ? \"true\" : \"false\"}\n      type={type}\n      aria-pressed={selected}\n      className={cn(\n        \"inline-flex min-h-8 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors\",\n        selected\n          ? \"border-primary bg-primary text-primary-foreground shadow-sm\"\n          : \"border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground\",\n        className\n      )}\n      onClick={(event) => {\n        props.onClick?.(event)\n        if (!event.defaultPrevented) onSelect?.(value)\n      }}\n      {...props}\n    >\n      <span data-slot=\"quick-segment-label\">{label}</span>\n      {count !== undefined ? (\n        <span\n          data-slot=\"quick-segment-count\"\n          className={cn(\n            \"rounded-full px-1.5 py-0.5 text-[11px] leading-none\",\n            selected\n              ? \"bg-primary-foreground/20 text-primary-foreground\"\n              : \"bg-muted text-muted-foreground\"\n          )}\n        >\n          {count}\n        </span>\n      ) : null}\n      {description ? (\n        <span data-slot=\"quick-segment-description\" className=\"sr-only\">\n          {description}\n        </span>\n      ) : null}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BI,SAkBE,KAlBF;AAxBJ,SAAS,UAAU;AAYZ,SAAS,aAAa,IAUP;AAVO,eAC3B;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EAxBT,IAgB6B,IASxB,kBATwB,IASxB;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe,WAAW,SAAS;AAAA,MACnC;AAAA,MACA,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,WACI,gEACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAU;AAxC1B,YAAAA;AAyCQ,SAAAA,MAAA,MAAM,YAAN,gBAAAA,IAAA,YAAgB;AAChB,YAAI,CAAC,MAAM,iBAAkB,sCAAW;AAAA,MAC1C;AAAA,OACI,QAhBL;AAAA,MAkBC;AAAA,4BAAC,UAAK,aAAU,uBAAuB,iBAAM;AAAA,QAC5C,UAAU,SACT;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,WACI,qDACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH,IACE;AAAA,QACH,cACC,oBAAC,UAAK,aAAU,6BAA4B,WAAU,WACnD,uBACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":["_a"]}

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { DataTableFilter, DataTableFilterCategory, DataTableFilterProps, FilterO
 export { DataTableQuickViewValue, DataTableQuickViews } from './components/data-table-quick-views.js';
 export { DataTableToolbar } from './components/data-table-toolbar.js';
 export { Citation, DetailViewHeader, DetailViewSummary, DetailViewThread, SourceDef, SourceList, ThreadMessage } from './components/detail-view.js';
+export { DetailDrawer, DetailDrawerProps } from './components/detail-drawer.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/dialog.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
 export { EmptyState, EmptyStateProps } from './components/empty-state.js';
@@ -35,6 +36,8 @@ export { AssigneeFilter, InboxFilterCategory, InboxToolbar, InboxToolbarProps }
 export { InlineBanner, InlineBannerProps } from './components/inline-banner.js';
 export { Input } from './components/input.js';
 export { FilterDefinition, InsightsFilterBar, InsightsFilterBarProps } from './components/insights-filter-bar.js';
+export { DaysOpenCell, DaysOpenCellProps, getDaysOpenIntent } from './components/days-open-cell.js';
+export { LinkedEntityCell, LinkedEntityCellProps } from './components/linked-entity-cell.js';
 export { GroupedListGroup, GroupedListView, GroupedListViewProps, ItemList } from './components/item-list.js';
 export { ItemListDisplay, ItemListDisplayState, ItemListGrouping, ItemListViewMode } from './components/item-list-display.js';
 export { ItemListFilter, ItemListFilterCategory } from './components/item-list-filter.js';
@@ -42,11 +45,13 @@ export { ItemListQuickView, ItemListToolbar } from './components/item-list-toolb
 export { KbdHint } from './components/kbd-hint.js';
 export { Label } from './components/label.js';
 export { Message, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageProps } from './components/message.js';
-export { MetricCard, MetricCardProps, MetricDataPoint } from './components/metric-card.js';
+export { KpiStrip, KpiStripItem, KpiStripProps, MetricCard, MetricCardProps, MetricDataPoint } from './components/metric-card.js';
 export { PerformanceMetricsTable, PerformanceMetricsTableRow, PerformanceMetricsTableSortOption } from './components/performance-metrics-table.js';
+export { Pill, PillProps, PillStatus, StatusPill, StatusPillProps, pillVariants } from './components/pill.js';
 export { PreviewList, PreviewListItem, PreviewListItemProps } from './components/preview-list.js';
 export { Progress } from './components/progress.js';
 export { QuickActionChatArea, QuickActionSubmitPayload } from './components/quick-action-chat-area.js';
+export { QuickSegment, QuickSegmentProps } from './components/quick-segment.js';
 export { QuickActionModal, QuickActionPriority, QuickActionTaskDraft, QuickActionTemplate } from './components/quick-action-modal.js';
 export { ActiveVariant, QuickActionSidebarNav, SidebarNavItem, SidebarNavSection, SidebarUserProfile, UserMenuItem } from './components/quick-action-sidebar-nav.js';
 export { RecommendedAction, RecommendedActionsSection } from './components/recommended-actions-section.js';
@@ -92,6 +97,7 @@ export { VolumeAnalysisChart, VolumeAnalysisChartProps, VolumeDataKey } from './
 export { MetricCardData, TopLineMetrics, TopLineMetricsProps } from './charts/top-line-metrics.js';
 export { PipelineFilterBreakdown, PipelineOverview, PipelineOverviewProps, PipelineStage, PipelineStageMetrics, PipelineStageTiming } from './charts/pipeline-overview.js';
 export { SankeyChart, SankeyData, SankeyDropOff, SankeyHoverCardData, SankeyLink, SankeyNode, SankeyStageMetrics } from './charts/sankey-chart.js';
+export { EmptyChartState, EmptyChartStateProps } from './charts/empty-chart-state.js';
 export { PrototypeShell, PrototypeShellProps } from './prototype/prototype-shell.js';
 export { DetailView, DetailViewProps, PrototypeInboxView, PrototypeInboxViewProps } from './prototype/prototype-inbox-view.js';
 export { PrototypeInsightsView, PrototypeInsightsViewProps } from './prototype/prototype-insights-view.js';

package/dist/index.js

@@ -23,6 +23,7 @@ export * from "./components/data-table-filter.js";
 export * from "./components/data-table-quick-views.js";
 export * from "./components/data-table-toolbar.js";
 export * from "./components/detail-view.js";
+export * from "./components/detail-drawer.js";
 export * from "./components/dialog.js";
 export * from "./components/dropdown-menu.js";
 export * from "./components/empty-state.js";
@@ -35,6 +36,8 @@ export * from "./components/inbox-toolbar.js";
 export * from "./components/inline-banner.js";
 export * from "./components/input.js";
 export * from "./components/insights-filter-bar.js";
+export * from "./components/days-open-cell.js";
+export * from "./components/linked-entity-cell.js";
 export * from "./components/item-list.js";
 export * from "./components/item-list-display.js";
 export * from "./components/item-list-filter.js";
@@ -44,9 +47,11 @@ export * from "./components/label.js";
 export * from "./components/message.js";
 export * from "./components/metric-card.js";
 export * from "./components/performance-metrics-table.js";
+export * from "./components/pill.js";
 export * from "./components/preview-list.js";
 export * from "./components/progress.js";
 export * from "./components/quick-action-chat-area.js";
+export * from "./components/quick-segment.js";
 import {
   QuickActionModal
 } from "./components/quick-action-modal.js";

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 } from \"./components/feedback-primitives\"\nexport type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData } 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,uBAAuB;AAElF,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 } from \"./components/feedback-primitives\"\nexport type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData } 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,uBAAuB;AAElF,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.17.2",
+  "version": "0.18.1",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

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,
@@ -424,8 +426,42 @@ 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 maxCount = Math.max(...stages.map((item) => item.count), 1)
+            const width = `${Math.max((stage.count / maxCount) * 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 +507,7 @@ export function PipelineOverview({
           }}
         />
       </div>
+      )}
     </div>
   )
 }