@handled-ai/design-system 0.18.22 → 0.18.24

package/dist/components/contextual-quick-action-launcher.d.ts

@@ -7,10 +7,13 @@ interface ContextualQuickActionItem {
     icon?: React.ReactNode;
     disabled?: boolean;
     disabledReason?: string;
+    meta?: React.ReactNode;
 }
+type ContextualQuickActionLauncherVariant = "default" | "case-panel";
 interface ContextualQuickActionContextLabelProps {
     contextLabel: string;
     contextSecondary?: string;
+    variant?: ContextualQuickActionLauncherVariant;
     className?: string;
 }
 interface ContextualQuickActionLauncherProps {
@@ -21,12 +24,13 @@ interface ContextualQuickActionLauncherProps {
     onBrowseAll?: () => void;
     showHint?: boolean;
     align?: "start" | "end";
+    variant?: ContextualQuickActionLauncherVariant;
     className?: string;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-declare function ContextualQuickActionContextLabel({ contextLabel, contextSecondary, className, }: ContextualQuickActionContextLabelProps): React.JSX.Element;
-declare function ContextualQuickActionLauncher({ contextLabel, contextSecondary, items, onSelect, onBrowseAll, showHint, align, className, open, defaultOpen, onOpenChange, }: ContextualQuickActionLauncherProps): React.JSX.Element;
+declare function ContextualQuickActionContextLabel({ contextLabel, contextSecondary, variant, className, }: ContextualQuickActionContextLabelProps): React.JSX.Element;
+declare function ContextualQuickActionLauncher({ contextLabel, contextSecondary, items, onSelect, onBrowseAll, showHint, align, variant, className, open, defaultOpen, onOpenChange, }: ContextualQuickActionLauncherProps): React.JSX.Element;
 
-export { ContextualQuickActionContextLabel, type ContextualQuickActionContextLabelProps, type ContextualQuickActionItem, ContextualQuickActionLauncher, type ContextualQuickActionLauncherProps };
+export { ContextualQuickActionContextLabel, type ContextualQuickActionContextLabelProps, type ContextualQuickActionItem, ContextualQuickActionLauncher, type ContextualQuickActionLauncherProps, type ContextualQuickActionLauncherVariant };

package/dist/components/contextual-quick-action-launcher.js

@@ -3,7 +3,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ArrowRight, ChevronDown, Zap } from "lucide-react";
+import { ChevronDown, Zap } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import {
   DropdownMenu,
@@ -15,20 +15,38 @@ import {
 function ContextualQuickActionContextLabel({
   contextLabel,
   contextSecondary,
+  variant = "default",
   className
 }) {
+  const isCasePanel = variant === "case-panel";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "contextual-quick-action-context-label",
+      "data-variant": variant,
       className: cn(
-        "-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground",
+        isCasePanel ? "-mx-2 -mt-2 mb-1 flex items-center gap-1.5 whitespace-nowrap border-b px-3 py-2.5 text-[13px] text-muted-foreground" : "-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Zap, { className: "h-3 w-3 shrink-0", strokeWidth: 2.25, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          Zap,
+          {
+            className: cn(isCasePanel ? "h-3.5 w-3.5 shrink-0" : "h-3 w-3 shrink-0"),
+            strokeWidth: 2.25,
+            "aria-hidden": "true"
+          }
+        ),
         /* @__PURE__ */ jsx("span", { children: "Acting on" }),
-        /* @__PURE__ */ jsx("strong", { className: "max-w-[180px] truncate font-semibold text-foreground", children: contextLabel }),
+        /* @__PURE__ */ jsx(
+          "strong",
+          {
+            className: cn(
+              isCasePanel ? "max-w-[260px] truncate font-semibold text-foreground" : "max-w-[180px] truncate font-semibold text-foreground"
+            ),
+            children: contextLabel
+          }
+        ),
         contextSecondary ? /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate text-muted-foreground", children: [
           "\xB7 ",
           contextSecondary
@@ -48,12 +66,14 @@ function ContextualQuickActionLauncher({
   onBrowseAll,
   showHint = false,
   align = "start",
+  variant = "default",
   className,
   open,
   defaultOpen,
   onOpenChange
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen != null ? defaultOpen : false);
+  const isCasePanel = variant === "case-panel";
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolledOpen;
   const handleOpenChange = React.useCallback(
@@ -122,13 +142,16 @@ function ContextualQuickActionLauncher({
               align,
               side: "bottom",
               sideOffset: 6,
-              className: "pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]",
+              className: cn(
+                isCasePanel ? "pointer-events-auto w-[432px] rounded-[13px] border border-border bg-popover p-2 text-[13px] shadow-[0_18px_44px_rgba(0,0,0,0.14),0_2px_10px_rgba(0,0,0,0.06)]" : "pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]"
+              ),
               children: [
                 /* @__PURE__ */ jsx(
                   ContextualQuickActionContextLabel,
                   {
                     contextLabel,
-                    contextSecondary
+                    contextSecondary,
+                    variant
                   }
                 ),
                 items.map((item) => {
@@ -139,7 +162,7 @@ function ContextualQuickActionLauncher({
                       disabled: item.disabled,
                       onSelect: (event) => handleSelect(item, event),
                       className: cn(
-                        "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100",
+                        isCasePanel ? "grid cursor-pointer grid-cols-[34px_minmax(0,1fr)_auto] items-center gap-3 rounded-[9px] px-2.5 py-[9px] text-left outline-none focus:bg-muted/60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100" : "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100",
                         item.disabled && "text-muted-foreground"
                       ),
                       children: [
@@ -148,38 +171,87 @@ function ContextualQuickActionLauncher({
                           {
                             "data-slot": "contextual-quick-action-item-icon",
                             className: cn(
-                              "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground",
+                              isCasePanel ? "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[9px] border border-border/70 bg-muted/60 text-foreground [&_svg]:h-[18px] [&_svg]:w-[18px]" : "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground",
                               item.disabled && "opacity-60"
                             ),
                             children: (_a = item.icon) != null ? _a : /* @__PURE__ */ jsx(DefaultActionIcon, {})
                           }
                         ),
                         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsx("span", { className: "block truncate text-[12.5px] font-medium leading-tight text-current", children: item.label }),
-                          item.description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground", children: item.description }) : null
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                isCasePanel ? "block truncate text-[13.5px] font-semibold leading-tight text-current" : "block truncate text-[12.5px] font-medium leading-tight text-current"
+                              ),
+                              children: item.label
+                            }
+                          ),
+                          item.description ? /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                isCasePanel ? "mt-1 block truncate text-[12px] leading-tight text-muted-foreground" : "mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground"
+                              ),
+                              children: item.description
+                            }
+                          ) : null
                         ] }),
-                        item.disabled && item.disabledReason ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80", children: item.disabledReason }) : null
+                        item.disabled && item.disabledReason ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "contextual-quick-action-item-disabled-meta",
+                            className: cn(
+                              isCasePanel ? "ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70" : "ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80"
+                            ),
+                            children: item.disabledReason
+                          }
+                        ) : item.meta ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "contextual-quick-action-item-meta",
+                            className: cn(
+                              isCasePanel ? "ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70" : "ml-auto shrink-0 text-[10.5px] text-muted-foreground/80"
+                            ),
+                            children: item.meta
+                          }
+                        ) : null
                       ]
                     },
                     item.id
                   );
                 }),
