@handled-ai/design-system 0.13.2 → 0.14.1

package/dist/components/data-table-filter.d.ts

@@ -12,7 +12,8 @@ interface DataTableFilterProps {
     categories: DataTableFilterCategory[];
     selectedFilters: Record<string, string[]>;
     onToggleFilter: (categoryId: string, option: string) => void;
+    className?: string;
 }
-declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, }: DataTableFilterProps): React.JSX.Element;
+declare function DataTableFilter({ categories, selectedFilters, onToggleFilter, className, }: DataTableFilterProps): React.JSX.Element;
 
 export { DataTableFilter, type DataTableFilterCategory };

package/dist/components/data-table-filter.js

@@ -4,6 +4,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ListFilter, Search } from "lucide-react";
+import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import {
   DropdownMenu,
@@ -17,7 +18,8 @@ import {
 function DataTableFilter({
   categories,
   selectedFilters,
-  onToggleFilter
+  onToggleFilter,
+  className
 }) {
   const [query, setQuery] = React.useState("");
   const visibleCategories = React.useMemo(() => {
@@ -47,7 +49,10 @@ function DataTableFilter({
       {
         variant: "outline",
         size: "sm",
-        className: "h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50",
+        className: cn(
+          "h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50",
+          className
+        ),
         children: [
           /* @__PURE__ */ jsx(ListFilter, { className: "h-3.5 w-3.5" }),
           "Filter",

package/dist/components/data-table-filter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ListFilter, Search } from \"lucide-react\"\n\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface DataTableFilterCategory {\n  id: string\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  options: string[]\n}\n\ninterface DataTableFilterProps {\n  categories: DataTableFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n}\n\nexport function DataTableFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n}: DataTableFilterProps) {\n  const [query, setQuery] = React.useState(\"\")\n\n  const visibleCategories = React.useMemo(() => {\n    const normalized = query.trim().toLowerCase()\n    if (!normalized) {\n      return categories\n    }\n\n    return categories.filter((category) => {\n      if (category.label.toLowerCase().includes(normalized)) {\n        return true\n      }\n\n      return category.options.some((option) =>\n        option.toLowerCase().includes(normalized)\n      )\n    })\n  }, [categories, query])\n\n  const activeCount = React.useMemo(\n    () =>\n      Object.values(selectedFilters).reduce(\n        (count, selected) => count + selected.length,\n        0\n      ),\n    [selectedFilters]\n  )\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\"\n        >\n          <ListFilter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n        <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <input\n              className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n              placeholder=\"Search filters...\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            />\n          </div>\n        </div>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-1\">\n          {visibleCategories.map((category) => (\n            <DropdownMenuSub key={category.id}>\n              <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n                <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                {category.label}\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"w-52 p-1\">\n                {category.options.map((option) => {\n                  const selected =\n                    selectedFilters[category.id]?.includes(option) ?? false\n\n                  return (\n                    <DropdownMenuItem\n                      key={option}\n                      className=\"cursor-pointer justify-between text-xs\"\n                      onSelect={(event) => {\n                        event.preventDefault()\n                        onToggleFilter(category.id, option)\n                      }}\n                    >\n                      {option}\n                      {selected ? (\n                        <span className=\"text-[10px] font-semibold text-brand-purple\">\n                          Applied\n                        </span>\n                      ) : null}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n          ))}\n\n          {visibleCategories.length === 0 ? (\n            <div className=\"p-2 text-center text-xs text-muted-foreground\">\n              No filters found\n            </div>\n          ) : null}\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":";AAiEQ,SAKE,KALF;AA/DR,YAAY,WAAW;AACvB,SAAS,YAAY,cAAc;AAEnC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAeA,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAE3C,QAAM,oBAAoB,MAAM,QAAQ,MAAM;AAC5C,UAAM,aAAa,MAAM,KAAK,EAAE,YAAY;AAC5C,QAAI,CAAC,YAAY;AACf,aAAO;AAAA,IACT;AAEA,WAAO,WAAW,OAAO,CAAC,aAAa;AACrC,UAAI,SAAS,MAAM,YAAY,EAAE,SAAS,UAAU,GAAG;AACrD,eAAO;AAAA,MACT;AAEA,aAAO,SAAS,QAAQ;AAAA,QAAK,CAAC,WAC5B,OAAO,YAAY,EAAE,SAAS,UAAU;AAAA,MAC1C;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,cAAc,MAAM;AAAA,IACxB,MACE,OAAO,OAAO,eAAe,EAAE;AAAA,MAC7B,CAAC,OAAO,aAAa,QAAQ,SAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACF,CAAC,eAAe;AAAA,EAClB;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QAEV;AAAA,8BAAC,cAAW,WAAU,eAAc;AAAA,UAAE;AAAA,UAErC,cAAc,IACb,oBAAC,UAAK,WAAU,0DACb,uBACH,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA,IACA,qBAAC,uBAAoB,OAAM,SAAQ,WAAU,iBAC3C;AAAA,0BAAC,SAAI,WAAU,2DACb,+BAAC,SAAI,WAAU,YACb;AAAA,4BAAC,UAAO,WAAU,8EAA6E;AAAA,QAC/F;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,aAAY;AAAA,YACZ,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,YAChD,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,YAC1C,WAAW,CAAC,UAAU,MAAM,gBAAgB;AAAA;AAAA,QAC9C;AAAA,SACF,GACF;AAAA,MAEA,qBAAC,SAAI,WAAU,qCACZ;AAAA,0BAAkB,IAAI,CAAC,aACtB,qBAAC,mBACC;AAAA,+BAAC,0BAAuB,WAAU,iCAChC;AAAA,gCAAC,SAAS,MAAT,EAAc,WAAU,0CAAyC;AAAA,YACjE,SAAS;AAAA,aACZ;AAAA,UACA,oBAAC,0BAAuB,WAAU,YAC/B,mBAAS,QAAQ,IAAI,CAAC,WAAW;AAtGlD;AAuGkB,kBAAM,YACJ,2BAAgB,SAAS,EAAE,MAA3B,mBAA8B,SAAS,YAAvC,YAAkD;AAEpD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,UAAU,CAAC,UAAU;AACnB,wBAAM,eAAe;AACrB,iCAAe,SAAS,IAAI,MAAM;AAAA,gBACpC;AAAA,gBAEC;AAAA;AAAA,kBACA,WACC,oBAAC,UAAK,WAAU,+CAA8C,qBAE9D,IACE;AAAA;AAAA;AAAA,cAZC;AAAA,YAaP;AAAA,UAEJ,CAAC,GACH;AAAA,aA5BoB,SAAS,EA6B/B,CACD;AAAA,QAEA,kBAAkB,WAAW,IAC5B,oBAAC,SAAI,WAAU,iDAAgD,8BAE/D,IACE;AAAA,SACN;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ListFilter, Search } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface DataTableFilterCategory {\n  id: string\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n  options: string[]\n}\n\ninterface DataTableFilterProps {\n  categories: DataTableFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n  className?: string\n}\n\nexport function DataTableFilter({\n  categories,\n  selectedFilters,\n  onToggleFilter,\n  className,\n}: DataTableFilterProps) {\n  const [query, setQuery] = React.useState(\"\")\n\n  const visibleCategories = React.useMemo(() => {\n    const normalized = query.trim().toLowerCase()\n    if (!normalized) {\n      return categories\n    }\n\n    return categories.filter((category) => {\n      if (category.label.toLowerCase().includes(normalized)) {\n        return true\n      }\n\n      return category.options.some((option) =>\n        option.toLowerCase().includes(normalized)\n      )\n    })\n  }, [categories, query])\n\n  const activeCount = React.useMemo(\n    () =>\n      Object.values(selectedFilters).reduce(\n        (count, selected) => count + selected.length,\n        0\n      ),\n    [selectedFilters]\n  )\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className={cn(\n            \"h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50\",\n            className\n          )}\n        >\n          <ListFilter className=\"h-3.5 w-3.5\" />\n          Filter\n          {activeCount > 0 ? (\n            <span className=\"rounded bg-muted px-1.5 py-0 text-[10px] font-semibold\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-[240px] p-0\">\n        <div className=\"sticky top-0 z-10 border-b border-border bg-popover p-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <input\n              className=\"h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted\"\n              placeholder=\"Search filters...\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            />\n          </div>\n        </div>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-1\">\n          {visibleCategories.map((category) => (\n            <DropdownMenuSub key={category.id}>\n              <DropdownMenuSubTrigger className=\"cursor-pointer py-1.5 text-xs\">\n                <category.icon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground\" />\n                {category.label}\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"w-52 p-1\">\n                {category.options.map((option) => {\n                  const selected =\n                    selectedFilters[category.id]?.includes(option) ?? false\n\n                  return (\n                    <DropdownMenuItem\n                      key={option}\n                      className=\"cursor-pointer justify-between text-xs\"\n                      onSelect={(event) => {\n                        event.preventDefault()\n                        onToggleFilter(category.id, option)\n                      }}\n                    >\n                      {option}\n                      {selected ? (\n                        <span className=\"text-[10px] font-semibold text-brand-purple\">\n                          Applied\n                        </span>\n                      ) : null}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n          ))}\n\n          {visibleCategories.length === 0 ? (\n            <div className=\"p-2 text-center text-xs text-muted-foreground\">\n              No filters found\n            </div>\n          ) : null}\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/empty-state.d.ts

@@ -5,7 +5,9 @@ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
     description: string;
     action?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    size?: 'sm' | 'lg';
 }
-declare function EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps): React.JSX.Element;
+declare function EmptyState({ icon, title, description, action, secondaryAction, size, className, ...rest }: EmptyStateProps): React.JSX.Element;
 
 export { EmptyState, type EmptyStateProps };

package/dist/components/empty-state.js

@@ -32,12 +32,21 @@ var __objRest = (source, exclude) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 function EmptyState(_a) {
-  var _b = _a, { icon, title, description, action, className } = _b, rest = __objRest(_b, ["icon", "title", "description", "action", "className"]);
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ "data-slot": "empty-state", className: cn("flex flex-col items-center justify-center py-24 gap-3", className) }, rest), { children: [
-    icon && /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-icon", className: "text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12", children: icon }),
-    title && /* @__PURE__ */ jsx("p", { "data-slot": "empty-state-title", className: "text-sm font-medium text-muted-foreground", children: title }),
-    /* @__PURE__ */ jsx("p", { "data-slot": "empty-state-description", className: "text-xs text-muted-foreground", children: description }),
-    action && /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-action", className: "mt-3", children: action })
+  var _b = _a, { icon, title, description, action, secondaryAction, size = "sm", className } = _b, rest = __objRest(_b, ["icon", "title", "description", "action", "secondaryAction", "size", "className"]);
+  const isLg = size === "lg";
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ "data-slot": "empty-state", className: cn("flex flex-col items-center justify-center py-24 gap-3 text-center", className) }, rest), { children: [
+    icon && /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-icon", className: cn(
+      "text-muted-foreground/30",
+      isLg ? "[&>svg]:w-16 [&>svg]:h-16 [&>img]:h-[140px] [&>img]:w-auto [&>img]:object-contain" : "[&>svg]:w-12 [&>svg]:h-12"
+    ), children: icon }),
+    title && /* @__PURE__ */ jsx("p", { "data-slot": "empty-state-title", className: cn(
+      isLg ? "text-base font-semibold text-foreground" : "text-sm font-medium text-muted-foreground"
+    ), children: title }),
+    /* @__PURE__ */ jsx("p", { "data-slot": "empty-state-description", className: cn(
+      isLg ? "text-sm text-muted-foreground" : "text-xs text-muted-foreground"
+    ), children: description }),
+    action && /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-action", className: "mt-3", children: action }),
+    secondaryAction && /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-secondary-action", className: action ? "mt-1" : "mt-3", children: secondaryAction })
   ] }));
 }
 export {

package/dist/components/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode\n  title?: string\n  description: string\n  action?: React.ReactNode\n}\n\nfunction EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps) {\n  return (\n    <div data-slot=\"empty-state\" className={cn(\"flex flex-col items-center justify-center py-24 gap-3\", className)} {...rest}>\n      {icon && (\n        <div data-slot=\"empty-state-icon\" className=\"text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12\">\n          {icon}\n        </div>\n      )}\n      {title && (\n        <p data-slot=\"empty-state-title\" className=\"text-sm font-medium text-muted-foreground\">\n          {title}\n        </p>\n      )}\n      <p data-slot=\"empty-state-description\" className=\"text-xs text-muted-foreground\">\n        {description}\n      </p>\n      {action && (\n        <div data-slot=\"empty-state-action\" className=\"mt-3\">\n          {action}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { EmptyState, type EmptyStateProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaI,SAEI,KAFJ;AAXJ,SAAS,UAAU;AASnB,SAAS,WAAW,IAA2E;AAA3E,eAAE,QAAM,OAAO,aAAa,QAAQ,UAXxD,IAWoB,IAAkD,iBAAlD,IAAkD,CAAhD,QAAM,SAAO,eAAa,UAAQ;AACtD,SACE,qBAAC,sCAAI,aAAU,eAAc,WAAW,GAAG,yDAAyD,SAAS,KAAO,OAAnH,EACE;AAAA,YACC,oBAAC,SAAI,aAAU,oBAAmB,WAAU,sDACzC,gBACH;AAAA,IAED,SACC,oBAAC,OAAE,aAAU,qBAAoB,WAAU,6CACxC,iBACH;AAAA,IAEF,oBAAC,OAAE,aAAU,2BAA0B,WAAU,iCAC9C,uBACH;AAAA,IACC,UACC,oBAAC,SAAI,aAAU,sBAAqB,WAAU,QAC3C,kBACH;AAAA,MAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode\n  title?: string\n  description: string\n  action?: React.ReactNode\n  secondaryAction?: React.ReactNode\n  size?: 'sm' | 'lg'\n}\n\nfunction EmptyState({ icon, title, description, action, secondaryAction, size = 'sm', className, ...rest }: EmptyStateProps) {\n  const isLg = size === 'lg'\n  return (\n    <div data-slot=\"empty-state\" className={cn(\"flex flex-col items-center justify-center py-24 gap-3 text-center\", className)} {...rest}>\n      {icon && (\n        <div data-slot=\"empty-state-icon\" className={cn(\n          \"text-muted-foreground/30\",\n          isLg\n            ? \"[&>svg]:w-16 [&>svg]:h-16 [&>img]:h-[140px] [&>img]:w-auto [&>img]:object-contain\"\n            : \"[&>svg]:w-12 [&>svg]:h-12\"\n        )}>\n          {icon}\n        </div>\n      )}\n      {title && (\n        <p data-slot=\"empty-state-title\" className={cn(\n          isLg ? \"text-base font-semibold text-foreground\" : \"text-sm font-medium text-muted-foreground\"\n        )}>\n          {title}\n        </p>\n      )}\n      <p data-slot=\"empty-state-description\" className={cn(\n        isLg ? \"text-sm text-muted-foreground\" : \"text-xs text-muted-foreground\"\n      )}>\n        {description}\n      </p>\n      {action && (\n        <div data-slot=\"empty-state-action\" className=\"mt-3\">\n          {action}\n        </div>\n      )}\n      {secondaryAction && (\n        <div data-slot=\"empty-state-secondary-action\" className={action ? \"mt-1\" : \"mt-3\"}>\n          {secondaryAction}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { EmptyState, type EmptyStateProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBI,SAEI,KAFJ;AAdJ,SAAS,UAAU;AAWnB,SAAS,WAAW,IAAyG;AAAzG,eAAE,QAAM,OAAO,aAAa,QAAQ,iBAAiB,OAAO,MAAM,UAbtF,IAaoB,IAAgF,iBAAhF,IAAgF,CAA9E,QAAM,SAAO,eAAa,UAAQ,mBAAiB,QAAa;AACpF,QAAM,OAAO,SAAS;AACtB,SACE,qBAAC,sCAAI,aAAU,eAAc,WAAW,GAAG,qEAAqE,SAAS,KAAO,OAA/H,EACE;AAAA,YACC,oBAAC,SAAI,aAAU,oBAAmB,WAAW;AAAA,MAC3C;AAAA,MACA,OACI,sFACA;AAAA,IACN,GACG,gBACH;AAAA,IAED,SACC,oBAAC,OAAE,aAAU,qBAAoB,WAAW;AAAA,MAC1C,OAAO,4CAA4C;AAAA,IACrD,GACG,iBACH;AAAA,IAEF,oBAAC,OAAE,aAAU,2BAA0B,WAAW;AAAA,MAChD,OAAO,kCAAkC;AAAA,IAC3C,GACG,uBACH;AAAA,IACC,UACC,oBAAC,SAAI,aAAU,sBAAqB,WAAU,QAC3C,kBACH;AAAA,IAED,mBACC,oBAAC,SAAI,aAAU,gCAA+B,WAAW,SAAS,SAAS,QACxE,2BACH;AAAA,MAEJ;AAEJ;","names":[]}

package/dist/components/entity-panel.d.ts

@@ -1,11 +1,20 @@
 import * as React from 'react';
 import { TimelineEvent } from './timeline-activity.js';
 
+type PanelMode = 'default' | 'wide' | 'fullscreen';
 declare function EntityPanel({ isOpen, onClose, children, }: {
     isOpen: boolean;
     onClose: (open: boolean) => void;
     children?: React.ReactNode;
 }): React.JSX.Element;
+declare function useEntityPanel(): {
+    isFullscreen: boolean;
+    setIsFullscreen: (v: boolean) => void;
+    panelMode: PanelMode;
+    setPanelMode: (mode: PanelMode) => void;
+    cyclePanelMode: () => void;
+    onClose: () => void;
+};
 declare function EntityPanelHeader({ icon, title, badgeLabel, subtitle: _subtitle, headerAction, }: {
     icon?: React.ReactNode;
     title: string;
@@ -66,4 +75,4 @@ declare function EntityDetails({ onClose: _onClose }: {
     onClose?: () => void;
 }): React.JSX.Element;
 
-export { type ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PotentialContacts, RecentActivity, SystemActivity };
+export { type ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, type PanelMode, PotentialContacts, RecentActivity, SystemActivity, useEntityPanel };

package/dist/components/entity-panel.js

@@ -30,23 +30,47 @@ function EntityPanel({
   onClose,
   children
 }) {
-  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  const [panelMode, setPanelMode] = React.useState("default");
+  const isFullscreen = panelMode === "fullscreen";
+  const setIsFullscreen = React.useCallback(
+    (val) => setPanelMode(val ? "fullscreen" : "default"),
+    []
+  );
+  const cyclePanelMode = React.useCallback(() => {
+    setPanelMode(
+      (prev) => prev === "default" ? "wide" : prev === "wide" ? "fullscreen" : "default"
+    );
+  }, []);
   React.useEffect(() => {
-    if (!isOpen) setIsFullscreen(false);
+    if (!isOpen) setPanelMode("default");
   }, [isOpen]);
   const handleClose = React.useCallback(() => {
-    setIsFullscreen(false);
+    setPanelMode("default");
     onClose(false);
   }, [onClose]);
-  const panelContent = /* @__PURE__ */ jsx(EntityPanelContext.Provider, { value: { isFullscreen, setIsFullscreen, onClose: handleClose }, children });
+  const panelContent = /* @__PURE__ */ jsx(
+    EntityPanelContext.Provider,
+    {
+      value: {
+        isFullscreen,
+        setIsFullscreen,
+        panelMode,
+        setPanelMode,
+        cyclePanelMode,
+        onClose: handleClose
+      },
+      children
+    }
+  );
   if (isFullscreen && isOpen) {
     return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-5", children: panelContent }) });
   }
+  const widthClass = panelMode === "wide" ? "sm:w-[800px] sm:max-w-[900px]" : "sm:w-[500px] sm:max-w-[600px]";
   return /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(
     SheetContent,
     {
       side: "right",
-      className: "w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col",
+      className: `w-full ${widthClass} overflow-hidden p-0 bg-background border-l border-border flex flex-col`,
       showCloseButton: false,
       children: [
         /* @__PURE__ */ jsx(SheetHeader, { className: "sr-only p-0", children: /* @__PURE__ */ jsx(SheetTitle, { children: "Entity panel" }) }),
@@ -59,6 +83,11 @@ const EntityPanelContext = React.createContext({
   isFullscreen: false,
   setIsFullscreen: () => {
   },
+  panelMode: "default",
+  setPanelMode: () => {
+  },
+  cyclePanelMode: () => {
+  },
   onClose: () => {
   }
 });
@@ -72,7 +101,8 @@ function EntityPanelHeader({
   subtitle: _subtitle,
   headerAction
 }) {
-  const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel();
+  const { panelMode, cyclePanelMode, onClose } = useEntityPanel();
+  const sizeButtonTitle = panelMode === "default" ? "Wide" : panelMode === "wide" ? "Fullscreen" : "Exit fullscreen";
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
       icon != null ? icon : /* @__PURE__ */ jsx(CalendarDays, { className: "w-5 h-5 text-muted-foreground shrink-0" }),
@@ -101,10 +131,10 @@ function EntityPanelHeader({
         "button",
         {
           type: "button",
-          onClick: () => setIsFullscreen(!isFullscreen),
+          onClick: cyclePanelMode,
           className: "p-1.5 rounded-md hover:bg-secondary transition-colors",
-          title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
-          children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" })
+          title: sizeButtonTitle,
+          children: panelMode === "fullscreen" ? /* @__PURE__ */ jsx(Minimize2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -579,6 +609,7 @@ export {
   EntitySection,
   PotentialContacts,
   RecentActivity,
-  SystemActivity
+  SystemActivity,
+  useEntityPanel
 };
 //# sourceMappingURL=entity-panel.js.map

package/dist/components/entity-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/entity-panel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"./sheet\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport {\n  Plus,\n  ExternalLink,\n  Mail,\n  FileText,\n  MessageCircle,\n  Briefcase,\n  Building2,\n  Users,\n  X,\n  ChevronDown,\n  ChevronUp,\n  Link as LinkIcon,\n  Maximize2,\n  Minimize2,\n  CalendarDays,\n} from \"lucide-react\"\nimport { TimelineActivity, type TimelineEvent } from \"./timeline-activity\"\n\n// ---------------------------------------------------------------------------\n// EntityPanel – supports both Sheet (side panel) and fullscreen modes\n// ---------------------------------------------------------------------------\n\nexport function EntityPanel({\n  isOpen,\n  onClose,\n  children,\n}: {\n  isOpen: boolean\n  onClose: (open: boolean) => void\n  children?: React.ReactNode\n}) {\n  const [isFullscreen, setIsFullscreen] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!isOpen) setIsFullscreen(false)\n  }, [isOpen])\n\n  const handleClose = React.useCallback(() => {\n    setIsFullscreen(false)\n    onClose(false)\n  }, [onClose])\n\n  const panelContent = (\n    <EntityPanelContext.Provider value={{ isFullscreen, setIsFullscreen, onClose: handleClose }}>\n      {children}\n    </EntityPanelContext.Provider>\n  )\n\n  if (isFullscreen && isOpen) {\n    return (\n      <div className=\"fixed inset-0 z-50 flex flex-col overflow-hidden bg-background\">\n        <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n      </div>\n    )\n  }\n\n  return (\n    <Sheet open={isOpen} onOpenChange={onClose}>\n      <SheetContent\n        side=\"right\"\n        className=\"w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col\"\n        showCloseButton={false}\n      >\n        <SheetHeader className=\"sr-only p-0\">\n          <SheetTitle>Entity panel</SheetTitle>\n        </SheetHeader>\n        <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n\nconst EntityPanelContext = React.createContext<{\n  isFullscreen: boolean\n  setIsFullscreen: (v: boolean) => void\n  onClose: () => void\n}>({\n  isFullscreen: false,\n  setIsFullscreen: () => {},\n  onClose: () => {},\n})\n\nfunction useEntityPanel() {\n  return React.useContext(EntityPanelContext)\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelHeader – MeetingDetail-inspired header bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelHeader({\n  icon,\n  title,\n  badgeLabel,\n  subtitle: _subtitle,\n  headerAction,\n}: {\n  icon?: React.ReactNode\n  title: string\n  badgeLabel?: string\n  subtitle?: string\n  headerAction?: React.ReactNode\n}) {\n  const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel()\n\n  return (\n    <div className=\"flex items-center justify-between mb-4\">\n      <div className=\"flex items-center gap-2 min-w-0\">\n        {icon ?? <CalendarDays className=\"w-5 h-5 text-muted-foreground shrink-0\" />}\n        <h2 className=\"text-[16px] font-semibold text-foreground truncate\">{title}</h2>\n        {badgeLabel && (\n          <Badge\n            variant=\"outline\"\n            className=\"text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0\"\n          >\n            {badgeLabel}\n          </Badge>\n        )}\n      </div>\n      <div className=\"flex items-center gap-1 shrink-0 ml-4 text-muted-foreground\">\n        {headerAction}\n        <button\n          type=\"button\"\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title=\"Copy Link\"\n        >\n          <LinkIcon className=\"w-4 h-4\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setIsFullscreen(!isFullscreen)}\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title={isFullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\n        >\n          {isFullscreen ? (\n            <Minimize2 className=\"w-4 h-4\" />\n          ) : (\n            <Maximize2 className=\"w-4 h-4\" />\n          )}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title=\"Close\"\n        >\n          <X className=\"w-4 h-4\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelTabs – Overview/Details tab bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelTabs({\n  tabs,\n  activeTab,\n  onTabChange,\n}: {\n  tabs: { id: string; label: string }[]\n  activeTab: string\n  onTabChange: (id: string) => void\n}) {\n  return (\n    <div className=\"flex items-center gap-5 border-b border-border mb-4\">\n      {tabs.map((tab) => (\n        <button\n          key={tab.id}\n          type=\"button\"\n          onClick={() => onTabChange(tab.id)}\n          className={`pb-2.5 text-[13px] font-medium border-b-2 transition-colors ${\n            activeTab === tab.id\n              ? \"border-primary text-foreground\"\n              : \"border-transparent text-muted-foreground hover:text-foreground\"\n          }`}\n        >\n          {tab.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityMetadataGrid – key/value metadata rows with icons\n// ---------------------------------------------------------------------------\n\nexport interface EntityMetadataField {\n  icon: React.ComponentType<{ className?: string }>\n  label: string\n  value: React.ReactNode\n}\n\nexport function EntityMetadataGrid({ fields }: { fields: EntityMetadataField[] }) {\n  return (\n    <div className=\"grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-2.5 gap-x-4 mb-6 text-sm\">\n      {fields.map((field, idx) => (\n        <React.Fragment key={idx}>\n          <div className=\"flex items-center gap-1.5 text-muted-foreground text-[13px]\">\n            <field.icon className=\"w-3.5 h-3.5 shrink-0\" />\n            <span>{field.label}</span>\n          </div>\n          <div className=\"text-foreground\">{field.value}</div>\n        </React.Fragment>\n      ))}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntitySection – clean section with title (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntitySection({\n  title,\n  children,\n  action,\n}: {\n  title: string\n  children: React.ReactNode\n  action?: React.ReactNode\n}) {\n  return (\n    <section className=\"mb-6\">\n      <div className=\"flex items-center justify-between mb-2.5\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n        {action}\n      </div>\n      {children}\n    </section>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityActivityItem – clean activity row (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntityActivityItem({\n  icon,\n  title,\n  description,\n  date,\n}: {\n  icon?: React.ReactNode\n  title: React.ReactNode\n  description?: React.ReactNode\n  date?: string\n}) {\n  return (\n    <div className=\"flex gap-3 text-[13px]\">\n      <div className=\"mt-0.5 text-muted-foreground shrink-0\">\n        {icon ?? <CalendarDays className=\"w-4 h-4\" />}\n      </div>\n      <div>\n        <p className=\"text-foreground leading-relaxed\">{title}</p>\n        {description && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{description}</p>}\n        {date && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{date}</p>}\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// SystemActivity – standalone section for bottom of entity panel\n// ---------------------------------------------------------------------------\n\nexport function SystemActivity() {\n  return (\n    <EntitySection title=\"System Activity\">\n      <div className=\"space-y-4\">\n        <EntityActivityItem\n          title={<><span className=\"font-medium\">System</span> enriched the lead</>}\n          date=\"Today at 10:15 AM\"\n        />\n        <EntityActivityItem\n          icon={<Mail className=\"w-4 h-4\" />}\n          title={<><span className=\"font-medium\">Jackie Lee</span> submitted website form</>}\n          date=\"Yesterday at 3:22 PM\"\n        />\n      </div>\n    </EntitySection>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// PotentialContacts – unchanged from original\n// ---------------------------------------------------------------------------\n\nexport interface EntityPanelBrandIcons {\n  linkedin?: string\n  gmail?: string\n  slack?: string\n  gdoc?: string\n}\n\nfunction EntityPanelBrandIcon({\n  src,\n  alt,\n  className,\n  fallback,\n}: {\n  src?: string\n  alt: string\n  className: string\n  fallback: React.ReactNode\n}) {\n  if (!src) {\n    return <>{fallback}</>\n  }\n\n  return <img src={src} alt={alt} className={className} />\n}\n\nexport function PotentialContacts({\n  icons,\n}: {\n  icons?: Pick<EntityPanelBrandIcons, \"linkedin\" | \"gmail\">\n}) {\n  return (\n    <div className=\"space-y-2.5 mb-6\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">Potential Contacts</h3>\n        <span className=\"text-xs text-muted-foreground\">3 identified</span>\n      </div>\n      <div className=\"space-y-0\">\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">Primary</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Jackie Lee</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">VP Finance</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.gmail}\n                alt=\"Gmail\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">78%</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Marcus Webb</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">CEO</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">65%</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Priya Shah</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">Head of Ops</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.gmail}\n                alt=\"Gmail\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// RecentActivity\n// ---------------------------------------------------------------------------\n\nexport type ActivityItem = TimelineEvent\n\nexport function RecentActivity({\n  title = \"Recent Activity\",\n  count = \"10 total events\",\n  filters = [],\n  items = [],\n}: {\n  title?: string\n  count?: string\n  filters?: string[]\n  items?: TimelineEvent[]\n}) {\n  return (\n    <div id=\"entity-recent-activity\" className=\"space-y-3 mb-6 scroll-m-20\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n        {count && <span className=\"text-xs text-muted-foreground\">{count}</span>}\n      </div>\n\n      {filters.length > 0 && (\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {filters.map((filter) => (\n            <Button\n              key={filter}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"h-7 text-xs rounded-md shadow-none font-medium border-border text-muted-foreground hover:text-foreground\"\n            >\n              {filter}\n            </Button>\n          ))}\n        </div>\n      )}\n\n      <div className=\"relative\">\n        <Input\n          placeholder=\"Search activity...\"\n          className=\"h-9 text-sm bg-background border-border shadow-none\"\n        />\n      </div>\n\n      <div>\n        <TimelineActivity events={items} />\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// ConnectedApps\n// ---------------------------------------------------------------------------\n\nexport function ConnectedApps({\n  icons,\n}: {\n  icons?: Pick<EntityPanelBrandIcons, \"slack\" | \"gdoc\">\n}) {\n  return (\n    <div className=\"space-y-2.5 mb-6\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">Connected Apps</h3>\n        <span className=\"text-xs text-muted-foreground\">3 connected</span>\n      </div>\n\n      <div className=\"space-y-0\">\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <EntityPanelBrandIcon\n                src={icons?.slack}\n                alt=\"Slack\"\n                className=\"w-4 h-4 object-contain\"\n                fallback={<MessageCircle className=\"w-4 h-4 text-muted-foreground\" />}\n              />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">#lunchclub-acmeco</p>\n              <p className=\"text-xs text-muted-foreground/60\">Slack Channel</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <EntityPanelBrandIcon\n                src={icons?.gdoc}\n                alt=\"Google Docs\"\n                className=\"w-4 h-4 object-contain\"\n                fallback={<FileText className=\"w-4 h-4 text-muted-foreground\" />}\n              />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Account Strategy Document</p>\n              <p className=\"text-xs text-muted-foreground/60\">Google Document</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <FileText className=\"w-4 h-4 text-foreground\" />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Customer Success Playbook</p>\n              <p className=\"text-xs text-muted-foreground/60\">Notion Page</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityDetails – updated with MeetingDetail-inspired metadata grid + tabs\n// ---------------------------------------------------------------------------\n\nexport function EntityDetails({ onClose: _onClose }: { onClose?: () => void }) {\n  const [activeTab, setActiveTab] = React.useState<\"overview\" | \"details\">(\"overview\")\n  const [showMore, setShowMore] = React.useState(false)\n\n  const leadFields: EntityMetadataField[] = [\n    { icon: Users, label: \"Lead Name\", value: <span className=\"font-medium\">Jackie Lee</span> },\n    { icon: Briefcase, label: \"Title\", value: <span className=\"font-medium\">VP Finance</span> },\n    { icon: Building2, label: \"Company\", value: <span className=\"font-medium\">CloudKitchen</span> },\n    { icon: Mail, label: \"Lead Source\", value: <span className=\"font-medium\">Inbound — Website form</span> },\n    {\n      icon: ({ className }) => (\n        <div className={className}>\n          <div className=\"w-3 h-3 rounded-full border-[2px] border-amber-500\" />\n        </div>\n      ),\n      label: \"Lead Status\",\n      value: (\n        <Badge variant=\"outline\" className=\"text-amber-700 border-amber-200 bg-amber-50 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n          New — Not Contacted\n        </Badge>\n      ),\n    },\n    { icon: Users, label: \"Lead Owner\", value: <span className=\"font-medium\">Sarah Johnson (SDR)</span> },\n    {\n      icon: Building2,\n      label: \"Industry\",\n      value: (\n        <Badge variant=\"outline\" className=\"text-blue-700 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n          Food Tech / Logistics\n        </Badge>\n      ),\n    },\n    { icon: Users, label: \"Company Size\", value: <span className=\"font-medium\">200-500 employees</span> },\n  ]\n\n  const visibleFields = showMore ? leadFields : leadFields.slice(0, 6)\n\n  return (\n    <div className=\"space-y-0\">\n      {/* Header */}\n      <EntityPanelHeader\n        icon={\n          <div className=\"w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-sm font-medium text-muted-foreground shrink-0\">\n            CK\n          </div>\n        }\n        title=\"CloudKitchen\"\n        badgeLabel=\"Lead\"\n        subtitle=\"Last enriched: Today at 10:15 AM\"\n      />\n\n      {/* Tabs */}\n      <EntityPanelTabs\n        tabs={[\n          { id: \"overview\", label: \"Overview\" },\n          { id: \"details\", label: \"Details\" },\n        ]}\n        activeTab={activeTab}\n        onTabChange={(id) => setActiveTab(id as \"overview\" | \"details\")}\n      />\n\n      {activeTab === \"overview\" ? (\n        <div className=\"space-y-0\">\n          {/* Metadata Grid */}\n          <EntityMetadataGrid fields={visibleFields} />\n\n          {leadFields.length > 6 && (\n            <button\n              onClick={() => setShowMore(!showMore)}\n              className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-6\"\n            >\n              {showMore ? \"See less\" : \"See more\"}\n              {showMore ? <ChevronUp className=\"w-3 h-3\" /> : <ChevronDown className=\"w-3 h-3\" />}\n            </button>\n          )}\n\n          {/* Enrichment as sections */}\n          <EntitySection title=\"Company Signals\">\n            <ul className=\"space-y-2\">\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Recent funding: $45M Series B, 3 months ago\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">1</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Hiring: 3 finance/treasury roles in last 30 days\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Market expansion: 8 &rarr; 15 US markets planned\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">3</span>\n                </span>\n              </li>\n            </ul>\n          </EntitySection>\n\n          <EntitySection title=\"Contact Signals (Jackie Lee)\">\n            <ul className=\"space-y-2\">\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Started role: 12 days ago\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Previous: Deel — operations/finance\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  LinkedIn connections to existing customers: 2 detected\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n            </ul>\n          </EntitySection>\n\n          <SourcesToggle />\n        </div>\n      ) : (\n        <div className=\"space-y-0\">\n          <EntitySection title=\"Estimated Tech Stack\">\n            <div className=\"space-y-2\">\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Banking:</span>\n                <span className=\"text-muted-foreground/50 italic\">Unknown</span>\n              </div>\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Corporate Cards:</span>\n                <span className=\"text-foreground font-medium\">\n                  Brex <span className=\"text-muted-foreground font-normal\">(from job posting requirements)</span>\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n                </span>\n              </div>\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Payroll:</span>\n                <span className=\"text-foreground font-medium\">\n                  Gusto <span className=\"text-muted-foreground font-normal\">(from LinkedIn integrations)</span>\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">5</span>\n                </span>\n              </div>\n            </div>\n          </EntitySection>\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// SourcesToggle – collapsible sources list\n// ---------------------------------------------------------------------------\n\nfunction SourcesToggle() {\n  const [expanded, setExpanded] = React.useState(false)\n\n  const sources = [\n    { name: \"Crunchbase\", type: \"Funding data\", lastPull: \"2h ago\" },\n    { name: \"LinkedIn\", type: \"People & company\", lastPull: \"12h ago\" },\n    { name: \"LinkedIn Jobs\", type: \"Hiring signals\", lastPull: \"1d ago\" },\n    { name: \"PR Newswire\", type: \"News & press\", lastPull: \"6h ago\" },\n    { name: \"Clearbit\", type: \"Tech stack & firmographics\", lastPull: \"2h ago\" },\n  ]\n\n  return (\n    <div className=\"mb-6\">\n      <button\n        onClick={() => setExpanded(!expanded)}\n        className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition-colors\"\n      >\n        Sources\n        <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${expanded ? \"rotate-180\" : \"\"}`} />\n      </button>\n\n      {expanded && (\n        <div className=\"pt-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n          {sources.map((src, idx) => (\n            <div key={idx} className=\"flex items-center justify-between text-xs text-muted-foreground py-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"inline-flex items-center justify-center w-4 h-4 text-[9px] font-medium text-muted-foreground/50 border border-border rounded-full\">\n                  {idx + 1}\n                </span>\n                <span className=\"font-medium text-foreground\">{src.name}</span>\n                <span className=\"text-muted-foreground/60\">&middot;</span>\n                <span>{src.type}</span>\n              </div>\n              <span className=\"text-muted-foreground/50\">{src.lastPull}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/entity-panel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"./sheet\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport {\n  Plus,\n  ExternalLink,\n  Mail,\n  FileText,\n  MessageCircle,\n  Briefcase,\n  Building2,\n  Users,\n  X,\n  ChevronDown,\n  ChevronUp,\n  Link as LinkIcon,\n  Maximize2,\n  Minimize2,\n  CalendarDays,\n} from \"lucide-react\"\nimport { TimelineActivity, type TimelineEvent } from \"./timeline-activity\"\n\n// ---------------------------------------------------------------------------\n// EntityPanel -- supports Sheet (side panel), wide, and fullscreen modes\n// ---------------------------------------------------------------------------\n\nexport type PanelMode = 'default' | 'wide' | 'fullscreen'\n\nexport function EntityPanel({\n  isOpen,\n  onClose,\n  children,\n}: {\n  isOpen: boolean\n  onClose: (open: boolean) => void\n  children?: React.ReactNode\n}) {\n  const [panelMode, setPanelMode] = React.useState<PanelMode>('default')\n\n  // Backward-compatible derived values\n  const isFullscreen = panelMode === 'fullscreen'\n  const setIsFullscreen = React.useCallback(\n    (val: boolean) => setPanelMode(val ? 'fullscreen' : 'default'),\n    [],\n  )\n\n  const cyclePanelMode = React.useCallback(() => {\n    setPanelMode((prev) =>\n      prev === 'default' ? 'wide' : prev === 'wide' ? 'fullscreen' : 'default',\n    )\n  }, [])\n\n  React.useEffect(() => {\n    if (!isOpen) setPanelMode('default')\n  }, [isOpen])\n\n  const handleClose = React.useCallback(() => {\n    setPanelMode('default')\n    onClose(false)\n  }, [onClose])\n\n  const panelContent = (\n    <EntityPanelContext.Provider\n      value={{\n        isFullscreen,\n        setIsFullscreen,\n        panelMode,\n        setPanelMode,\n        cyclePanelMode,\n        onClose: handleClose,\n      }}\n    >\n      {children}\n    </EntityPanelContext.Provider>\n  )\n\n  if (isFullscreen && isOpen) {\n    return (\n      <div className=\"fixed inset-0 z-50 flex flex-col overflow-hidden bg-background\">\n        <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n      </div>\n    )\n  }\n\n  const widthClass =\n    panelMode === 'wide'\n      ? 'sm:w-[800px] sm:max-w-[900px]'\n      : 'sm:w-[500px] sm:max-w-[600px]'\n\n  return (\n    <Sheet open={isOpen} onOpenChange={onClose}>\n      <SheetContent\n        side=\"right\"\n        className={`w-full ${widthClass} overflow-hidden p-0 bg-background border-l border-border flex flex-col`}\n        showCloseButton={false}\n      >\n        <SheetHeader className=\"sr-only p-0\">\n          <SheetTitle>Entity panel</SheetTitle>\n        </SheetHeader>\n        <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n\nconst EntityPanelContext = React.createContext<{\n  isFullscreen: boolean\n  setIsFullscreen: (v: boolean) => void\n  panelMode: PanelMode\n  setPanelMode: (mode: PanelMode) => void\n  cyclePanelMode: () => void\n  onClose: () => void\n}>({\n  isFullscreen: false,\n  setIsFullscreen: () => {},\n  panelMode: 'default',\n  setPanelMode: () => {},\n  cyclePanelMode: () => {},\n  onClose: () => {},\n})\n\nexport function useEntityPanel() {\n  return React.useContext(EntityPanelContext)\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelHeader – MeetingDetail-inspired header bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelHeader({\n  icon,\n  title,\n  badgeLabel,\n  subtitle: _subtitle,\n  headerAction,\n}: {\n  icon?: React.ReactNode\n  title: string\n  badgeLabel?: string\n  subtitle?: string\n  headerAction?: React.ReactNode\n}) {\n  const { panelMode, cyclePanelMode, onClose } = useEntityPanel()\n\n  const sizeButtonTitle =\n    panelMode === 'default' ? 'Wide' : panelMode === 'wide' ? 'Fullscreen' : 'Exit fullscreen'\n\n  return (\n    <div className=\"flex items-center justify-between mb-4\">\n      <div className=\"flex items-center gap-2 min-w-0\">\n        {icon ?? <CalendarDays className=\"w-5 h-5 text-muted-foreground shrink-0\" />}\n        <h2 className=\"text-[16px] font-semibold text-foreground truncate\">{title}</h2>\n        {badgeLabel && (\n          <Badge\n            variant=\"outline\"\n            className=\"text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0\"\n          >\n            {badgeLabel}\n          </Badge>\n        )}\n      </div>\n      <div className=\"flex items-center gap-1 shrink-0 ml-4 text-muted-foreground\">\n        {headerAction}\n        <button\n          type=\"button\"\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title=\"Copy Link\"\n        >\n          <LinkIcon className=\"w-4 h-4\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={cyclePanelMode}\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title={sizeButtonTitle}\n        >\n          {panelMode === 'fullscreen' ? (\n            <Minimize2 className=\"w-4 h-4\" />\n          ) : (\n            <Maximize2 className=\"w-4 h-4\" />\n          )}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n          title=\"Close\"\n        >\n          <X className=\"w-4 h-4\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelTabs – Overview/Details tab bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelTabs({\n  tabs,\n  activeTab,\n  onTabChange,\n}: {\n  tabs: { id: string; label: string }[]\n  activeTab: string\n  onTabChange: (id: string) => void\n}) {\n  return (\n    <div className=\"flex items-center gap-5 border-b border-border mb-4\">\n      {tabs.map((tab) => (\n        <button\n          key={tab.id}\n          type=\"button\"\n          onClick={() => onTabChange(tab.id)}\n          className={`pb-2.5 text-[13px] font-medium border-b-2 transition-colors ${\n            activeTab === tab.id\n              ? \"border-primary text-foreground\"\n              : \"border-transparent text-muted-foreground hover:text-foreground\"\n          }`}\n        >\n          {tab.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityMetadataGrid – key/value metadata rows with icons\n// ---------------------------------------------------------------------------\n\nexport interface EntityMetadataField {\n  icon: React.ComponentType<{ className?: string }>\n  label: string\n  value: React.ReactNode\n}\n\nexport function EntityMetadataGrid({ fields }: { fields: EntityMetadataField[] }) {\n  return (\n    <div className=\"grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-2.5 gap-x-4 mb-6 text-sm\">\n      {fields.map((field, idx) => (\n        <React.Fragment key={idx}>\n          <div className=\"flex items-center gap-1.5 text-muted-foreground text-[13px]\">\n            <field.icon className=\"w-3.5 h-3.5 shrink-0\" />\n            <span>{field.label}</span>\n          </div>\n          <div className=\"text-foreground\">{field.value}</div>\n        </React.Fragment>\n      ))}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntitySection – clean section with title (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntitySection({\n  title,\n  children,\n  action,\n}: {\n  title: string\n  children: React.ReactNode\n  action?: React.ReactNode\n}) {\n  return (\n    <section className=\"mb-6\">\n      <div className=\"flex items-center justify-between mb-2.5\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n        {action}\n      </div>\n      {children}\n    </section>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityActivityItem – clean activity row (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntityActivityItem({\n  icon,\n  title,\n  description,\n  date,\n}: {\n  icon?: React.ReactNode\n  title: React.ReactNode\n  description?: React.ReactNode\n  date?: string\n}) {\n  return (\n    <div className=\"flex gap-3 text-[13px]\">\n      <div className=\"mt-0.5 text-muted-foreground shrink-0\">\n        {icon ?? <CalendarDays className=\"w-4 h-4\" />}\n      </div>\n      <div>\n        <p className=\"text-foreground leading-relaxed\">{title}</p>\n        {description && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{description}</p>}\n        {date && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{date}</p>}\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// SystemActivity – standalone section for bottom of entity panel\n// ---------------------------------------------------------------------------\n\nexport function SystemActivity() {\n  return (\n    <EntitySection title=\"System Activity\">\n      <div className=\"space-y-4\">\n        <EntityActivityItem\n          title={<><span className=\"font-medium\">System</span> enriched the lead</>}\n          date=\"Today at 10:15 AM\"\n        />\n        <EntityActivityItem\n          icon={<Mail className=\"w-4 h-4\" />}\n          title={<><span className=\"font-medium\">Jackie Lee</span> submitted website form</>}\n          date=\"Yesterday at 3:22 PM\"\n        />\n      </div>\n    </EntitySection>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// PotentialContacts – unchanged from original\n// ---------------------------------------------------------------------------\n\nexport interface EntityPanelBrandIcons {\n  linkedin?: string\n  gmail?: string\n  slack?: string\n  gdoc?: string\n}\n\nfunction EntityPanelBrandIcon({\n  src,\n  alt,\n  className,\n  fallback,\n}: {\n  src?: string\n  alt: string\n  className: string\n  fallback: React.ReactNode\n}) {\n  if (!src) {\n    return <>{fallback}</>\n  }\n\n  return <img src={src} alt={alt} className={className} />\n}\n\nexport function PotentialContacts({\n  icons,\n}: {\n  icons?: Pick<EntityPanelBrandIcons, \"linkedin\" | \"gmail\">\n}) {\n  return (\n    <div className=\"space-y-2.5 mb-6\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">Potential Contacts</h3>\n        <span className=\"text-xs text-muted-foreground\">3 identified</span>\n      </div>\n      <div className=\"space-y-0\">\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">Primary</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Jackie Lee</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">VP Finance</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.gmail}\n                alt=\"Gmail\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">78%</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Marcus Webb</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">CEO</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-2.5 min-w-0\">\n            <Badge variant=\"outline\" className=\"bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">65%</Badge>\n            <span className=\"font-medium text-sm text-foreground truncate\">Priya Shah</span>\n            <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n            <span className=\"text-muted-foreground text-sm truncate\">Head of Ops</span>\n          </div>\n          <div className=\"flex items-center gap-1 shrink-0\">\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.linkedin}\n                alt=\"LinkedIn\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n              <EntityPanelBrandIcon\n                src={icons?.gmail}\n                alt=\"Gmail\"\n                className=\"w-3.5 h-3.5 object-contain\"\n                fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n              />\n            </button>\n            <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n              <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// RecentActivity\n// ---------------------------------------------------------------------------\n\nexport type ActivityItem = TimelineEvent\n\nexport function RecentActivity({\n  title = \"Recent Activity\",\n  count = \"10 total events\",\n  filters = [],\n  items = [],\n}: {\n  title?: string\n  count?: string\n  filters?: string[]\n  items?: TimelineEvent[]\n}) {\n  return (\n    <div id=\"entity-recent-activity\" className=\"space-y-3 mb-6 scroll-m-20\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n        {count && <span className=\"text-xs text-muted-foreground\">{count}</span>}\n      </div>\n\n      {filters.length > 0 && (\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {filters.map((filter) => (\n            <Button\n              key={filter}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"h-7 text-xs rounded-md shadow-none font-medium border-border text-muted-foreground hover:text-foreground\"\n            >\n              {filter}\n            </Button>\n          ))}\n        </div>\n      )}\n\n      <div className=\"relative\">\n        <Input\n          placeholder=\"Search activity...\"\n          className=\"h-9 text-sm bg-background border-border shadow-none\"\n        />\n      </div>\n\n      <div>\n        <TimelineActivity events={items} />\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// ConnectedApps\n// ---------------------------------------------------------------------------\n\nexport function ConnectedApps({\n  icons,\n}: {\n  icons?: Pick<EntityPanelBrandIcons, \"slack\" | \"gdoc\">\n}) {\n  return (\n    <div className=\"space-y-2.5 mb-6\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">Connected Apps</h3>\n        <span className=\"text-xs text-muted-foreground\">3 connected</span>\n      </div>\n\n      <div className=\"space-y-0\">\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <EntityPanelBrandIcon\n                src={icons?.slack}\n                alt=\"Slack\"\n                className=\"w-4 h-4 object-contain\"\n                fallback={<MessageCircle className=\"w-4 h-4 text-muted-foreground\" />}\n              />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">#lunchclub-acmeco</p>\n              <p className=\"text-xs text-muted-foreground/60\">Slack Channel</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <EntityPanelBrandIcon\n                src={icons?.gdoc}\n                alt=\"Google Docs\"\n                className=\"w-4 h-4 object-contain\"\n                fallback={<FileText className=\"w-4 h-4 text-muted-foreground\" />}\n              />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Account Strategy Document</p>\n              <p className=\"text-xs text-muted-foreground/60\">Google Document</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n          <div className=\"flex items-center gap-3 min-w-0\">\n            <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n              <FileText className=\"w-4 h-4 text-foreground\" />\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Customer Success Playbook</p>\n              <p className=\"text-xs text-muted-foreground/60\">Notion Page</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1.5 shrink-0\">\n            <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n            <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// EntityDetails – updated with MeetingDetail-inspired metadata grid + tabs\n// ---------------------------------------------------------------------------\n\nexport function EntityDetails({ onClose: _onClose }: { onClose?: () => void }) {\n  const [activeTab, setActiveTab] = React.useState<\"overview\" | \"details\">(\"overview\")\n  const [showMore, setShowMore] = React.useState(false)\n\n  const leadFields: EntityMetadataField[] = [\n    { icon: Users, label: \"Lead Name\", value: <span className=\"font-medium\">Jackie Lee</span> },\n    { icon: Briefcase, label: \"Title\", value: <span className=\"font-medium\">VP Finance</span> },\n    { icon: Building2, label: \"Company\", value: <span className=\"font-medium\">CloudKitchen</span> },\n    { icon: Mail, label: \"Lead Source\", value: <span className=\"font-medium\">Inbound — Website form</span> },\n    {\n      icon: ({ className }) => (\n        <div className={className}>\n          <div className=\"w-3 h-3 rounded-full border-[2px] border-amber-500\" />\n        </div>\n      ),\n      label: \"Lead Status\",\n      value: (\n        <Badge variant=\"outline\" className=\"text-amber-700 border-amber-200 bg-amber-50 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n          New — Not Contacted\n        </Badge>\n      ),\n    },\n    { icon: Users, label: \"Lead Owner\", value: <span className=\"font-medium\">Sarah Johnson (SDR)</span> },\n    {\n      icon: Building2,\n      label: \"Industry\",\n      value: (\n        <Badge variant=\"outline\" className=\"text-blue-700 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n          Food Tech / Logistics\n        </Badge>\n      ),\n    },\n    { icon: Users, label: \"Company Size\", value: <span className=\"font-medium\">200-500 employees</span> },\n  ]\n\n  const visibleFields = showMore ? leadFields : leadFields.slice(0, 6)\n\n  return (\n    <div className=\"space-y-0\">\n      {/* Header */}\n      <EntityPanelHeader\n        icon={\n          <div className=\"w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-sm font-medium text-muted-foreground shrink-0\">\n            CK\n          </div>\n        }\n        title=\"CloudKitchen\"\n        badgeLabel=\"Lead\"\n        subtitle=\"Last enriched: Today at 10:15 AM\"\n      />\n\n      {/* Tabs */}\n      <EntityPanelTabs\n        tabs={[\n          { id: \"overview\", label: \"Overview\" },\n          { id: \"details\", label: \"Details\" },\n        ]}\n        activeTab={activeTab}\n        onTabChange={(id) => setActiveTab(id as \"overview\" | \"details\")}\n      />\n\n      {activeTab === \"overview\" ? (\n        <div className=\"space-y-0\">\n          {/* Metadata Grid */}\n          <EntityMetadataGrid fields={visibleFields} />\n\n          {leadFields.length > 6 && (\n            <button\n              onClick={() => setShowMore(!showMore)}\n              className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-6\"\n            >\n              {showMore ? \"See less\" : \"See more\"}\n              {showMore ? <ChevronUp className=\"w-3 h-3\" /> : <ChevronDown className=\"w-3 h-3\" />}\n            </button>\n          )}\n\n          {/* Enrichment as sections */}\n          <EntitySection title=\"Company Signals\">\n            <ul className=\"space-y-2\">\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Recent funding: $45M Series B, 3 months ago\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">1</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Hiring: 3 finance/treasury roles in last 30 days\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Market expansion: 8 &rarr; 15 US markets planned\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">3</span>\n                </span>\n              </li>\n            </ul>\n          </EntitySection>\n\n          <EntitySection title=\"Contact Signals (Jackie Lee)\">\n            <ul className=\"space-y-2\">\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Started role: 12 days ago\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  Previous: Deel — operations/finance\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n              <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span>\n                  LinkedIn connections to existing customers: 2 detected\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n                </span>\n              </li>\n            </ul>\n          </EntitySection>\n\n          <SourcesToggle />\n        </div>\n      ) : (\n        <div className=\"space-y-0\">\n          <EntitySection title=\"Estimated Tech Stack\">\n            <div className=\"space-y-2\">\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Banking:</span>\n                <span className=\"text-muted-foreground/50 italic\">Unknown</span>\n              </div>\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Corporate Cards:</span>\n                <span className=\"text-foreground font-medium\">\n                  Brex <span className=\"text-muted-foreground font-normal\">(from job posting requirements)</span>\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n                </span>\n              </div>\n              <div className=\"flex items-start gap-2 text-sm\">\n                <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n                <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Payroll:</span>\n                <span className=\"text-foreground font-medium\">\n                  Gusto <span className=\"text-muted-foreground font-normal\">(from LinkedIn integrations)</span>\n                  <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">5</span>\n                </span>\n              </div>\n            </div>\n          </EntitySection>\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// SourcesToggle – collapsible sources list\n// ---------------------------------------------------------------------------\n\nfunction SourcesToggle() {\n  const [expanded, setExpanded] = React.useState(false)\n\n  const sources = [\n    { name: \"Crunchbase\", type: \"Funding data\", lastPull: \"2h ago\" },\n    { name: \"LinkedIn\", type: \"People & company\", lastPull: \"12h ago\" },\n    { name: \"LinkedIn Jobs\", type: \"Hiring signals\", lastPull: \"1d ago\" },\n    { name: \"PR Newswire\", type: \"News & press\", lastPull: \"6h ago\" },\n    { name: \"Clearbit\", type: \"Tech stack & firmographics\", lastPull: \"2h ago\" },\n  ]\n\n  return (\n    <div className=\"mb-6\">\n      <button\n        onClick={() => setExpanded(!expanded)}\n        className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition-colors\"\n      >\n        Sources\n        <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${expanded ? \"rotate-180\" : \"\"}`} />\n      </button>\n\n      {expanded && (\n        <div className=\"pt-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n          {sources.map((src, idx) => (\n            <div key={idx} className=\"flex items-center justify-between text-xs text-muted-foreground py-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"inline-flex items-center justify-center w-4 h-4 text-[9px] font-medium text-muted-foreground/50 border border-border rounded-full\">\n                  {idx + 1}\n                </span>\n                <span className=\"font-medium text-foreground\">{src.name}</span>\n                <span className=\"text-muted-foreground/60\">&middot;</span>\n                <span>{src.type}</span>\n              </div>\n              <span className=\"text-muted-foreground/50\">{src.lastPull}</span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/virtualized-data-table.d.ts

@@ -19,11 +19,12 @@ interface VirtualizedDataTableProps<TData> {
     onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
     columnVisibility?: VisibilityState;
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    isLoading?: boolean;
     emptyIcon?: React.ReactNode;
     emptyMessage?: string;
     emptyDescription?: string;
     className?: string;
 }
-declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
+declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
 
 export { VirtualizedDataTable, type VirtualizedDataTableProps };

package/dist/components/virtualized-data-table.js

@@ -48,6 +48,7 @@ function VirtualizedDataTable({
   onColumnFiltersChange,
   columnVisibility,
   onColumnVisibilityChange,
+  isLoading,
   emptyIcon,
   emptyMessage = "No rows found",
   emptyDescription = "Try adjusting your filters",
@@ -219,7 +220,10 @@ function VirtualizedDataTable({
               );
             })
           }
-        ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-muted-foreground py-20", children: [
+        ) : isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-muted-foreground py-20", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-7 w-7 animate-spin opacity-60" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Loading..." })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-muted-foreground py-20", children: [
           emptyIcon != null ? emptyIcon : /* @__PURE__ */ jsx(SearchX, { className: "h-7 w-7 opacity-40" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: emptyMessage }),
           /* @__PURE__ */ jsx("p", { className: "text-xs", children: emptyDescription })

package/dist/components/virtualized-data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n  type SortingState,\n  type ColumnFiltersState,\n  type VisibilityState,\n  type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: ColumnDef<TData, any>[]\n  data: TData[]\n\n  // Virtualization\n  height?: number | string\n  estimateRowHeight?: number\n  overscan?: number\n\n  // Row interaction\n  onRowClick?: (row: TData) => void\n  getRowId?: (original: TData, index: number) => string\n\n  // Infinite scroll\n  onReachBottom?: () => void\n  reachBottomThreshold?: number\n  hasMore?: boolean\n  isFetchingMore?: boolean\n\n  // Server-driven state (controlled) — omit for internal state\n  sorting?: SortingState\n  onSortingChange?: OnChangeFn<SortingState>\n  columnFilters?: ColumnFiltersState\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n  columnVisibility?: VisibilityState\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n  // Empty state\n  emptyIcon?: React.ReactNode\n  emptyMessage?: string\n  emptyDescription?: string\n\n  // Styling\n  className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n  columns,\n  data,\n  height = 600,\n  estimateRowHeight = 48,\n  overscan = 8,\n  onRowClick,\n  getRowId,\n  onReachBottom,\n  reachBottomThreshold = 5,\n  hasMore = true,\n  isFetchingMore,\n  sorting,\n  onSortingChange,\n  columnFilters,\n  onColumnFiltersChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  emptyIcon,\n  emptyMessage = \"No rows found\",\n  emptyDescription = \"Try adjusting your filters\",\n  className,\n}: VirtualizedDataTableProps<TData>) {\n  // Controlled/uncontrolled state for sorting\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n  const resolvedSorting = sorting ?? internalSorting\n  const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n  // Controlled/uncontrolled state for column filters\n  const [internalColumnFilters, setInternalColumnFilters] =\n    React.useState<ColumnFiltersState>([])\n  const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n  const resolvedOnColumnFiltersChange =\n    onColumnFiltersChange ?? setInternalColumnFilters\n\n  // Controlled/uncontrolled state for column visibility\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n  const resolvedOnColumnVisibilityChange =\n    onColumnVisibilityChange ?? setInternalColumnVisibility\n\n  // TanStack Table setup\n  const table = useReactTable({\n    data,\n    columns,\n    ...(getRowId ? { getRowId } : {}),\n    state: {\n      sorting: resolvedSorting,\n      columnFilters: resolvedColumnFilters,\n      columnVisibility: resolvedColumnVisibility,\n    },\n    onSortingChange: resolvedOnSortingChange,\n    onColumnFiltersChange: resolvedOnColumnFiltersChange,\n    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n    manualSorting: true,\n    manualFiltering: true,\n    manualPagination: true,\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  // Virtualizer setup\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => estimateRowHeight,\n    overscan,\n    measureElement: (element) => element.getBoundingClientRect().height,\n  })\n\n  // Infinite scroll detection\n  const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n  // Derive a stable primitive for the last visible virtual-item index so the\n  // effect below doesn't re-run on every render (getVirtualItems() returns a\n  // new array reference each call).\n  const virtualItems = virtualizer.getVirtualItems()\n  const lastVirtualItemIndex =\n    virtualItems.length > 0\n      ? virtualItems[virtualItems.length - 1].index\n      : -1\n\n  React.useEffect(() => {\n    if (!onReachBottom || isFetchingMore || hasMore === false) return\n    if (lastVirtualItemIndex < 0) return\n    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n    // Prevent re-firing until data.length changes (i.e. new page loaded).\n    if (lastTriggeredDataLengthRef.current === data.length) return\n    lastTriggeredDataLengthRef.current = data.length\n\n    onReachBottom()\n  }, [\n    lastVirtualItemIndex,\n    rows.length,\n    data.length,\n    onReachBottom,\n    isFetchingMore,\n    hasMore,\n    reachBottomThreshold,\n  ])\n\n  return (\n    <div className={cn(\n      \"w-full\",\n      typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n      className,\n    )}>\n      <div\n        ref={scrollContainerRef}\n        className=\"relative overflow-auto\"\n        style={{\n          height: typeof height === \"number\" ? `${height}px` : height,\n          contain: \"strict\",\n        }}\n        role=\"table\"\n        aria-rowcount={data.length}\n        aria-colcount={table.getVisibleLeafColumns().length}\n      >\n        {/* Sticky header */}\n        <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n          {table.getHeaderGroups().map((headerGroup) => (\n            <div\n              key={headerGroup.id}\n              className=\"flex w-max min-w-full border-b border-border/50\"\n              role=\"row\"\n            >\n              {headerGroup.headers.map((header, colIdx) => (\n                <div\n                  key={header.id}\n                  className=\"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap\"\n                  style={{\n                    width: header.getSize(),\n                    minWidth: header.getSize(),\n                  }}\n                  role=\"columnheader\"\n                  aria-colindex={colIdx + 1}\n                  aria-sort={\n                    header.column.getIsSorted() === \"asc\"\n                      ? \"ascending\"\n                      : header.column.getIsSorted() === \"desc\"\n                        ? \"descending\"\n                        : header.column.getCanSort()\n                          ? \"none\"\n                          : undefined\n                  }\n                >\n                  {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                      onClick={header.column.getToggleSortingHandler()}\n                    >\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )}\n                      {header.column.getIsSorted() === \"asc\" ? (\n                        <ArrowUp className=\"w-3 h-3\" />\n                      ) : header.column.getIsSorted() === \"desc\" ? (\n                        <ArrowDown className=\"w-3 h-3\" />\n                      ) : (\n                        <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                      )}\n                    </button>\n                  ) : (\n                    flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n\n        {/* Virtualized body or empty state */}\n        {rows.length > 0 ? (\n          <div\n            role=\"rowgroup\"\n            style={{\n              height: virtualizer.getTotalSize(),\n              width: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            {virtualizer.getVirtualItems().map((virtualRow) => {\n              const row = rows[virtualRow.index]\n              return (\n                <div\n                  key={row.id}\n                  data-index={virtualRow.index}\n                  ref={virtualizer.measureElement}\n                  className={cn(\n                    \"absolute left-0 w-max min-w-full flex group transition-colors\",\n                    onRowClick && \"cursor-pointer\",\n                  )}\n                  style={{\n                    transform: `translateY(${virtualRow.start}px)`,\n                  }}\n                  role=\"row\"\n                  aria-rowindex={virtualRow.index + 2}\n                  onClick={() => onRowClick?.(row.original)}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault()\n                            onRowClick(row.original)\n                          }\n                        }\n                      : undefined\n                  }\n                >\n                  {row.getVisibleCells().map((cell, colIdx) => (\n                    <div\n                      key={cell.id}\n                      className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n                      style={{\n                        width: cell.column.getSize(),\n                        minWidth: cell.column.getSize(),\n                      }}\n                      role=\"cell\"\n                      aria-colindex={colIdx + 1}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </div>\n                  ))}\n                </div>\n              )\n            })}\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n            {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n            <p className=\"text-sm font-medium\">{emptyMessage}</p>\n            <p className=\"text-xs\">{emptyDescription}</p>\n          </div>\n        )}\n\n        {/* Loading indicator */}\n        {isFetchingMore && (\n          <div className=\"flex items-center justify-center py-4\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n  type SortingState,\n  type ColumnFiltersState,\n  type VisibilityState,\n  type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: ColumnDef<TData, any>[]\n  data: TData[]\n\n  // Virtualization\n  height?: number | string\n  estimateRowHeight?: number\n  overscan?: number\n\n  // Row interaction\n  onRowClick?: (row: TData) => void\n  getRowId?: (original: TData, index: number) => string\n\n  // Infinite scroll\n  onReachBottom?: () => void\n  reachBottomThreshold?: number\n  hasMore?: boolean\n  isFetchingMore?: boolean\n\n  // Server-driven state (controlled) — omit for internal state\n  sorting?: SortingState\n  onSortingChange?: OnChangeFn<SortingState>\n  columnFilters?: ColumnFiltersState\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n  columnVisibility?: VisibilityState\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n  // Loading / Empty state\n  isLoading?: boolean\n  emptyIcon?: React.ReactNode\n  emptyMessage?: string\n  emptyDescription?: string\n\n  // Styling\n  className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n  columns,\n  data,\n  height = 600,\n  estimateRowHeight = 48,\n  overscan = 8,\n  onRowClick,\n  getRowId,\n  onReachBottom,\n  reachBottomThreshold = 5,\n  hasMore = true,\n  isFetchingMore,\n  sorting,\n  onSortingChange,\n  columnFilters,\n  onColumnFiltersChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  isLoading,\n  emptyIcon,\n  emptyMessage = \"No rows found\",\n  emptyDescription = \"Try adjusting your filters\",\n  className,\n}: VirtualizedDataTableProps<TData>) {\n  // Controlled/uncontrolled state for sorting\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n  const resolvedSorting = sorting ?? internalSorting\n  const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n  // Controlled/uncontrolled state for column filters\n  const [internalColumnFilters, setInternalColumnFilters] =\n    React.useState<ColumnFiltersState>([])\n  const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n  const resolvedOnColumnFiltersChange =\n    onColumnFiltersChange ?? setInternalColumnFilters\n\n  // Controlled/uncontrolled state for column visibility\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n  const resolvedOnColumnVisibilityChange =\n    onColumnVisibilityChange ?? setInternalColumnVisibility\n\n  // TanStack Table setup\n  const table = useReactTable({\n    data,\n    columns,\n    ...(getRowId ? { getRowId } : {}),\n    state: {\n      sorting: resolvedSorting,\n      columnFilters: resolvedColumnFilters,\n      columnVisibility: resolvedColumnVisibility,\n    },\n    onSortingChange: resolvedOnSortingChange,\n    onColumnFiltersChange: resolvedOnColumnFiltersChange,\n    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n    manualSorting: true,\n    manualFiltering: true,\n    manualPagination: true,\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  // Virtualizer setup\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => estimateRowHeight,\n    overscan,\n    measureElement: (element) => element.getBoundingClientRect().height,\n  })\n\n  // Infinite scroll detection\n  const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n  // Derive a stable primitive for the last visible virtual-item index so the\n  // effect below doesn't re-run on every render (getVirtualItems() returns a\n  // new array reference each call).\n  const virtualItems = virtualizer.getVirtualItems()\n  const lastVirtualItemIndex =\n    virtualItems.length > 0\n      ? virtualItems[virtualItems.length - 1].index\n      : -1\n\n  React.useEffect(() => {\n    if (!onReachBottom || isFetchingMore || hasMore === false) return\n    if (lastVirtualItemIndex < 0) return\n    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n    // Prevent re-firing until data.length changes (i.e. new page loaded).\n    if (lastTriggeredDataLengthRef.current === data.length) return\n    lastTriggeredDataLengthRef.current = data.length\n\n    onReachBottom()\n  }, [\n    lastVirtualItemIndex,\n    rows.length,\n    data.length,\n    onReachBottom,\n    isFetchingMore,\n    hasMore,\n    reachBottomThreshold,\n  ])\n\n  return (\n    <div className={cn(\n      \"w-full\",\n      typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n      className,\n    )}>\n      <div\n        ref={scrollContainerRef}\n        className=\"relative overflow-auto\"\n        style={{\n          height: typeof height === \"number\" ? `${height}px` : height,\n          contain: \"strict\",\n        }}\n        role=\"table\"\n        aria-rowcount={data.length}\n        aria-colcount={table.getVisibleLeafColumns().length}\n      >\n        {/* Sticky header */}\n        <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n          {table.getHeaderGroups().map((headerGroup) => (\n            <div\n              key={headerGroup.id}\n              className=\"flex w-max min-w-full border-b border-border/50\"\n              role=\"row\"\n            >\n              {headerGroup.headers.map((header, colIdx) => (\n                <div\n                  key={header.id}\n                  className=\"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap\"\n                  style={{\n                    width: header.getSize(),\n                    minWidth: header.getSize(),\n                  }}\n                  role=\"columnheader\"\n                  aria-colindex={colIdx + 1}\n                  aria-sort={\n                    header.column.getIsSorted() === \"asc\"\n                      ? \"ascending\"\n                      : header.column.getIsSorted() === \"desc\"\n                        ? \"descending\"\n                        : header.column.getCanSort()\n                          ? \"none\"\n                          : undefined\n                  }\n                >\n                  {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                      onClick={header.column.getToggleSortingHandler()}\n                    >\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )}\n                      {header.column.getIsSorted() === \"asc\" ? (\n                        <ArrowUp className=\"w-3 h-3\" />\n                      ) : header.column.getIsSorted() === \"desc\" ? (\n                        <ArrowDown className=\"w-3 h-3\" />\n                      ) : (\n                        <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                      )}\n                    </button>\n                  ) : (\n                    flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n\n        {/* Virtualized body or empty state */}\n        {rows.length > 0 ? (\n          <div\n            role=\"rowgroup\"\n            style={{\n              height: virtualizer.getTotalSize(),\n              width: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            {virtualizer.getVirtualItems().map((virtualRow) => {\n              const row = rows[virtualRow.index]\n              return (\n                <div\n                  key={row.id}\n                  data-index={virtualRow.index}\n                  ref={virtualizer.measureElement}\n                  className={cn(\n                    \"absolute left-0 w-max min-w-full flex group transition-colors\",\n                    onRowClick && \"cursor-pointer\",\n                  )}\n                  style={{\n                    transform: `translateY(${virtualRow.start}px)`,\n                  }}\n                  role=\"row\"\n                  aria-rowindex={virtualRow.index + 2}\n                  onClick={() => onRowClick?.(row.original)}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault()\n                            onRowClick(row.original)\n                          }\n                        }\n                      : undefined\n                  }\n                >\n                  {row.getVisibleCells().map((cell, colIdx) => (\n                    <div\n                      key={cell.id}\n                      className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n                      style={{\n                        width: cell.column.getSize(),\n                        minWidth: cell.column.getSize(),\n                      }}\n                      role=\"cell\"\n                      aria-colindex={colIdx + 1}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </div>\n                  ))}\n                </div>\n              )\n            })}\n          </div>\n        ) : isLoading ? (\n          <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n            <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n            <p className=\"text-sm font-medium\">Loading...</p>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n            {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n            <p className=\"text-sm font-medium\">{emptyMessage}</p>\n            <p className=\"text-xs\">{emptyDescription}</p>\n          </div>\n        )}\n\n        {/* Loading indicator */}\n        {isFetchingMore && (\n          <div className=\"flex items-center justify-center py-4\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgNoB,SAUI,KAVJ;AA9MpB,YAAY,WAAW;AACvB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AACP,SAAS,WAAW,SAAS,aAAa,SAAS,eAAe;AAElE,SAAS,UAAU;AAwCZ,SAAS,qBAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB;AACF,GAAqC;AAEnC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAuB,CAAC,CAAC;AAC7E,QAAM,kBAAkB,4BAAW;AACnC,QAAM,0BAA0B,4CAAmB;AAGnD,QAAM,CAAC,uBAAuB,wBAAwB,IACpD,MAAM,SAA6B,CAAC,CAAC;AACvC,QAAM,wBAAwB,wCAAiB;AAC/C,QAAM,gCACJ,wDAAyB;AAG3B,QAAM,CAAC,0BAA0B,2BAA2B,IAC1D,MAAM,SAA0B,CAAC,CAAC;AACpC,QAAM,2BAA2B,8CAAoB;AACrD,QAAM,mCACJ,8DAA4B;AAG9B,QAAM,QAAQ,cAAc;AAAA,IAC1B;AAAA,IACA;AAAA,KACI,WAAW,EAAE,SAAS,IAAI,CAAC,IAHL;AAAA,IAI1B,OAAO;AAAA,MACL,SAAS;AAAA,MACT,eAAe;AAAA,MACf,kBAAkB;AAAA,IACpB;AAAA,IACA,iBAAiB;AAAA,IACjB,uBAAuB;AAAA,IACvB,0BAA0B;AAAA,IAC1B,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,iBAAiB,gBAAgB;AAAA,EACnC,EAAC;AAGD,QAAM,qBAAqB,MAAM,OAAuB,IAAI;AAC5D,QAAM,OAAO,MAAM,YAAY,EAAE;AAEjC,QAAM,cAAc,eAAe;AAAA,IACjC,OAAO,KAAK;AAAA,IACZ,kBAAkB,MAAM,mBAAmB;AAAA,IAC3C,cAAc,MAAM;AAAA,IACpB;AAAA,IACA,gBAAgB,CAAC,YAAY,QAAQ,sBAAsB,EAAE;AAAA,EAC/D,CAAC;AAGD,QAAM,6BAA6B,MAAM,OAAe,CAAC;AAKzD,QAAM,eAAe,YAAY,gBAAgB;AACjD,QAAM,uBACJ,aAAa,SAAS,IAClB,aAAa,aAAa,SAAS,CAAC,EAAE,QACtC;AAEN,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,iBAAiB,kBAAkB,YAAY,MAAO;AAC3D,QAAI,uBAAuB,EAAG;AAC9B,QAAI,uBAAuB,KAAK,SAAS,qBAAsB;AAG/D,QAAI,2BAA2B,YAAY,KAAK,OAAQ;AACxD,+BAA2B,UAAU,KAAK;AAE1C,kBAAc;AAAA,EAChB,GAAG;AAAA,IACD;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW;AAAA,IACd;AAAA,IACA,OAAO,WAAW,YAAY,OAAO,KAAK,EAAE,SAAS,GAAG,KAAK;AAAA,IAC7D;AAAA,EACF,GACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,QACL,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,QACrD,SAAS;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,iBAAe,KAAK;AAAA,MACpB,iBAAe,MAAM,sBAAsB,EAAE;AAAA,MAG7C;AAAA,4BAAC,SAAI,WAAU,mCAAkC,MAAK,YACnD,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC5B;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,sBAAY,QAAQ,IAAI,CAAC,QAAQ,WAChC;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,OAAO,OAAO,QAAQ;AAAA,kBACtB,UAAU,OAAO,QAAQ;AAAA,gBAC3B;AAAA,gBACA,MAAK;AAAA,gBACL,iBAAe,SAAS;AAAA,gBACxB,aACE,OAAO,OAAO,YAAY,MAAM,QAC5B,cACA,OAAO,OAAO,YAAY,MAAM,SAC9B,eACA,OAAO,OAAO,WAAW,IACvB,SACA;AAAA,gBAGT,iBAAO,gBAAgB,OAAO,OAAO,OAAO,WAAW,IACtD;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,SAAS,OAAO,OAAO,wBAAwB;AAAA,oBAE9C;AAAA;AAAA,wBACC,OAAO,OAAO,UAAU;AAAA,wBACxB,OAAO,WAAW;AAAA,sBACpB;AAAA,sBACC,OAAO,OAAO,YAAY,MAAM,QAC/B,oBAAC,WAAQ,WAAU,WAAU,IAC3B,OAAO,OAAO,YAAY,MAAM,SAClC,oBAAC,aAAU,WAAU,WAAU,IAE/B,oBAAC,eAAY,WAAU,sBAAqB;AAAA;AAAA;AAAA,gBAEhD,IAEA;AAAA,kBACE,OAAO,OAAO,UAAU;AAAA,kBACxB,OAAO,WAAW;AAAA,gBACpB;AAAA;AAAA,cAxCG,OAAO;AAAA,YA0Cd,CACD;AAAA;AAAA,UAjDI,YAAY;AAAA,QAkDnB,CACD,GACH;AAAA,QAGC,KAAK,SAAS,IACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,cACL,QAAQ,YAAY,aAAa;AAAA,cACjC,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YAEC,sBAAY,gBAAgB,EAAE,IAAI,CAAC,eAAe;AACjD,oBAAM,MAAM,KAAK,WAAW,KAAK;AACjC,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,cAAY,WAAW;AAAA,kBACvB,KAAK,YAAY;AAAA,kBACjB,WAAW;AAAA,oBACT;AAAA,oBACA,cAAc;AAAA,kBAChB;AAAA,kBACA,OAAO;AAAA,oBACL,WAAW,cAAc,WAAW,KAAK;AAAA,kBAC3C;AAAA,kBACA,MAAK;AAAA,kBACL,iBAAe,WAAW,QAAQ;AAAA,kBAClC,SAAS,MAAM,yCAAa,IAAI;AAAA,kBAChC,UAAU,aAAa,IAAI;AAAA,kBAC3B,WACE,aACI,CAAC,MAA2B;AAC1B,wBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,wBAAE,eAAe;AACjB,iCAAW,IAAI,QAAQ;AAAA,oBACzB;AAAA,kBACF,IACA;AAAA,kBAGL,cAAI,gBAAgB,EAAE,IAAI,CAAC,MAAM,WAChC;AAAA,oBAAC;AAAA;AAAA,sBAEC,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,OAAO,KAAK,OAAO,QAAQ;AAAA,wBAC3B,UAAU,KAAK,OAAO,QAAQ;AAAA,sBAChC;AAAA,sBACA,MAAK;AAAA,sBACL,iBAAe,SAAS;AAAA,sBAEvB;AAAA,wBACC,KAAK,OAAO,UAAU;AAAA,wBACtB,KAAK,WAAW;AAAA,sBAClB;AAAA;AAAA,oBAZK,KAAK;AAAA,kBAaZ,CACD;AAAA;AAAA,gBAzCI,IAAI;AAAA,cA0CX;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH,IACE,YACF,qBAAC,SAAI,WAAU,+EACb;AAAA,8BAAC,WAAQ,WAAU,mCAAkC;AAAA,UACrD,oBAAC,OAAE,WAAU,uBAAsB,wBAAU;AAAA,WAC/C,IAEA,qBAAC,SAAI,WAAU,+EACZ;AAAA,0CAAa,oBAAC,WAAQ,WAAU,sBAAqB;AAAA,UACtD,oBAAC,OAAE,WAAU,uBAAuB,wBAAa;AAAA,UACjD,oBAAC,OAAE,WAAU,WAAW,4BAAiB;AAAA,WAC3C;AAAA,QAID,kBACC,oBAAC,SAAI,WAAU,yCACb,8BAAC,WAAQ,WAAU,8CAA6C,GAClE;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -22,7 +22,7 @@ export { Citation, DetailViewHeader, DetailViewSummary, DetailViewThread, Source
 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';
-export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PotentialContacts, RecentActivity, SystemActivity } from './components/entity-panel.js';
+export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PanelMode, PotentialContacts, RecentActivity, SystemActivity, useEntityPanel } from './components/entity-panel.js';
 export { FilterChip, FilterChipProps } from './components/filter-chip.js';
 export { InboxGroupHeader, InboxRow, InboxRowProps } from './components/inbox-row.js';
 export { AssigneeFilter, InboxFilterCategory, InboxToolbar, InboxToolbarProps } from './components/inbox-toolbar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.13.2",
+  "version": "0.14.1",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/data-table-filter.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render } from "@testing-library/react";
+import { DataTableFilter } from "../data-table-filter";
+import { ListFilter } from "lucide-react";
+
+const defaultProps = {
+  categories: [
+    {
+      id: "status",
+      label: "Status",
+      icon: ListFilter,
+      options: ["Open", "Closed"],
+    },
+  ],
+  selectedFilters: {} as Record<string, string[]>,
+  onToggleFilter: () => {},
+};
+
+describe("DataTableFilter", () => {
+  it("renders trigger button with default classes", () => {
+    const { container } = render(<DataTableFilter {...defaultProps} />);
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    expect(button!.className).toContain("h-8");
+  });
+
+  it("merges custom className into trigger button", () => {
+    const { container } = render(
+      <DataTableFilter
+        {...defaultProps}
+        className="bg-primary text-primary-foreground"
+      />
+    );
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    expect(button!.className).toContain("bg-primary");
+    expect(button!.className).toContain("text-primary-foreground");
+    expect(button!.className).toContain("h-8");
+  });
+});

package/src/components/__tests__/empty-state.test.tsx

@@ -73,4 +73,78 @@ describe("EmptyState", () => {
     const el = container.querySelector('[data-slot="empty-state"]')!;
     expect(el.classList.contains("my-custom-class")).toBe(true);
   });
+
+  it("default size is 'sm' with small typography", () => {
+    const { container } = render(
+      <EmptyState description="No items" title="Empty" />
+    );
+    const titleEl = container.querySelector('[data-slot="empty-state-title"]')!;
+    const descEl = container.querySelector('[data-slot="empty-state-description"]')!;
+    expect(titleEl.className).toContain("text-sm");
+    expect(descEl.className).toContain("text-xs");
+  });
+
+  it("size 'lg' applies larger typography", () => {
+    const { container } = render(
+      <EmptyState description="No items" title="Empty" size="lg" />
+    );
+    const titleEl = container.querySelector('[data-slot="empty-state-title"]')!;
+    const descEl = container.querySelector('[data-slot="empty-state-description"]')!;
+    expect(titleEl.className).toContain("text-base");
+    expect(titleEl.className).toContain("font-semibold");
+    expect(descEl.className).toContain("text-sm");
+  });
+
+  it("size 'lg' uses larger icon sizing", () => {
+    const { container } = render(
+      <EmptyState
+        description="No items"
+        size="lg"
+        icon={<svg data-testid="test-svg"><rect /></svg>}
+      />
+    );
+    const iconWrapper = container.querySelector('[data-slot="empty-state-icon"]')!;
+    expect(iconWrapper.className).toContain("[&>svg]:w-16");
+  });
+
+  it("renders secondaryAction when provided", () => {
+    const { container } = render(
+      <EmptyState
+        description="No items"
+        secondaryAction={<a href="/help">Help link</a>}
+      />
+    );
+    const secondaryWrapper = container.querySelector('[data-slot="empty-state-secondary-action"]');
+    expect(secondaryWrapper).not.toBeNull();
+    expect(screen.getByText("Help link")).not.toBeNull();
+  });
+
+  it("omits secondaryAction wrapper when not provided", () => {
+    const { container } = render(<EmptyState description="No items" />);
+    const secondaryWrapper = container.querySelector('[data-slot="empty-state-secondary-action"]');
+    expect(secondaryWrapper).toBeNull();
+  });
+
+  it("secondaryAction uses mt-1 when action is also present", () => {
+    const { container } = render(
+      <EmptyState
+        description="No items"
+        action={<button type="button">Primary</button>}
+        secondaryAction={<a href="/help">Secondary</a>}
+      />
+    );
+    const secondaryWrapper = container.querySelector('[data-slot="empty-state-secondary-action"]')!;
+    expect(secondaryWrapper.className).toContain("mt-1");
+  });
+
+  it("secondaryAction uses mt-3 when action is not present", () => {
+    const { container } = render(
+      <EmptyState
+        description="No items"
+        secondaryAction={<a href="/help">Secondary</a>}
+      />
+    );
+    const secondaryWrapper = container.querySelector('[data-slot="empty-state-secondary-action"]')!;
+    expect(secondaryWrapper.className).toContain("mt-3");
+  });
 });

package/src/components/data-table-filter.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import { ListFilter, Search } from "lucide-react"
 
+import { cn } from "../lib/utils"
 import { Button } from "./button"
 import {
   DropdownMenu,
@@ -25,12 +26,14 @@ interface DataTableFilterProps {
   categories: DataTableFilterCategory[]
   selectedFilters: Record<string, string[]>
   onToggleFilter: (categoryId: string, option: string) => void
+  className?: string
 }
 
 export function DataTableFilter({
   categories,
   selectedFilters,
   onToggleFilter,
+  className,
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
 
@@ -66,7 +69,10 @@ export function DataTableFilter({
         <Button
           variant="outline"
           size="sm"
-          className="h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50"
+          className={cn(
+            "h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50",
+            className
+          )}
         >
           <ListFilter className="h-3.5 w-3.5" />
           Filter

package/src/components/empty-state.tsx

@@ -7,22 +7,34 @@ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string
   description: string
   action?: React.ReactNode
+  secondaryAction?: React.ReactNode
+  size?: 'sm' | 'lg'
 }
 
-function EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps) {
+function EmptyState({ icon, title, description, action, secondaryAction, size = 'sm', className, ...rest }: EmptyStateProps) {
+  const isLg = size === 'lg'
   return (
-    <div data-slot="empty-state" className={cn("flex flex-col items-center justify-center py-24 gap-3", className)} {...rest}>
+    <div data-slot="empty-state" className={cn("flex flex-col items-center justify-center py-24 gap-3 text-center", className)} {...rest}>
       {icon && (
-        <div data-slot="empty-state-icon" className="text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12">
+        <div data-slot="empty-state-icon" className={cn(
+          "text-muted-foreground/30",
+          isLg
+            ? "[&>svg]:w-16 [&>svg]:h-16 [&>img]:h-[140px] [&>img]:w-auto [&>img]:object-contain"
+            : "[&>svg]:w-12 [&>svg]:h-12"
+        )}>
           {icon}
         </div>
       )}
       {title && (
-        <p data-slot="empty-state-title" className="text-sm font-medium text-muted-foreground">
+        <p data-slot="empty-state-title" className={cn(
+          isLg ? "text-base font-semibold text-foreground" : "text-sm font-medium text-muted-foreground"
+        )}>
           {title}
         </p>
       )}
-      <p data-slot="empty-state-description" className="text-xs text-muted-foreground">
+      <p data-slot="empty-state-description" className={cn(
+        isLg ? "text-sm text-muted-foreground" : "text-xs text-muted-foreground"
+      )}>
         {description}
       </p>
       {action && (
@@ -30,6 +42,11 @@ function EmptyState({ icon, title, description, action, className, ...rest }: Em
           {action}
         </div>
       )}
+      {secondaryAction && (
+        <div data-slot="empty-state-secondary-action" className={action ? "mt-1" : "mt-3"}>
+          {secondaryAction}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/entity-panel.tsx

@@ -25,9 +25,11 @@ import {
 import { TimelineActivity, type TimelineEvent } from "./timeline-activity"
 
 // ---------------------------------------------------------------------------
-// EntityPanel – supports both Sheet (side panel) and fullscreen modes
+// EntityPanel -- supports Sheet (side panel), wide, and fullscreen modes
 // ---------------------------------------------------------------------------
 
+export type PanelMode = 'default' | 'wide' | 'fullscreen'
+
 export function EntityPanel({
   isOpen,
   onClose,
@@ -37,19 +39,41 @@ export function EntityPanel({
   onClose: (open: boolean) => void
   children?: React.ReactNode
 }) {
-  const [isFullscreen, setIsFullscreen] = React.useState(false)
+  const [panelMode, setPanelMode] = React.useState<PanelMode>('default')
+
+  // Backward-compatible derived values
+  const isFullscreen = panelMode === 'fullscreen'
+  const setIsFullscreen = React.useCallback(
+    (val: boolean) => setPanelMode(val ? 'fullscreen' : 'default'),
+    [],
+  )
+
+  const cyclePanelMode = React.useCallback(() => {
+    setPanelMode((prev) =>
+      prev === 'default' ? 'wide' : prev === 'wide' ? 'fullscreen' : 'default',
+    )
+  }, [])
 
   React.useEffect(() => {
-    if (!isOpen) setIsFullscreen(false)
+    if (!isOpen) setPanelMode('default')
   }, [isOpen])
 
   const handleClose = React.useCallback(() => {
-    setIsFullscreen(false)
+    setPanelMode('default')
     onClose(false)
   }, [onClose])
 
   const panelContent = (
-    <EntityPanelContext.Provider value={{ isFullscreen, setIsFullscreen, onClose: handleClose }}>
+    <EntityPanelContext.Provider
+      value={{
+        isFullscreen,
+        setIsFullscreen,
+        panelMode,
+        setPanelMode,
+        cyclePanelMode,
+        onClose: handleClose,
+      }}
+    >
       {children}
     </EntityPanelContext.Provider>
   )
@@ -62,11 +86,16 @@ export function EntityPanel({
     )
   }
 
+  const widthClass =
+    panelMode === 'wide'
+      ? 'sm:w-[800px] sm:max-w-[900px]'
+      : 'sm:w-[500px] sm:max-w-[600px]'
+
   return (
     <Sheet open={isOpen} onOpenChange={onClose}>
       <SheetContent
         side="right"
-        className="w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col"
+        className={`w-full ${widthClass} overflow-hidden p-0 bg-background border-l border-border flex flex-col`}
         showCloseButton={false}
       >
         <SheetHeader className="sr-only p-0">
@@ -81,14 +110,20 @@ export function EntityPanel({
 const EntityPanelContext = React.createContext<{
   isFullscreen: boolean
   setIsFullscreen: (v: boolean) => void
+  panelMode: PanelMode
+  setPanelMode: (mode: PanelMode) => void
+  cyclePanelMode: () => void
   onClose: () => void
 }>({
   isFullscreen: false,
   setIsFullscreen: () => {},
+  panelMode: 'default',
+  setPanelMode: () => {},
+  cyclePanelMode: () => {},
   onClose: () => {},
 })
 
-function useEntityPanel() {
+export function useEntityPanel() {
   return React.useContext(EntityPanelContext)
 }
 
@@ -109,7 +144,10 @@ export function EntityPanelHeader({
   subtitle?: string
   headerAction?: React.ReactNode
 }) {
-  const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel()
+  const { panelMode, cyclePanelMode, onClose } = useEntityPanel()
+
+  const sizeButtonTitle =
+    panelMode === 'default' ? 'Wide' : panelMode === 'wide' ? 'Fullscreen' : 'Exit fullscreen'
 
   return (
     <div className="flex items-center justify-between mb-4">
@@ -136,11 +174,11 @@ export function EntityPanelHeader({
         </button>
         <button
           type="button"
-          onClick={() => setIsFullscreen(!isFullscreen)}
+          onClick={cyclePanelMode}
           className="p-1.5 rounded-md hover:bg-secondary transition-colors"
-          title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+          title={sizeButtonTitle}
         >
-          {isFullscreen ? (
+          {panelMode === 'fullscreen' ? (
             <Minimize2 className="w-4 h-4" />
           ) : (
             <Maximize2 className="w-4 h-4" />

package/src/components/virtualized-data-table.tsx

@@ -44,7 +44,8 @@ export interface VirtualizedDataTableProps<TData> {
   columnVisibility?: VisibilityState
   onColumnVisibilityChange?: OnChangeFn<VisibilityState>
 
-  // Empty state
+  // Loading / Empty state
+  isLoading?: boolean
   emptyIcon?: React.ReactNode
   emptyMessage?: string
   emptyDescription?: string
@@ -71,6 +72,7 @@ export function VirtualizedDataTable<TData>({
   onColumnFiltersChange,
   columnVisibility,
   onColumnVisibilityChange,
+  isLoading,
   emptyIcon,
   emptyMessage = "No rows found",
   emptyDescription = "Try adjusting your filters",
@@ -293,6 +295,11 @@ export function VirtualizedDataTable<TData>({
               )
             })}
           </div>
+        ) : isLoading ? (
+          <div className="flex flex-col items-center justify-center gap-2 text-muted-foreground py-20">
+            <Loader2 className="h-7 w-7 animate-spin opacity-60" />
+            <p className="text-sm font-medium">Loading...</p>
+          </div>
         ) : (
           <div className="flex flex-col items-center justify-center gap-1 text-muted-foreground py-20">
             {emptyIcon ?? <SearchX className="h-7 w-7 opacity-40" />}