@handled-ai/design-system 0.18.31 → 0.18.33

package/src/components/__tests__/draft-feedback-inline.test.tsx

@@ -0,0 +1,72 @@
+/**
+ * Tests for DraftFeedbackInline.
+ *
+ * Covers:
+ *  - Clicking the up thumb activates the positive state (monochrome bg-muted)
+ *  - Clicking the down thumb activates the negative state (restrained red)
+ *  - Thumb icons render outline-only (never fill="currentColor")
+ *  - initialDirection="down" renders the down state pre-selected
+ *  - initialDirection="up" renders the up state pre-selected
+ */
+
+import { describe, it, expect } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { DraftFeedbackInline } from "../draft-feedback-inline"
+
+describe("DraftFeedbackInline", () => {
+  it("renders idle with no expanded feedback area", () => {
+    render(<DraftFeedbackInline />)
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+    expect(screen.queryByText("What needs improvement?")).toBeNull()
+  })
+
+  it("activates the positive state with monochrome tokens when up is clicked", () => {
+    const { container } = render(<DraftFeedbackInline />)
+    const buttons = container.querySelectorAll("button")
+    const upButton = buttons[0] as HTMLButtonElement
+    fireEvent.click(upButton)
+
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+    expect(upButton.className).toContain("bg-muted")
+    expect(upButton.className).toContain("text-foreground")
+    expect(upButton.className).not.toContain("emerald")
+  })
+
+  it("activates the negative state with restrained red when down is clicked", () => {
+    const { container } = render(<DraftFeedbackInline />)
+    const buttons = container.querySelectorAll("button")
+    const downButton = buttons[1] as HTMLButtonElement
+    fireEvent.click(downButton)
+
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(downButton.className).toContain("bg-red-50")
+    expect(downButton.className).toContain("text-red-600")
+    expect(downButton.className).not.toContain("bg-red-100")
+  })
+
+  it("renders thumb icons outline-only (never fill=currentColor)", () => {
+    const { container } = render(<DraftFeedbackInline />)
+    const buttons = container.querySelectorAll("button")
+    // Activate up so the icon would be "filled" under the old behavior.
+    fireEvent.click(buttons[0] as HTMLButtonElement)
+
+    const svgs = container.querySelectorAll("svg")
+    svgs.forEach((svg) => {
+      expect(svg.getAttribute("fill")).not.toBe("currentColor")
+    })
+  })
+
+  it("renders the down state pre-selected with initialDirection='down'", () => {
+    render(<DraftFeedbackInline initialDirection="down" />)
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+  })
+
+  it("renders the up state pre-selected with initialDirection='up'", () => {
+    render(<DraftFeedbackInline initialDirection="up" />)
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+    expect(screen.queryByText("What needs improvement?")).toBeNull()
+  })
+})

package/src/components/__tests__/suggested-actions-feedback-header.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * Tests for the SuggestedActions card header thumbs (feedback direction).
+ *
+ * Covers:
+ *  - Clicking up opens the feedback panel with direction "up"
+ *  - Clicking down opens the feedback panel with direction "down"
+ *  - Clicking the same direction again closes the panel
+ *  - Switching direction remounts DraftFeedbackInline (panel stays open, content switches)
+ */
+
+import { describe, it, expect } from "vitest"
+import React from "react"
+import { render, screen, fireEvent, within } from "@testing-library/react"
+import { SuggestedActions } from "../suggested-actions"
+import type { SuggestedAction } from "../suggested-actions"
+
+const action: SuggestedAction = {
+  id: 1,
+  type: "email",
+  label: "Send follow-up email",
+  status: "pending",
+  content: "<p>Hello there.</p>",
+}
+
+// The header thumbs are the only buttons that wrap a thumbs-up/down SVG and
+// live in the card header. We resolve them by locating the lucide icon class.
+function getHeaderThumbs(container: HTMLElement) {
+  const up = container.querySelector("button .lucide-thumbs-up")?.closest("button")
+  const down = container.querySelector("button .lucide-thumbs-down")?.closest("button")
+  return { up: up as HTMLButtonElement, down: down as HTMLButtonElement }
+}
+
+describe("SuggestedActions header thumbs", () => {
+  it("does not show the feedback panel initially", () => {
+    render(<SuggestedActions actions={[action]} />)
+    expect(screen.queryByText("How's this draft?")).toBeNull()
+  })
+
+  it("opens the feedback panel with direction up when up is clicked", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { up } = getHeaderThumbs(container)
+    fireEvent.click(up)
+
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+    expect(screen.queryByText("What needs improvement?")).toBeNull()
+    expect(up.className).toContain("bg-muted")
+    expect(up.className).toContain("text-foreground")
+  })
+
+  it("opens the feedback panel with direction down when down is clicked", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { down } = getHeaderThumbs(container)
+    fireEvent.click(down)
+
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+    expect(down.className).toContain("bg-red-50")
+    expect(down.className).toContain("text-red-600")
+  })
+
+  it("closes the panel when the same direction is clicked again", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { up } = getHeaderThumbs(container)
+    fireEvent.click(up)
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+
+    fireEvent.click(up)
+    expect(screen.queryByText("How's this draft?")).toBeNull()
+  })
+
+  it("switches direction (remounts DraftFeedbackInline) while keeping the panel open", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { up, down } = getHeaderThumbs(container)
+
+    fireEvent.click(up)
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+
+    fireEvent.click(down)
+    // Panel still open, but now showing the negative (down) variant.
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+  })
+})