-                /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "-mx-1.5 my-1" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      className: "inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                      onClick: handleBrowseAll,
-                      children: [
-                        "Browse all actions",
-                        /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3", strokeWidth: 2, "aria-hidden": "true" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground", children: "\u2318K" })
-                ] })
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: cn(isCasePanel ? "-mx-2 mt-1 mb-1" : "-mx-1.5 my-1") }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      isCasePanel ? "flex items-center justify-between whitespace-nowrap px-2.5 py-2 text-[13px] text-muted-foreground" : "flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: cn(
+                            isCasePanel ? "inline-flex items-center gap-1 font-semibold text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" : "inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                          ),
+                          onClick: handleBrowseAll,
+                          children: "Browse all actions"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            isCasePanel ? "inline-flex items-center rounded-[5px] border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none text-muted-foreground" : "inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground"
+                          ),
+                          children: "\u2318K"
+                        }
+                      )
+                    ]
+                  }
+                )
               ]
             }
           )

package/dist/components/contextual-quick-action-launcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/contextual-quick-action-launcher.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, ChevronDown, Zap } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface ContextualQuickActionItem {\n  id: string\n  label: string\n  description?: string\n  icon?: React.ReactNode\n  disabled?: boolean\n  disabledReason?: string\n}\n\nexport interface ContextualQuickActionContextLabelProps {\n  contextLabel: string\n  contextSecondary?: string\n  className?: string\n}\n\nexport interface ContextualQuickActionLauncherProps {\n  contextLabel: string\n  contextSecondary?: string\n  items: ContextualQuickActionItem[]\n  onSelect: (item: ContextualQuickActionItem) => void\n  onBrowseAll?: () => void\n  showHint?: boolean\n  align?: \"start\" | \"end\"\n  className?: string\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n}\n\nfunction ContextualQuickActionContextLabel({\n  contextLabel,\n  contextSecondary,\n  className,\n}: ContextualQuickActionContextLabelProps) {\n  return (\n    <div\n      data-slot=\"contextual-quick-action-context-label\"\n      className={cn(\n        \"-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground\",\n        className\n      )}\n    >\n      <Zap className=\"h-3 w-3 shrink-0\" strokeWidth={2.25} aria-hidden=\"true\" />\n      <span>Acting on</span>\n      <strong className=\"max-w-[180px] truncate font-semibold text-foreground\">\n        {contextLabel}\n      </strong>\n      {contextSecondary ? (\n        <span className=\"min-w-0 truncate text-muted-foreground\">\n          · {contextSecondary}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n\nfunction DefaultActionIcon() {\n  return <Zap className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n}\n\nfunction ContextualQuickActionLauncher({\n  contextLabel,\n  contextSecondary,\n  items,\n  onSelect,\n  onBrowseAll,\n  showHint = false,\n  align = \"start\",\n  className,\n  open,\n  defaultOpen,\n  onOpenChange,\n}: ContextualQuickActionLauncherProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = open !== undefined\n  const isOpen = isControlled ? open : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen)\n      }\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange]\n  )\n\n  const closeMenu = React.useCallback(() => {\n    handleOpenChange(false)\n  }, [handleOpenChange])\n\n  const handleSelect = React.useCallback(\n    (item: ContextualQuickActionItem, event?: Event) => {\n      if (item.disabled) {\n        event?.preventDefault()\n        return\n      }\n\n      onSelect(item)\n      closeMenu()\n    },\n    [closeMenu, onSelect]\n  )\n\n  const handleBrowseAll = React.useCallback(() => {\n    onBrowseAll?.()\n    closeMenu()\n  }, [closeMenu, onBrowseAll])\n\n  return (\n    <div\n      data-slot=\"contextual-quick-action-launcher\"\n      className={cn(\"inline-flex items-center gap-2\", className)}\n    >\n      <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"contextual-quick-action-trigger\"\n            data-state={isOpen ? \"open\" : \"closed\"}\n            className={cn(\n              \"inline-flex h-8 items-center gap-2 rounded-lg border border-border bg-background py-1.5 pr-2.5 pl-2 text-xs font-medium text-foreground shadow-sm transition-colors hover:border-muted-foreground/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n              \"data-[state=open]:border-foreground data-[state=open]:bg-foreground data-[state=open]:text-background data-[state=open]:hover:bg-foreground\"\n            )}\n          >\n            <span\n              className={cn(\n                \"inline-flex h-[18px] w-[18px] items-center justify-center rounded bg-foreground/[0.04]\",\n                isOpen && \"bg-background/15\"\n              )}\n            >\n              <Zap className=\"h-3 w-3\" strokeWidth={2} aria-hidden=\"true\" />\n            </span>\n            <span className=\"tracking-[-0.005em]\">Quick action</span>\n            <ChevronDown className=\"h-3 w-3 opacity-60\" strokeWidth={2} aria-hidden=\"true\" />\n          </button>\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent\n          align={align}\n          side=\"bottom\"\n          sideOffset={6}\n          className=\"pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]\"\n        >\n          <ContextualQuickActionContextLabel\n            contextLabel={contextLabel}\n            contextSecondary={contextSecondary}\n          />\n\n          {items.map((item) => (\n            <DropdownMenuItem\n              key={item.id}\n              disabled={item.disabled}\n              onSelect={(event) => handleSelect(item, event)}\n              className={cn(\n                \"flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100\",\n                item.disabled && \"text-muted-foreground\"\n              )}\n            >\n              <span\n                data-slot=\"contextual-quick-action-item-icon\"\n                className={cn(\n                  \"flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground\",\n                  item.disabled && \"opacity-60\"\n                )}\n              >\n                {item.icon ?? <DefaultActionIcon />}\n              </span>\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-[12.5px] font-medium leading-tight text-current\">\n                  {item.label}\n                </span>\n                {item.description ? (\n                  <span className=\"mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground\">\n                    {item.description}\n                  </span>\n                ) : null}\n              </span>\n              {item.disabled && item.disabledReason ? (\n                <span className=\"ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80\">\n                  {item.disabledReason}\n                </span>\n              ) : null}\n            </DropdownMenuItem>\n          ))}\n\n          <DropdownMenuSeparator className=\"-mx-1.5 my-1\" />\n          <div className=\"flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground\">\n            <button\n              type=\"button\"\n              className=\"inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n              onClick={handleBrowseAll}\n            >\n              Browse all actions\n              <ArrowRight className=\"h-3 w-3\" strokeWidth={2} aria-hidden=\"true\" />\n            </button>\n            <span className=\"inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground\">\n              ⌘K\n            </span>\n          </div>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      {showHint ? (\n        <span className=\"text-[11px] text-muted-foreground\">\n          Or press{\" \"}\n          <span className=\"inline-flex items-center rounded border border-border bg-muted/40 px-1 py-0.5 text-[10px] font-medium leading-none\">\n            ⌘K\n          </span>{\" \"}\n          for all actions\n        </span>\n      ) : null}\n    </div>\n  )\n}\n\nexport { ContextualQuickActionContextLabel, ContextualQuickActionLauncher }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/contextual-quick-action-launcher.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Zap } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface ContextualQuickActionItem {\n  id: string\n  label: string\n  description?: string\n  icon?: React.ReactNode\n  disabled?: boolean\n  disabledReason?: string\n  meta?: React.ReactNode\n}\n\nexport type ContextualQuickActionLauncherVariant = \"default\" | \"case-panel\"\n\nexport interface ContextualQuickActionContextLabelProps {\n  contextLabel: string\n  contextSecondary?: string\n  variant?: ContextualQuickActionLauncherVariant\n  className?: string\n}\n\nexport interface ContextualQuickActionLauncherProps {\n  contextLabel: string\n  contextSecondary?: string\n  items: ContextualQuickActionItem[]\n  onSelect: (item: ContextualQuickActionItem) => void\n  onBrowseAll?: () => void\n  showHint?: boolean\n  align?: \"start\" | \"end\"\n  variant?: ContextualQuickActionLauncherVariant\n  className?: string\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n}\n\nfunction ContextualQuickActionContextLabel({\n  contextLabel,\n  contextSecondary,\n  variant = \"default\",\n  className,\n}: ContextualQuickActionContextLabelProps) {\n  const isCasePanel = variant === \"case-panel\"\n\n  return (\n    <div\n      data-slot=\"contextual-quick-action-context-label\"\n      data-variant={variant}\n      className={cn(\n        isCasePanel\n          ? \"-mx-2 -mt-2 mb-1 flex items-center gap-1.5 whitespace-nowrap border-b px-3 py-2.5 text-[13px] text-muted-foreground\"\n          : \"-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground\",\n        className\n      )}\n    >\n      <Zap\n        className={cn(isCasePanel ? \"h-3.5 w-3.5 shrink-0\" : \"h-3 w-3 shrink-0\")}\n        strokeWidth={2.25}\n        aria-hidden=\"true\"\n      />\n      <span>Acting on</span>\n      <strong\n        className={cn(\n          isCasePanel\n            ? \"max-w-[260px] truncate font-semibold text-foreground\"\n            : \"max-w-[180px] truncate font-semibold text-foreground\"\n        )}\n      >\n        {contextLabel}\n      </strong>\n      {contextSecondary ? (\n        <span className=\"min-w-0 truncate text-muted-foreground\">\n          · {contextSecondary}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n\nfunction DefaultActionIcon() {\n  return <Zap className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n}\n\nfunction ContextualQuickActionLauncher({\n  contextLabel,\n  contextSecondary,\n  items,\n  onSelect,\n  onBrowseAll,\n  showHint = false,\n  align = \"start\",\n  variant = \"default\",\n  className,\n  open,\n  defaultOpen,\n  onOpenChange,\n}: ContextualQuickActionLauncherProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)\n  const isCasePanel = variant === \"case-panel\"\n  const isControlled = open !== undefined\n  const isOpen = isControlled ? open : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen)\n      }\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange]\n  )\n\n  const closeMenu = React.useCallback(() => {\n    handleOpenChange(false)\n  }, [handleOpenChange])\n\n  const handleSelect = React.useCallback(\n    (item: ContextualQuickActionItem, event?: Event) => {\n      if (item.disabled) {\n        event?.preventDefault()\n        return\n      }\n\n      onSelect(item)\n      closeMenu()\n    },\n    [closeMenu, onSelect]\n  )\n\n  const handleBrowseAll = React.useCallback(() => {\n    onBrowseAll?.()\n    closeMenu()\n  }, [closeMenu, onBrowseAll])\n\n  return (\n    <div\n      data-slot=\"contextual-quick-action-launcher\"\n      className={cn(\"inline-flex items-center gap-2\", className)}\n    >\n      <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"contextual-quick-action-trigger\"\n            data-state={isOpen ? \"open\" : \"closed\"}\n            className={cn(\n              \"inline-flex h-8 items-center gap-2 rounded-lg border border-border bg-background py-1.5 pr-2.5 pl-2 text-xs font-medium text-foreground shadow-sm transition-colors hover:border-muted-foreground/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n              \"data-[state=open]:border-foreground data-[state=open]:bg-foreground data-[state=open]:text-background data-[state=open]:hover:bg-foreground\"\n            )}\n          >\n            <span\n              className={cn(\n                \"inline-flex h-[18px] w-[18px] items-center justify-center rounded bg-foreground/[0.04]\",\n                isOpen && \"bg-background/15\"\n              )}\n            >\n              <Zap className=\"h-3 w-3\" strokeWidth={2} aria-hidden=\"true\" />\n            </span>\n            <span className=\"tracking-[-0.005em]\">Quick action</span>\n            <ChevronDown className=\"h-3 w-3 opacity-60\" strokeWidth={2} aria-hidden=\"true\" />\n          </button>\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent\n          align={align}\n          side=\"bottom\"\n          sideOffset={6}\n          className={cn(\n            isCasePanel\n              ? \"pointer-events-auto w-[432px] rounded-[13px] border border-border bg-popover p-2 text-[13px] shadow-[0_18px_44px_rgba(0,0,0,0.14),0_2px_10px_rgba(0,0,0,0.06)]\"\n              : \"pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]\"\n          )}\n        >\n          <ContextualQuickActionContextLabel\n            contextLabel={contextLabel}\n            contextSecondary={contextSecondary}\n            variant={variant}\n          />\n\n          {items.map((item) => (\n            <DropdownMenuItem\n              key={item.id}\n              disabled={item.disabled}\n              onSelect={(event) => handleSelect(item, event)}\n              className={cn(\n                isCasePanel\n                  ? \"grid cursor-pointer grid-cols-[34px_minmax(0,1fr)_auto] items-center gap-3 rounded-[9px] px-2.5 py-[9px] text-left outline-none focus:bg-muted/60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100\"\n                  : \"flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100\",\n                item.disabled && \"text-muted-foreground\"\n              )}\n            >\n              <span\n                data-slot=\"contextual-quick-action-item-icon\"\n                className={cn(\n                  isCasePanel\n                    ? \"flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[9px] border border-border/70 bg-muted/60 text-foreground [&_svg]:h-[18px] [&_svg]:w-[18px]\"\n                    : \"flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground\",\n                  item.disabled && \"opacity-60\"\n                )}\n              >\n                {item.icon ?? <DefaultActionIcon />}\n              </span>\n              <span className=\"min-w-0 flex-1\">\n                <span\n                  className={cn(\n                    isCasePanel\n                      ? \"block truncate text-[13.5px] font-semibold leading-tight text-current\"\n                      : \"block truncate text-[12.5px] font-medium leading-tight text-current\"\n                  )}\n                >\n                  {item.label}\n                </span>\n                {item.description ? (\n                  <span\n                    className={cn(\n                      isCasePanel\n                        ? \"mt-1 block truncate text-[12px] leading-tight text-muted-foreground\"\n                        : \"mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground\"\n                    )}\n                  >\n                    {item.description}\n                  </span>\n                ) : null}\n              </span>\n              {item.disabled && item.disabledReason ? (\n                <span\n                  data-slot=\"contextual-quick-action-item-disabled-meta\"\n                  className={cn(\n                    isCasePanel\n                      ? \"ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70\"\n                      : \"ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80\"\n                  )}\n                >\n                  {item.disabledReason}\n                </span>\n              ) : item.meta ? (\n                <span\n                  data-slot=\"contextual-quick-action-item-meta\"\n                  className={cn(\n                    isCasePanel\n                      ? \"ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70\"\n                      : \"ml-auto shrink-0 text-[10.5px] text-muted-foreground/80\"\n                  )}\n                >\n                  {item.meta}\n                </span>\n              ) : null}\n            </DropdownMenuItem>\n          ))}\n\n          <DropdownMenuSeparator className={cn(isCasePanel ? \"-mx-2 mt-1 mb-1\" : \"-mx-1.5 my-1\")} />\n          <div\n            className={cn(\n              isCasePanel\n                ? \"flex items-center justify-between whitespace-nowrap px-2.5 py-2 text-[13px] text-muted-foreground\"\n                : \"flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground\"\n            )}\n          >\n            <button\n              type=\"button\"\n              className={cn(\n                isCasePanel\n                  ? \"inline-flex items-center gap-1 font-semibold text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n                  : \"inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n              )}\n              onClick={handleBrowseAll}\n            >\n              Browse all actions\n            </button>\n            <span\n              className={cn(\n                isCasePanel\n                  ? \"inline-flex items-center rounded-[5px] border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none text-muted-foreground\"\n                  : \"inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground\"\n              )}\n            >\n              ⌘K\n            </span>\n          </div>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      {showHint ? (\n        <span className=\"text-[11px] text-muted-foreground\">\n          Or press{\" \"}\n          <span className=\"inline-flex items-center rounded border border-border bg-muted/40 px-1 py-0.5 text-[10px] font-medium leading-none\">\n            ⌘K\n          </span>{\" \"}\n          for all actions\n        </span>\n      ) : null}\n    </div>\n  )\n}\n\nexport { ContextualQuickActionContextLabel, ContextualQuickActionLauncher }\n"],"mappings":"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","names":[]}

package/dist/components/pill.d.ts

@@ -12,7 +12,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
 declare const pillVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "info" | "neutral" | "warning" | "success" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "neutral" | "info" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
 }

package/dist/index.d.ts

@@ -10,11 +10,15 @@ export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, Ava
 export { Badge, badgeVariants } from './components/badge.js';
 export { Button, buttonVariants } from './components/button.js';
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/card.js';
+export { CasePanelEmailComposer, CasePanelEmailComposerChip, CasePanelEmailComposerChipProps, CasePanelEmailComposerProps, CasePanelEmailComposerRow, CasePanelEmailComposerRowProps, CasePanelEmailComposerRowState, CasePanelEmailComposerSignatureRow, CasePanelEmailComposerSignatureRowProps, CasePanelEmailComposerSlotHelpers } from './components/case-panel-email-composer.js';
+export { CasePanelActivityActor, CasePanelActivityEvent, CasePanelActivityPayload, CasePanelActivityTimeline, CasePanelActivityTimelineProps, CasePanelActivityTone, CasePanelPayloadAction } from './components/case-panel-activity-timeline.js';
+export { CasePanelDetail, CasePanelDetailProps, CasePanelDetailSlots, CasePanelDetailSlotsProps, CasePanelDetailWidth, CasePanelHeader, CasePanelHeaderProps, CasePanelIdentityLink, CasePanelIdentitySubline, CasePanelIdentitySublineProps, CasePanelMetadataRow, CasePanelMetadataRowProps, CasePanelSignalBrief, CasePanelSignalBriefProps } from './components/case-panel-detail.js';
+export { CasePanelSignalApprovalActions, CasePanelSignalApprovalActionsProps, CasePanelWhy, CasePanelWhyItem, CasePanelWhyProps, CasePanelWhyRow, CasePanelWhyTone } from './components/case-panel-why.js';
 export { CollapsibleSection, CollapsibleSectionProps } from './components/collapsible-section.js';
 export { ComplianceBadge, ComplianceBadgeProps, ComplianceStatus } from './components/compliance-badge.js';
 export { ContactChip, ContactChipProps } from './components/contact-chip.js';
 export { ContactChannel, ContactItem, ContactList, ContactListProps } from './components/contact-list.js';