package/src/components/draft-feedback-inline.tsx

@@ -70,7 +70,7 @@ export function DraftFeedbackInline({
   if (noted) {
     return (
       <div className="flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200">
-        <Check className="w-3.5 h-3.5 text-emerald-500" />
+        <Check className="w-3.5 h-3.5 text-foreground" />
         <span className="text-xs text-muted-foreground">Feedback recorded</span>
       </div>
     )
@@ -88,7 +88,7 @@ export function DraftFeedbackInline({
   }
 
   return (
-    <div className="space-y-0">
+    <div className="space-y-2">
       <div className="flex items-center justify-between">
         <span className="text-sm text-foreground font-medium">How&apos;s this draft?</span>
         <div className="flex gap-1">
@@ -100,11 +100,11 @@ export function DraftFeedbackInline({
             }}
             className={`p-1.5 rounded transition-colors ${
               thumbState === "up"
-                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+                ? "bg-muted text-foreground"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
-            <ThumbsUp className="w-4 h-4" fill={thumbState === "up" ? "currentColor" : "none"} />
+            <ThumbsUp className="w-4 h-4" />
           </button>
           <button
             onClick={() => {
@@ -114,31 +114,31 @@ export function DraftFeedbackInline({
             }}
             className={`p-1.5 rounded transition-colors ${
               thumbState === "down"
-                ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+                ? "bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-400"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
-            <ThumbsDown className="w-4 h-4" fill={thumbState === "down" ? "currentColor" : "none"} />
+            <ThumbsDown className="w-4 h-4" />
           </button>
         </div>
       </div>
 
       {thumbState && (
-        <div className="pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200">
+        <div className="pt-2 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200">
           <div>
             <span className="text-xs text-muted-foreground mb-2 block font-medium">
               {thumbState === "up" ? "What worked well?" : "What needs improvement?"}
             </span>
-            <div className="flex flex-wrap gap-1.5">
+            <div className="flex flex-wrap gap-2">
               {(thumbState === "up" ? positivePills : negativePills).map((pill) => (
                 <button
                   key={pill}
                   onClick={() => togglePill(pill)}
-                  className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${
+                  className={`px-3 py-1.5 rounded-full text-[11px] font-medium border transition-colors ${
                     selectedPills.includes(pill)
                       ? thumbState === "up"
-                        ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
-                        : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800"
+                        ? "bg-muted text-foreground border-border"
+                        : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800"
                       : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
                   }`}
                 >
@@ -155,7 +155,7 @@ export function DraftFeedbackInline({
             className="w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
           />
 
-          <div className="flex items-center gap-2 pt-1">
+          <div className="flex items-center gap-2.5 pt-2">
             {thumbState === "down" ? (
               <>
                 <button
@@ -191,3 +191,4 @@ export function DraftFeedbackInline({
     </div>
   )
 }
+

package/src/components/score-feedback.tsx

@@ -163,11 +163,11 @@ function Trigger({ className }: { className?: string }) {
         className={cn(
           "p-1.5 rounded transition-colors",
           thumbState === "up"
-            ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+            ? "bg-muted text-foreground"
             : "hover:bg-muted text-muted-foreground hover:text-foreground"
         )}
       >
-        <ThumbsUp className="w-3.5 h-3.5" fill={thumbState === "up" ? "currentColor" : "none"} />
+        <ThumbsUp className="w-3.5 h-3.5" />
       </button>
       <button
         type="button"
@@ -175,11 +175,11 @@ function Trigger({ className }: { className?: string }) {
         className={cn(
           "p-1.5 rounded transition-colors",
           thumbState === "down"
-            ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+            ? "bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-400"
             : "hover:bg-muted text-muted-foreground hover:text-foreground"
         )}
       >
-        <ThumbsDown className="w-3.5 h-3.5" fill={thumbState === "down" ? "currentColor" : "none"} />
+        <ThumbsDown className="w-3.5 h-3.5" />
       </button>
     </div>
   )
@@ -219,8 +219,8 @@ function Panel({ className }: { className?: string }) {
                   "px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors",
                   selectedPills.includes(pill)
                     ? thumbState === "up"
-                      ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
-                      : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800"
+                      ? "bg-muted text-foreground border-border"
+                      : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800"
                     : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
                 )}
               >

package/src/components/suggested-actions.tsx

@@ -925,6 +925,7 @@ function SuggestedActionCard({
   )
   const [showAiEdit, setShowAiEdit] = React.useState(false)
   const [feedbackOpen, setFeedbackOpen] = React.useState(false)
+  const [feedbackDirection, setFeedbackDirection] = React.useState<"up" | "down" | null>(null)
   const [followUpEnabled, setFollowUpEnabled] = React.useState(action.followUp?.enabled ?? false)
   const [threadExpanded, setThreadExpanded] = React.useState(false)
   const [expandedMessageId, setExpandedMessageId] = React.useState<string | null>(null)
@@ -1016,18 +1017,38 @@ function SuggestedActionCard({
         </div>
         <div className="flex items-center gap-1.5">
           <button
-            onClick={() => setFeedbackOpen(!feedbackOpen)}
+            onClick={() => {
+              if (feedbackOpen && feedbackDirection === "up") {
+                setFeedbackOpen(false)
+                setFeedbackDirection(null)
+              } else {
+                setFeedbackDirection("up")
+                setFeedbackOpen(true)
+              }
+            }}
             className={`p-1.5 rounded transition-colors ${
-              feedbackOpen
-                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+              feedbackOpen && feedbackDirection === "up"
+                ? "bg-muted text-foreground"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
             <ThumbsUp className="w-3.5 h-3.5" />
           </button>
           <button
-            onClick={() => setFeedbackOpen(!feedbackOpen)}
-            className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-foreground"
+            onClick={() => {
+              if (feedbackOpen && feedbackDirection === "down") {
+                setFeedbackOpen(false)
+                setFeedbackDirection(null)
+              } else {
+                setFeedbackDirection("down")
+                setFeedbackOpen(true)
+              }
+            }}
+            className={`p-1.5 rounded transition-colors ${
+              feedbackOpen && feedbackDirection === "down"
+                ? "bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-400"
+                : "hover:bg-muted text-muted-foreground hover:text-foreground"
+            }`}
           >
             <ThumbsDown className="w-3.5 h-3.5" />
           </button>
@@ -1047,6 +1068,8 @@ function SuggestedActionCard({
       {feedbackOpen && (
         <div className="px-5 py-3 border-b border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
           <DraftFeedbackInline
+            key={`feedback-${feedbackDirection}`}
+            initialDirection={feedbackDirection}
             onRegenerateRequest={(pills, detail) => {
               onFeedback?.("down", pills, detail)
             }}

package/src/index.ts

@@ -76,7 +76,6 @@ export {
 } from "./components/quick-action-modal"
 export * from "./components/quick-action-sidebar-nav"
 export * from "./components/recommended-actions-section"
-export * from "./components/related-record-action-card"
 export * from "./components/report-card"
 export * from "./components/rich-text-toolbar"
 export * from "./components/score-analysis-modal"

package/dist/components/related-record-action-card.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-type RelatedRecordActionCardKind = "case" | "account" | "opportunity" | "salesforce" | "generic";
-type RelatedRecordActionIcon = "salesforce" | React.ReactNode;
-interface RelatedRecordActionCardProps {
-    kind: RelatedRecordActionCardKind;
-    label: string;
-    subtitle?: string;
-    disabledReason?: string;
-    href?: string;
-    external?: boolean;
-    icon?: RelatedRecordActionIcon;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    className?: string;
-    testId?: string;
-}
-declare function RelatedRecordActionCard({ kind, label, subtitle, disabledReason, href, external, icon, onClick, className, testId, }: RelatedRecordActionCardProps): React.JSX.Element;
-
-export { RelatedRecordActionCard, type RelatedRecordActionCardKind, type RelatedRecordActionCardProps, type RelatedRecordActionIcon };

package/dist/components/related-record-action-card.js

@@ -1,147 +0,0 @@
-"use client"
-
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ExternalLink } from "lucide-react";
-import { BRAND_ICONS } from "../lib/icons.js";
-import { cn } from "../lib/utils.js";
-function renderActionIcon(icon, kind) {
-  if (icon === "salesforce" || kind === "salesforce") {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: BRAND_ICONS.salesforce,
-        alt: "Salesforce",
-        className: "h-4 w-4 object-contain",
-        draggable: false
-      }
-    );
-  }
-  if (icon) {
-    return icon;
-  }
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: kind.slice(0, 1).toUpperCase() });
-}
-function RelatedRecordActionCard({
-  kind,
-  label,
-  subtitle,
-  disabledReason,
-  href,
-  external,
-  icon,
-  onClick,
-  className,
-  testId
-}) {
-  const isDisabled = Boolean(disabledReason) || !href && !onClick;
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-slot": "related-record-action-card-icon",
-        className: cn(
-          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors",
-          isDisabled ? "border-border/60 bg-muted/40 text-muted-foreground" : "border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary"
-        ),
-        children: renderActionIcon(icon, kind)
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "related-record-action-card-label",
-          className: cn(
-            "block truncate text-sm font-medium transition-colors",
-            isDisabled ? "text-muted-foreground" : "text-foreground group-active:text-primary"
-          ),
-          children: label
-        }
-      ),
-      subtitle && /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "related-record-action-card-subtitle",
-          className: "mt-0.5 block truncate text-xs text-muted-foreground",
-          children: subtitle
-        }
-      ),
-      disabledReason && /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "related-record-action-card-disabled-reason",
-          className: "mt-1 block text-xs text-muted-foreground",
-          children: disabledReason
-        }
-      )
-    ] }),
-    external && /* @__PURE__ */ jsx(
-      ExternalLink,
-      {
-        "aria-hidden": "true",
-        "data-slot": "related-record-action-card-external-icon",
-        className: cn(
-          "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
-          isDisabled ? "" : "group-active:text-primary"
-        )
-      }
-    )
-  ] });
-  if (isDisabled) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-disabled": "true",
-        "data-kind": kind,
-        "data-slot": "related-record-action-card",
-        "data-testid": testId,
-        className: cn(
-          "group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors",
-          "cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70",
-          className
-        ),
-        children: content
-      }
-    );
-  }
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        target: external ? "_blank" : void 0,
-        rel: external ? "noopener noreferrer" : void 0,
-        "data-kind": kind,
-        "data-slot": "related-record-action-card",
-        "data-testid": testId,
-        className: cn(
-          "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
-          "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
-          className
-        ),
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "data-kind": kind,
-      "data-slot": "related-record-action-card",
-      "data-testid": testId,
-      className: cn(
-        "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
-        "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
-        className
-      ),
-      children: content
-    }
-  );
-}
-export {
-  RelatedRecordActionCard
-};
-//# sourceMappingURL=related-record-action-card.js.map

package/dist/components/related-record-action-card.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/related-record-action-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { BRAND_ICONS } from \"../lib/icons\"\nimport { cn } from \"../lib/utils\"\n\nexport type RelatedRecordActionCardKind = \"case\" | \"account\" | \"opportunity\" | \"salesforce\" | \"generic\"\n\nexport type RelatedRecordActionIcon = \"salesforce\" | React.ReactNode\n\nexport interface RelatedRecordActionCardProps {\n  kind: RelatedRecordActionCardKind\n  label: string\n  subtitle?: string\n  disabledReason?: string\n  href?: string\n  external?: boolean\n  icon?: RelatedRecordActionIcon\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n  className?: string\n  testId?: string\n}\n\nfunction renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {\n  if (icon === \"salesforce\" || kind === \"salesforce\") {\n    return (\n      <img\n        src={BRAND_ICONS.salesforce}\n        alt=\"Salesforce\"\n        className=\"h-4 w-4 object-contain\"\n        draggable={false}\n      />\n    )\n  }\n\n  if (icon) {\n    return icon\n  }\n\n  return <span aria-hidden=\"true\">{kind.slice(0, 1).toUpperCase()}</span>\n}\n\nexport function RelatedRecordActionCard({\n  kind,\n  label,\n  subtitle,\n  disabledReason,\n  href,\n  external,\n  icon,\n  onClick,\n  className,\n  testId,\n}: RelatedRecordActionCardProps) {\n  const isDisabled = Boolean(disabledReason) || (!href && !onClick)\n\n  const content = (\n    <>\n      <span\n        data-slot=\"related-record-action-card-icon\"\n        className={cn(\n          \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors\",\n          isDisabled\n            ? \"border-border/60 bg-muted/40 text-muted-foreground\"\n            : \"border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary\"\n        )}\n      >\n        {renderActionIcon(icon, kind)}\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span\n          data-slot=\"related-record-action-card-label\"\n          className={cn(\n            \"block truncate text-sm font-medium transition-colors\",\n            isDisabled ? \"text-muted-foreground\" : \"text-foreground group-active:text-primary\"\n          )}\n        >\n          {label}\n        </span>\n        {subtitle && (\n          <span\n            data-slot=\"related-record-action-card-subtitle\"\n            className=\"mt-0.5 block truncate text-xs text-muted-foreground\"\n          >\n            {subtitle}\n          </span>\n        )}\n        {disabledReason && (\n          <span\n            data-slot=\"related-record-action-card-disabled-reason\"\n            className=\"mt-1 block text-xs text-muted-foreground\"\n          >\n            {disabledReason}\n          </span>\n        )}\n      </span>\n      {external && (\n        <ExternalLink\n          aria-hidden=\"true\"\n          data-slot=\"related-record-action-card-external-icon\"\n          className={cn(\n            \"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors\",\n            isDisabled ? \"\" : \"group-active:text-primary\"\n          )}\n        />\n      )}\n    </>\n  )\n\n  if (isDisabled) {\n    return (\n      <div\n        aria-disabled=\"true\"\n        data-kind={kind}\n        data-slot=\"related-record-action-card\"\n        data-testid={testId}\n        className={cn(\n          \"group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors\",\n          \"cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70\",\n          className\n        )}\n      >\n        {content}\n      </div>\n    )\n  }\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        data-kind={kind}\n        data-slot=\"related-record-action-card\"\n        data-testid={testId}\n        className={cn(\n          \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n          \"cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary\",\n          className\n        )}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      data-kind={kind}\n      data-slot=\"related-record-action-card\"\n      data-testid={testId}\n      className={cn(\n        \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n        \"cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary\",\n        className\n      )}\n    >\n      {content}\n    </button>\n  )\n}\n"],"mappings":";AA4BM,SA+BF,UA/BE,KA2CA,YA3CA;AAzBN,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAmBnB,SAAS,iBAAiB,MAA2C,MAAmC;AACtG,MAAI,SAAS,gBAAgB,SAAS,cAAc;AAClD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACb;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,UAAK,eAAY,QAAQ,eAAK,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE;AAClE;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,aAAa,QAAQ,cAAc,KAAM,CAAC,QAAQ,CAAC;AAEzD,QAAM,UACJ,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,aACI,uDACA;AAAA,QACN;AAAA,QAEC,2BAAiB,MAAM,IAAI;AAAA;AAAA,IAC9B;AAAA,IACA,qBAAC,UAAK,WAAU,kBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,aAAa,0BAA0B;AAAA,UACzC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAED,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,aAAa,KAAK;AAAA,QACpB;AAAA;AAAA,IACF;AAAA,KAEJ;AAGF,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,KAAK,WAAW,wBAAwB;AAAA,QACxC,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,aAAW;AAAA,MACX,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/src/components/__tests__/related-record-action-card.test.tsx

@@ -1,122 +0,0 @@
-import "@testing-library/jest-dom/vitest"
-
-import React from "react"
-import { fireEvent, render, screen } from "@testing-library/react"
-import { describe, expect, it, vi } from "vitest"
-
-import { BRAND_ICONS } from "../../lib/icons"
-import { RelatedRecordActionCard } from "../related-record-action-card"
-
-describe("RelatedRecordActionCard", () => {
-  it("renders an enabled href as a link with pointer affordance", () => {
-    render(
-      <RelatedRecordActionCard
-        kind="account"
-        label="Open account"
-        subtitle="Acme Corp"
-        href="/accounts/acme"
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card.tagName).toBe("A")
-    expect(card).toHaveAttribute("href", "/accounts/acme")
-    expect(card.className).toContain("cursor-pointer")
-    expect(card.className).toContain("hover:bg-muted/50")
-    expect(card.className).toContain("hover:border-border/80")
-    expect(card.className).toContain("focus-visible:ring-2")
-    expect(card.className).toContain("active:text-primary")
-    expect(screen.getByText("Acme Corp")).toBeInTheDocument()
-  })
-
-  it("renders an enabled onClick action as a button and invokes the callback", () => {
-    const onClick = vi.fn()
-
-    render(
-      <RelatedRecordActionCard
-        kind="case"
-        label="Open case"
-        onClick={onClick}
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByRole("button", { name: /open case/i })
-
-    expect(card.tagName).toBe("BUTTON")
-    expect(card).toHaveAttribute("type", "button")
-    expect(card.className).toContain("cursor-pointer")
-
-    fireEvent.click(card)
-
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it("renders a disabled card when disabledReason is present", () => {
-    render(
-      <RelatedRecordActionCard
-        kind="opportunity"
-        label="Open opportunity"
-        disabledReason="Connect Salesforce to view this opportunity."
-        href="/opportunities/1"
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card.tagName).toBe("DIV")
-    expect(card).toHaveAttribute("aria-disabled", "true")
-    expect(card.className).toContain("cursor-not-allowed")
-    expect(card.className).toContain("text-muted-foreground")
-    expect(card.className).not.toContain("cursor-pointer")
-    expect(card.className).not.toContain("hover:bg-muted/50")
-    expect(screen.getByText("Connect Salesforce to view this opportunity.")).toBeInTheDocument()
-  })
-
-  it("renders a disabled card when no action is available", () => {
-    render(<RelatedRecordActionCard kind="generic" label="Unavailable record" testId="record-card" />)
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card.tagName).toBe("DIV")
-    expect(card).toHaveAttribute("aria-disabled", "true")
-    expect(card.className).toContain("cursor-not-allowed")
-  })
-
-  it("sets external link attributes and shows the external icon", () => {
-    const { container } = render(
-      <RelatedRecordActionCard
-        kind="salesforce"
-        label="Open in Salesforce"
-        href="https://example.salesforce.com/001"
-        external
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card).toHaveAttribute("target", "_blank")
-    expect(card).toHaveAttribute("rel", "noopener noreferrer")
-    expect(container.querySelector('[data-slot="related-record-action-card-external-icon"]')).not.toBeNull()
-  })
-
-  it("renders the Salesforce brand icon when icon is salesforce", () => {
-    const { container } = render(
-      <RelatedRecordActionCard
-        kind="generic"
-        label="Salesforce record"
-        href="https://example.salesforce.com/001"
-        icon="salesforce"
-      />
-    )
-
-    const icon = container.querySelector('[data-slot="related-record-action-card-icon"] img')
-
-    expect(icon).toHaveAttribute("src", BRAND_ICONS.salesforce)
-    expect(icon).toHaveAttribute("alt", "Salesforce")
-  })
-})