-export { ContextualQuickActionContextLabel, ContextualQuickActionContextLabelProps, ContextualQuickActionItem, ContextualQuickActionLauncher, ContextualQuickActionLauncherProps } from './components/contextual-quick-action-launcher.js';
+export { ContextualQuickActionContextLabel, ContextualQuickActionContextLabelProps, ContextualQuickActionItem, ContextualQuickActionLauncher, ContextualQuickActionLauncherProps, ContextualQuickActionLauncherVariant } from './components/contextual-quick-action-launcher.js';
 export { CheckInsCard, RecentlyCompletedCard, TopTasksCard, UpcomingMeetingsCard } from './components/dashboard-cards.js';
 export { DataRow, DataTable, DataTableProps } from './components/data-table.js';
 export { ConditionFieldDef, ConditionFieldOption, ConditionFilterValue, ConditionOperator, ConditionOptionObject, DEFAULT_OPERATORS, DataTableConditionFilter, DataTableConditionFilterProps, OPERATOR_LABELS, generateConditionId, getOperators, shouldShowOptionSearch } from './components/data-table-condition-filter.js';

package/dist/index.js

@@ -10,6 +10,10 @@ export * from "./components/avatar.js";
 export * from "./components/badge.js";
 export * from "./components/button.js";
 export * from "./components/card.js";
+export * from "./components/case-panel-email-composer.js";
+export * from "./components/case-panel-activity-timeline.js";
+export * from "./components/case-panel-detail.js";
+export * from "./components/case-panel-why.js";
 import { CollapsibleSection } from "./components/collapsible-section.js";
 export * from "./components/compliance-badge.js";
 export * from "./components/contact-chip.js";

package/dist/index.js.map

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

package/package.json

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

package/src/components/__tests__/case-panel-activity-timeline.test.tsx

@@ -0,0 +1,152 @@
+import React from "react"
+import { describe, expect, it, vi } from "vitest"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import {
+  CasePanelActivityTimeline,
+  type CasePanelActivityEvent,
+} from "../case-panel-activity-timeline"
+
+function event(overrides: Partial<CasePanelActivityEvent> = {}): CasePanelActivityEvent {
+  return {
+    id: "event-1",
+    title: "Signal detected",
+    timeLabel: "2h ago",
+    tone: "blue",
+    payload: { kind: "generic", description: "A case update happened" },
+    ...overrides,
+  }
+}
+
+const visibleEvent = event()
+const systemNoiseEvent = event({
+  id: "system-1",
+  title: "System recalculated routing state",
+  timeLabel: "1h ago",
+  tone: "slate",
+  actor: { kind: "system" },
+  isSystemNoise: true,
+  payload: { kind: "generic", description: "Internal routing snapshot refreshed" },
+})
+
+describe("CasePanelActivityTimeline", () => {
+  it("renders collapsed by default with non-system count and last activity text", () => {
+    render(<CasePanelActivityTimeline events={[visibleEvent, systemNoiseEvent]} />)
+
+    expect(screen.getByRole("button", { name: /activity/i }).getAttribute("aria-expanded")).toBe("false")
+    expect(screen.getByText("1 event")).not.toBeNull()
+    expect(screen.getByText("Last activity 2h ago")).not.toBeNull()
+    expect(screen.queryByText("Signal detected")).toBeNull()
+  })
+
+  it("expands and renders visible timeline events", () => {
+    render(<CasePanelActivityTimeline events={[visibleEvent]} />)
+
+    fireEvent.click(screen.getByRole("button", { name: /activity/i }))
+
+    expect(screen.getByText("Signal detected")).not.toBeNull()
+    expect(screen.getByText("A case update happened")).not.toBeNull()
+    expect(screen.getByTestId("case-panel-activity-dot").className).toContain("bg-blue-50")
+  })
+
+  it("hides system noise until the Show system events toggle is enabled", () => {
+    render(<CasePanelActivityTimeline events={[visibleEvent, systemNoiseEvent]} defaultExpanded />)
+
+    expect((screen.getByLabelText("Show system events") as HTMLInputElement).checked).toBe(false)
+    expect(screen.getByText("Signal detected")).not.toBeNull()
+    expect(screen.queryByText("System recalculated routing state")).toBeNull()
+
+    fireEvent.click(screen.getByLabelText("Show system events"))
+
+    expect(screen.getByText("System recalculated routing state")).not.toBeNull()
+  })
+
+  it("applies actor byline rules without implying system when actor is missing", () => {
+    render(
+      <CasePanelActivityTimeline
+        defaultExpanded
+        events={[
+          event({ id: "missing-actor", title: "No actor event" }),
+          event({ id: "system-actor", title: "System actor event", actor: { kind: "system" } }),
+          event({ id: "integration-actor", title: "Integration actor event", actor: { kind: "integration", name: "Salesforce" } }),
+          event({ id: "user-actor", title: "User actor event", actor: { kind: "user", name: "Maya", verb: "approved this" } }),
+        ]}
+      />
+    )
+
+    const bylines = screen.getAllByTestId("case-panel-activity-byline")
+    expect(bylines).toHaveLength(2)
+    expect(bylines[0].textContent).toContain("Salesforce")
+    expect(bylines[0].textContent).toContain("synced this update")
+    expect(bylines[0].textContent).toContain("2h ago")
+    expect(bylines[1].textContent).toContain("Maya")
+    expect(bylines[1].textContent).toContain("approved this")
+    expect(bylines[1].textContent).toContain("2h ago")
+    expect(screen.queryByText("System")).toBeNull()
+  })
+
+  it("renders typed payload variants and dispatches typed signal actions", () => {
+    const onPayloadAction = vi.fn()
+    render(
+      <CasePanelActivityTimeline
+        defaultExpanded
+        onPayloadAction={onPayloadAction}
+        events={[
+          event({ id: "signal", title: "Signal", payload: { kind: "signal", key: "sig-1", summary: "Churn risk rose", detail: "Usage fell 30%." } }),
+          event({ id: "score", title: "Score", payload: { kind: "scoreUpdate", previousScore: 62, nextScore: 81, reason: "Executive engagement improved." } }),
+          event({ id: "rec", title: "Recommendation", payload: { kind: "recommendation", recommendation: "Send renewal brief", rationale: "Close date is within 14 days." } }),
+          event({ id: "email", title: "Email", payload: { kind: "email", from: "rep@example.com", to: "buyer@example.com", subject: "Renewal plan", preview: "Can we meet tomorrow?" } }),
+          event({ id: "deadline", title: "Deadline", payload: { kind: "deadline", dueLabel: "Due tomorrow", status: "due", description: "SLA response window." } }),
+          event({ id: "note", title: "Note", payload: { kind: "operatorNote", note: "Customer asked for legal review." } }),
+          event({ id: "assignment", title: "Assignment", payload: { kind: "assignment", assignee: "Jordan", from: "Maya", role: "Owner" } }),
+          event({ id: "opened", title: "Opened", payload: { kind: "caseOpened", source: "Gmail", openedBy: "Ari", description: "Inbound renewal request." } }),
+        ]}
+      />
+    )
+
+    expect(screen.getByTestId("case-panel-payload-signal").textContent).toContain("Churn risk rose")
+    expect(screen.getByTestId("case-panel-payload-scoreUpdate").textContent).toContain("62 → 81")
+    expect(screen.getByTestId("case-panel-payload-recommendation").textContent).toContain("Send renewal brief")
+    expect(screen.getByTestId("case-panel-payload-email").textContent).toContain("Renewal plan")
+    expect(screen.getByTestId("case-panel-payload-deadline").textContent).toContain("Due tomorrow")
+    expect(screen.getByTestId("case-panel-payload-operatorNote").textContent).toContain("Customer asked for legal review.")
+    expect(screen.getByTestId("case-panel-payload-assignment").textContent).toContain("Assigned to Jordan as Owner from Maya")
+    expect(screen.getByTestId("case-panel-payload-caseOpened").textContent).toContain("Case opened by Ari from Gmail")
+
+    fireEvent.click(screen.getByRole("button", { name: "Open signal" }))
+    expect(onPayloadAction).toHaveBeenCalledWith({ kind: "openSignal", key: "sig-1", eventId: "signal" })
+  })
+
+  it("renders the Salesforce deep-link slot", () => {
+    render(
+      <CasePanelActivityTimeline
+        defaultExpanded
+        events={[
+          event({
+            tone: "salesforce",
+            title: "Salesforce opportunity updated",
+            payload: {
+              kind: "salesforce",
+              objectLabel: "Opportunity",
+              recordLabel: "ACME Renewal",
+              changeSummary: "Stage moved to Negotiation.",
+              deepLink: { href: "https://salesforce.example.com/opp/123", label: "View opportunity" },
+            },
+          }),
+        ]}
+      />
+    )
+
+    const card = screen.getByTestId("case-panel-payload-salesforce")
+    expect(card.textContent).toContain("Opportunity")
+    expect(card.textContent).toContain("ACME Renewal")
+    const link = within(card).getByRole("link", { name: /view opportunity/i })
+    expect(link.getAttribute("href")).toBe("https://salesforce.example.com/opp/123")
+    expect(screen.getByTestId("case-panel-activity-dot").className).toContain("border-[#00A1E0]/25")
+  })
+
+  it("does not render a Detailed system log section", () => {
+    render(<CasePanelActivityTimeline events={[visibleEvent, systemNoiseEvent]} defaultExpanded defaultShowSystemEvents />)
+
+    expect(screen.queryByText(/detailed system log/i)).toBeNull()
+  })
+})