@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/recommended-actions-section.js

@@ -0,0 +1,215 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  CheckSquare,
+  Clock,
+  DollarSign,
+  HelpCircle,
+  MessageSquare,
+  SkipForward,
+  ThumbsDown,
+  ThumbsUp,
+  Users,
+  X
+} from "lucide-react";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+function getCategoryBadgeClass(category) {
+  if (category === "Churn") return "bg-white text-black border-red-300";
+  if (category === "Expand") return "bg-green-100 text-green-800 border-green-200";
+  if (category === "Nurture") return "bg-blue-100 text-blue-800 border-blue-200";
+  return "bg-muted text-muted-foreground border-border";
+}
+function getPriorityBadgeClass(priority) {
+  if (priority === "High") return "border-foreground text-foreground";
+  if (priority === "Medium") return "border-muted-foreground text-muted-foreground";
+  return "border-border text-muted-foreground";
+}
+function RecommendedActionsSection({
+  actions,
+  title = "Recommended Actions",
+  onQueueAction,
+  onDismissAction,
+  onFeedback
+}) {
+  const [dismissedActions, setDismissedActions] = React.useState(/* @__PURE__ */ new Set());
+  const [actionFeedback, setActionFeedback] = React.useState({});
+  const [feedbackComment, setFeedbackComment] = React.useState({});
+  const [commentOpen, setCommentOpen] = React.useState({});
+  const visibleActions = actions.filter((action) => !dismissedActions.has(action.id));
+  const handleDismissAction = (action) => {
+    setDismissedActions((previous) => /* @__PURE__ */ new Set([...previous, action.id]));
+    onDismissAction == null ? void 0 : onDismissAction(action);
+  };
+  const handleFeedback = (actionId, feedback) => {
+    setActionFeedback((previous) => __spreadProps(__spreadValues({}, previous), { [actionId]: feedback }));
+    setCommentOpen((previous) => __spreadProps(__spreadValues({}, previous), { [actionId]: true }));
+  };
+  const submitFeedback = (actionId) => {
+    var _a, _b;
+    const feedback = actionFeedback[actionId];
+    if (!feedback) return;
+    onFeedback == null ? void 0 : onFeedback(actionId, feedback, (_b = (_a = feedbackComment[actionId]) == null ? void 0 : _a.trim()) != null ? _b : "");
+    setCommentOpen((previous) => __spreadProps(__spreadValues({}, previous), { [actionId]: false }));
+    setFeedbackComment((previous) => __spreadProps(__spreadValues({}, previous), { [actionId]: "" }));
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "border-t border-border py-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-bold uppercase tracking-wider text-muted-foreground/70", children: title }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        visibleActions.length,
+        " actions"
+      ] })
+    ] }),
+    visibleActions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground", children: "All recommended actions are dismissed." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: visibleActions.map((action) => {
+      var _a, _b, _c, _d;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group rounded-md border border-border bg-background p-4 transition-colors hover:bg-muted/20",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium leading-snug text-foreground", children: action.title }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Badge, { variant: "outline", className: `px-2.5 py-1 text-xs font-medium ${getCategoryBadgeClass(action.category)}`, children: (_a = action.category) != null ? _a : "General" }),
+                  /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: `cursor-help px-2.5 py-1 text-xs ${getPriorityBadgeClass(action.priority)}`, children: [
+                      /* @__PURE__ */ jsx(DollarSign, { className: "mr-1 h-3 w-3" }),
+                      (_b = action.priority) != null ? _b : "Medium",
+                      /* @__PURE__ */ jsx(HelpCircle, { className: "ml-1 h-3 w-3" })
+                    ] }) }),
+                    /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed", children: action.confidence ? `${Math.round(action.confidence * 100)}% confidence based on current account signals.` : "Priority reflects expected impact and urgency." }) })
+                  ] }) }),
+                  typeof action.revenueImpact === "number" && /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [
+                    "+$",
+                    action.revenueImpact.toLocaleString(),
+                    "/mo impact"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8 bg-foreground text-background hover:bg-foreground/90",
+                    onClick: () => onQueueAction == null ? void 0 : onQueueAction(action),
+                    children: /* @__PURE__ */ jsx(CheckSquare, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8 text-muted-foreground hover:bg-muted hover:text-foreground",
+                    onClick: () => handleDismissAction(action),
+                    children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm leading-relaxed text-muted-foreground", children: action.reason }),
+            action.signals && action.signals.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-1.5", children: action.signals.map((signal) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px]", children: signal }, `${action.id}-${signal}`)) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: (_c = action.dueDate) != null ? _c : "This week" }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
+                /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", children: /* @__PURE__ */ jsx(SkipForward, { className: "h-3.5 w-3.5" }) }) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { children: "Skip" })
+                ] }),
+                /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", children: /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }) }) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { children: "Snooze" })
+                ] }),
+                /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", children: /* @__PURE__ */ jsx(Users, { className: "h-3.5 w-3.5" }) }) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { children: "Delegate" })
+                ] }),
+                /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", children: /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5" }) }) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { children: "Add comment" })
+                ] })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-border/50 pt-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: `h-7 text-xs ${actionFeedback[action.id] === "useful" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : ""}`,
+                    onClick: () => handleFeedback(action.id, "useful"),
+                    children: [
+                      /* @__PURE__ */ jsx(ThumbsUp, { className: "mr-1.5 h-3.5 w-3.5" }),
+                      "Helpful"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: `h-7 text-xs ${actionFeedback[action.id] === "not_useful" ? "border-red-200 bg-red-50 text-red-700" : ""}`,
+                    onClick: () => handleFeedback(action.id, "not_useful"),
+                    children: [
+                      /* @__PURE__ */ jsx(ThumbsDown, { className: "mr-1.5 h-3.5 w-3.5" }),
+                      "Not helpful"
+                    ]
+                  }
+                )
+              ] }),
+              commentOpen[action.id] && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: (_d = feedbackComment[action.id]) != null ? _d : "",
+                    onChange: (event) => setFeedbackComment((previous) => __spreadProps(__spreadValues({}, previous), {
+                      [action.id]: event.target.value
+                    })),
+                    placeholder: "Optional context for this feedback",
+                    className: "h-8 flex-1 rounded-md border border-border bg-background px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { size: "sm", className: "h-8 text-xs", onClick: () => submitFeedback(action.id), children: "Submit" })
+              ] })
+            ] })
+          ]
+        },
+        action.id
+      );
+    }) })
+  ] });
+}
+export {
+  RecommendedActionsSection
+};
+//# sourceMappingURL=recommended-actions-section.js.map

package/dist/components/recommended-actions-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/recommended-actions-section.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  CheckSquare,\n  Clock,\n  DollarSign,\n  HelpCircle,\n  MessageSquare,\n  SkipForward,\n  ThumbsDown,\n  ThumbsUp,\n  Users,\n  X,\n} from \"lucide-react\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\"\n\nexport interface RecommendedAction {\n  id: string\n  title: string\n  reason: string\n  category?: \"Churn\" | \"Expand\" | \"Nurture\" | string\n  priority?: \"High\" | \"Medium\" | \"Low\" | string\n  dueDate?: string\n  confidence?: number\n  signals?: string[]\n  revenueImpact?: number\n}\n\ninterface RecommendedActionsSectionProps {\n  actions: RecommendedAction[]\n  title?: string\n  onQueueAction?: (action: RecommendedAction) => void\n  onDismissAction?: (action: RecommendedAction) => void\n  onFeedback?: (actionId: string, feedback: \"useful\" | \"not_useful\", comment: string) => void\n}\n\nfunction getCategoryBadgeClass(category?: string) {\n  if (category === \"Churn\") return \"bg-white text-black border-red-300\"\n  if (category === \"Expand\") return \"bg-green-100 text-green-800 border-green-200\"\n  if (category === \"Nurture\") return \"bg-blue-100 text-blue-800 border-blue-200\"\n  return \"bg-muted text-muted-foreground border-border\"\n}\n\nfunction getPriorityBadgeClass(priority?: string) {\n  if (priority === \"High\") return \"border-foreground text-foreground\"\n  if (priority === \"Medium\") return \"border-muted-foreground text-muted-foreground\"\n  return \"border-border text-muted-foreground\"\n}\n\nexport function RecommendedActionsSection({\n  actions,\n  title = \"Recommended Actions\",\n  onQueueAction,\n  onDismissAction,\n  onFeedback,\n}: RecommendedActionsSectionProps) {\n  const [dismissedActions, setDismissedActions] = React.useState<Set<string>>(new Set())\n  const [actionFeedback, setActionFeedback] = React.useState<Record<string, \"useful\" | \"not_useful\" | null>>({})\n  const [feedbackComment, setFeedbackComment] = React.useState<Record<string, string>>({})\n  const [commentOpen, setCommentOpen] = React.useState<Record<string, boolean>>({})\n\n  const visibleActions = actions.filter((action) => !dismissedActions.has(action.id))\n\n  const handleDismissAction = (action: RecommendedAction) => {\n    setDismissedActions((previous) => new Set([...previous, action.id]))\n    onDismissAction?.(action)\n  }\n\n  const handleFeedback = (actionId: string, feedback: \"useful\" | \"not_useful\") => {\n    setActionFeedback((previous) => ({ ...previous, [actionId]: feedback }))\n    setCommentOpen((previous) => ({ ...previous, [actionId]: true }))\n  }\n\n  const submitFeedback = (actionId: string) => {\n    const feedback = actionFeedback[actionId]\n    if (!feedback) return\n\n    onFeedback?.(actionId, feedback, feedbackComment[actionId]?.trim() ?? \"\")\n    setCommentOpen((previous) => ({ ...previous, [actionId]: false }))\n    setFeedbackComment((previous) => ({ ...previous, [actionId]: \"\" }))\n  }\n\n  return (\n    <section className=\"border-t border-border py-6\">\n      <div className=\"mb-4 flex items-center justify-between\">\n        <h3 className=\"text-[11px] font-bold uppercase tracking-wider text-muted-foreground/70\">{title}</h3>\n        <span className=\"text-xs text-muted-foreground\">{visibleActions.length} actions</span>\n      </div>\n\n      {visibleActions.length === 0 ? (\n        <div className=\"rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground\">\n          All recommended actions are dismissed.\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {visibleActions.map((action) => (\n            <div\n              key={action.id}\n              className=\"group rounded-md border border-border bg-background p-4 transition-colors hover:bg-muted/20\"\n            >\n              <div className=\"mb-3 flex items-start justify-between gap-3\">\n                <div className=\"min-w-0 flex-1 space-y-2\">\n                  <h4 className=\"text-sm font-medium leading-snug text-foreground\">{action.title}</h4>\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <Badge variant=\"outline\" className={`px-2.5 py-1 text-xs font-medium ${getCategoryBadgeClass(action.category)}`}>\n                      {action.category ?? \"General\"}\n                    </Badge>\n                    <TooltipProvider delayDuration={200}>\n                      <Tooltip>\n                        <TooltipTrigger asChild>\n                          <Badge variant=\"outline\" className={`cursor-help px-2.5 py-1 text-xs ${getPriorityBadgeClass(action.priority)}`}>\n                            <DollarSign className=\"mr-1 h-3 w-3\" />\n                            {action.priority ?? \"Medium\"}\n                            <HelpCircle className=\"ml-1 h-3 w-3\" />\n                          </Badge>\n                        </TooltipTrigger>\n                        <TooltipContent className=\"max-w-xs\">\n                          <p className=\"text-xs leading-relaxed\">\n                            {action.confidence\n                              ? `${Math.round(action.confidence * 100)}% confidence based on current account signals.`\n                              : \"Priority reflects expected impact and urgency.\"}\n                          </p>\n                        </TooltipContent>\n                      </Tooltip>\n                    </TooltipProvider>\n                    {typeof action.revenueImpact === \"number\" && (\n                      <span className=\"text-xs font-medium text-muted-foreground\">\n                        +${action.revenueImpact.toLocaleString()}/mo impact\n                      </span>\n                    )}\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-2\">\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"h-8 w-8 bg-foreground text-background hover:bg-foreground/90\"\n                    onClick={() => onQueueAction?.(action)}\n                  >\n                    <CheckSquare className=\"h-4 w-4\" />\n                  </Button>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"h-8 w-8 text-muted-foreground hover:bg-muted hover:text-foreground\"\n                    onClick={() => handleDismissAction(action)}\n                  >\n                    <X className=\"h-4 w-4\" />\n                  </Button>\n                </div>\n              </div>\n\n              <p className=\"mb-3 text-sm leading-relaxed text-muted-foreground\">{action.reason}</p>\n\n              {action.signals && action.signals.length > 0 && (\n                <div className=\"mb-3 flex flex-wrap gap-1.5\">\n                  {action.signals.map((signal) => (\n                    <Badge key={`${action.id}-${signal}`} variant=\"secondary\" className=\"text-[10px]\">\n                      {signal}\n                    </Badge>\n                  ))}\n                </div>\n              )}\n\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-xs text-muted-foreground\">{action.dueDate ?? \"This week\"}</span>\n\n                <div className=\"flex items-center gap-1.5\">\n                  <TooltipProvider delayDuration={200}>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6\">\n                          <SkipForward className=\"h-3.5 w-3.5\" />\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>Skip</TooltipContent>\n                    </Tooltip>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6\">\n                          <Clock className=\"h-3.5 w-3.5\" />\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>Snooze</TooltipContent>\n                    </Tooltip>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6\">\n                          <Users className=\"h-3.5 w-3.5\" />\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>Delegate</TooltipContent>\n                    </Tooltip>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6\">\n                          <MessageSquare className=\"h-3.5 w-3.5\" />\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>Add comment</TooltipContent>\n                    </Tooltip>\n                  </TooltipProvider>\n                </div>\n              </div>\n\n              <div className=\"mt-3 border-t border-border/50 pt-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className={`h-7 text-xs ${actionFeedback[action.id] === \"useful\" ? \"border-emerald-200 bg-emerald-50 text-emerald-700\" : \"\"}`}\n                    onClick={() => handleFeedback(action.id, \"useful\")}\n                  >\n                    <ThumbsUp className=\"mr-1.5 h-3.5 w-3.5\" />\n                    Helpful\n                  </Button>\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className={`h-7 text-xs ${actionFeedback[action.id] === \"not_useful\" ? \"border-red-200 bg-red-50 text-red-700\" : \"\"}`}\n                    onClick={() => handleFeedback(action.id, \"not_useful\")}\n                  >\n                    <ThumbsDown className=\"mr-1.5 h-3.5 w-3.5\" />\n                    Not helpful\n                  </Button>\n                </div>\n\n                {commentOpen[action.id] && (\n                  <div className=\"mt-2 flex gap-2\">\n                    <input\n                      type=\"text\"\n                      value={feedbackComment[action.id] ?? \"\"}\n                      onChange={(event) =>\n                        setFeedbackComment((previous) => ({\n                          ...previous,\n                          [action.id]: event.target.value,\n                        }))\n                      }\n                      placeholder=\"Optional context for this feedback\"\n                      className=\"h-8 flex-1 rounded-md border border-border bg-background px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring\"\n                    />\n                    <Button size=\"sm\" className=\"h-8 text-xs\" onClick={() => submitFeedback(action.id)}>\n                      Submit\n                    </Button>\n                  </div>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </section>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/report-card.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface ReportCardFilterOption {
+    label: string;
+    value: string;
+}
+interface ReportCardProps {
+    title: string;
+    subtitle?: string;
+    /** Filter pill group rendered top-right */
+    filterOptions?: ReportCardFilterOption[];
+    selectedFilter?: string;
+    onFilterChange?: (value: string) => void;
+    /** Secondary toggle (e.g. metric selector) */
+    toggleOptions?: string[];
+    selectedToggle?: string;
+    onToggleChange?: (value: string) => void;
+    /** Render slot between header and content */
+    headerExtra?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+declare function ReportCard({ title, subtitle, filterOptions, selectedFilter, onFilterChange, toggleOptions, selectedToggle, onToggleChange, headerExtra, children, className, contentClassName, }: ReportCardProps): React.JSX.Element;
+
+export { ReportCard, type ReportCardProps };

package/dist/components/report-card.js

@@ -0,0 +1,69 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function ReportCard({
+  title,
+  subtitle,
+  filterOptions,
+  selectedFilter,
+  onFilterChange,
+  toggleOptions,
+  selectedToggle,
+  onToggleChange,
+  headerExtra,
+  children,
+  className,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-card shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-b border-border/60 px-6 py-5 sm:flex-row sm:items-center sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-bold text-foreground", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            toggleOptions && toggleOptions.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 rounded-lg bg-muted p-1", children: toggleOptions.map((opt) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onToggleChange == null ? void 0 : onToggleChange(opt),
+                className: cn(
+                  "rounded-md px-3 py-1 text-xs font-medium transition-all",
+                  selectedToggle === opt ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: opt
+              },
+              opt
+            )) }),
+            filterOptions && filterOptions.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 rounded-lg bg-muted p-1", children: filterOptions.map((opt) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onFilterChange == null ? void 0 : onFilterChange(opt.value),
+                className: cn(
+                  "h-7 rounded-md border-none bg-transparent px-3 text-xs font-medium shadow-none transition-all hover:bg-white",
+                  selectedFilter === opt.value && "bg-background text-foreground shadow-sm"
+                ),
+                children: opt.label
+              },
+              opt.value
+            )) })
+          ] })
+        ] }),
+        headerExtra && /* @__PURE__ */ jsx("div", { className: "border-b border-border/40 px-6 py-3", children: headerExtra }),
+        /* @__PURE__ */ jsx("div", { className: cn("p-6", contentClassName), children })
+      ]
+    }
+  );
+}
+export {
+  ReportCard
+};
+//# sourceMappingURL=report-card.js.map

package/dist/components/report-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/report-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface ReportCardFilterOption {\n  label: string\n  value: string\n}\n\nexport interface ReportCardProps {\n  title: string\n  subtitle?: string\n  /** Filter pill group rendered top-right */\n  filterOptions?: ReportCardFilterOption[]\n  selectedFilter?: string\n  onFilterChange?: (value: string) => void\n  /** Secondary toggle (e.g. metric selector) */\n  toggleOptions?: string[]\n  selectedToggle?: string\n  onToggleChange?: (value: string) => void\n  /** Render slot between header and content */\n  headerExtra?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  contentClassName?: string\n}\n\nexport function ReportCard({\n  title,\n  subtitle,\n  filterOptions,\n  selectedFilter,\n  onFilterChange,\n  toggleOptions,\n  selectedToggle,\n  onToggleChange,\n  headerExtra,\n  children,\n  className,\n  contentClassName,\n}: ReportCardProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-border bg-card shadow-sm\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-3 border-b border-border/60 px-6 py-5 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"min-w-0\">\n          <h3 className=\"text-sm font-bold text-foreground\">{title}</h3>\n          {subtitle && (\n            <p className=\"mt-0.5 text-xs text-muted-foreground\">{subtitle}</p>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-3\">\n          {toggleOptions && toggleOptions.length > 1 && (\n            <div className=\"flex items-center gap-1 rounded-lg bg-muted p-1\">\n              {toggleOptions.map((opt) => (\n                <button\n                  key={opt}\n                  onClick={() => onToggleChange?.(opt)}\n                  className={cn(\n                    \"rounded-md px-3 py-1 text-xs font-medium transition-all\",\n                    selectedToggle === opt\n                      ? \"bg-background text-foreground shadow-sm\"\n                      : \"text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {opt}\n                </button>\n              ))}\n            </div>\n          )}\n\n          {filterOptions && filterOptions.length > 1 && (\n            <div className=\"flex items-center gap-1 rounded-lg bg-muted p-1\">\n              {filterOptions.map((opt) => (\n                <button\n                  key={opt.value}\n                  onClick={() => onFilterChange?.(opt.value)}\n                  className={cn(\n                    \"h-7 rounded-md border-none bg-transparent px-3 text-xs font-medium shadow-none transition-all hover:bg-white\",\n                    selectedFilter === opt.value &&\n                      \"bg-background text-foreground shadow-sm\",\n                  )}\n                >\n                  {opt.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {headerExtra && (\n        <div className=\"border-b border-border/40 px-6 py-3\">{headerExtra}</div>\n      )}\n\n      <div className={cn(\"p-6\", contentClassName)}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":";AAmDQ,SACE,KADF;AA/CR,SAAS,UAAU;AAyBZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0GACb;AAAA,+BAAC,SAAI,WAAU,WACb;AAAA,gCAAC,QAAG,WAAU,qCAAqC,iBAAM;AAAA,YACxD,YACC,oBAAC,OAAE,WAAU,wCAAwC,oBAAS;AAAA,aAElE;AAAA,UAEA,qBAAC,SAAI,WAAU,2BACZ;AAAA,6BAAiB,cAAc,SAAS,KACvC,oBAAC,SAAI,WAAU,mDACZ,wBAAc,IAAI,CAAC,QAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,SAAS,MAAM,iDAAiB;AAAA,gBAChC,WAAW;AAAA,kBACT;AAAA,kBACA,mBAAmB,MACf,4CACA;AAAA,gBACN;AAAA,gBAEC;AAAA;AAAA,cATI;AAAA,YAUP,CACD,GACH;AAAA,YAGD,iBAAiB,cAAc,SAAS,KACvC,oBAAC,SAAI,WAAU,mDACZ,wBAAc,IAAI,CAAC,QAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,SAAS,MAAM,iDAAiB,IAAI;AAAA,gBACpC,WAAW;AAAA,kBACT;AAAA,kBACA,mBAAmB,IAAI,SACrB;AAAA,gBACJ;AAAA,gBAEC,cAAI;AAAA;AAAA,cARA,IAAI;AAAA,YASX,CACD,GACH;AAAA,aAEJ;AAAA,WACF;AAAA,QAEC,eACC,oBAAC,SAAI,WAAU,uCAAuC,uBAAY;AAAA,QAGpE,oBAAC,SAAI,WAAW,GAAG,OAAO,gBAAgB,GAAI,UAAS;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":[]}

package/dist/components/score-analysis-modal.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ScoreFactor } from './score-breakdown.js';
+
+interface ScoreAnalysisModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description: string;
+    score: number;
+    denominator?: number;
+    whyNow: string;
+    evidence: React.ReactNode[];
+    factors?: ScoreFactor[];
+    onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void;
+    companyName?: string;
+    opportunityUrl?: string;
+    onApprove?: () => void;
+    onApproveFeedback?: (reasons: string[], detail: string) => void;
+    onDismiss?: (reasons: string[], detail: string) => void;
+    /** When true, renders as an absolute-positioned inline panel instead of a Radix Sheet portal. Useful when the component is inside a container that should not be escaped. */
+    useInlinePanel?: boolean;
+}
+declare function ScoreAnalysisModal({ open, onOpenChange, title, description, score, denominator, whyNow, evidence, factors, onFactorFeedback, companyName, opportunityUrl, onApprove, onApproveFeedback, onDismiss, useInlinePanel, }: ScoreAnalysisModalProps): React.JSX.Element | null;
+declare const ScoreAnalysisPanel: typeof ScoreAnalysisModal;
+
+export { ScoreAnalysisModal, type ScoreAnalysisModalProps, ScoreAnalysisPanel };

package/dist/components/score-analysis-modal.js

@@ -0,0 +1,141 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./sheet.js";
+import { Badge } from "./badge.js";
+import { ScoreRing } from "./score-ring.js";
+import { ScoreBreakdown } from "./score-breakdown.js";
+import { SignalApproval } from "./signal-feedback-inline.js";
+import { X } from "lucide-react";
+function getScoreLabel(score, denominator) {
+  const pct = score / denominator * 100;
+  if (pct >= 70) return { text: "HIGH", className: "text-emerald-600" };
+  if (pct >= 40) return { text: "MEDIUM", className: "text-amber-600" };
+  return { text: "LOW", className: "text-red-600" };
+}
+function ScoreAnalysisModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  score,
+  denominator = 100,
+  whyNow,
+  evidence,
+  factors,
+  onFactorFeedback,
+  companyName = "Account",
+  opportunityUrl,
+  onApprove,
+  onApproveFeedback,
+  onDismiss,
+  useInlinePanel = false
+}) {
+  const label = getScoreLabel(score, denominator);
+  const panelContent = /* @__PURE__ */ jsxs(
+    SignalApproval.Root,
+    {
+      companyName,
+      opportunityUrl,
+      onApprove,
+      onApproveFeedback,
+      onDismiss,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenChange(false),
+              className: "p-1.5 rounded-md text-muted-foreground hover:bg-secondary transition-colors",
+              children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: description }),
+          /* @__PURE__ */ jsx("div", { className: "mb-8", children: /* @__PURE__ */ jsx(SignalApproval.Actions, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+              /* @__PURE__ */ jsx(ScoreRing, { score, denominator, size: 120, strokeWidth: 10 }),
+              /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+                Math.round(score / denominator * 100),
+                "% Score",
+                " \u2014 ",
+                /* @__PURE__ */ jsx("span", { className: label.className, children: label.text })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-2 text-sm", children: "Why Now" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: whyNow })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-2 text-sm", children: "Supporting Evidence" }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: evidence.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground leading-relaxed", children: item })
+              ] }, index)) })
+            ] }),
+            factors && factors.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-2 text-sm", children: "Score Breakdown" }),
+              /* @__PURE__ */ jsx(ScoreBreakdown, { factors, onFactorFeedback })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+  if (useInlinePanel) {
+    if (!open) return null;
+    return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0, zIndex: 50, pointerEvents: "auto", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: () => onOpenChange(false),
+          style: { position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.5)", transition: "opacity 200ms" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: 500,
+            maxWidth: "100%",
+            zIndex: 50,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            borderLeft: "1px solid var(--border)",
+            backgroundColor: "var(--background, #fff)",
+            boxShadow: "-4px 0 24px rgba(0,0,0,0.12)"
+          },
+          children: panelContent
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: "right",
+      className: "w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col",
+      showCloseButton: false,
+      children: [
+        /* @__PURE__ */ jsx(SheetHeader, { className: "sr-only p-0", children: /* @__PURE__ */ jsx(SheetTitle, { children: title }) }),
+        panelContent
+      ]
+    }
+  ) });
+}
+const ScoreAnalysisPanel = ScoreAnalysisModal;
+export {
+  ScoreAnalysisModal,
+  ScoreAnalysisPanel
+};
+//# sourceMappingURL=score-analysis-modal.js.map

package/dist/components/score-analysis-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/score-analysis-modal.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"./sheet\"\nimport { Badge } from \"./badge\"\nimport { ScoreRing } from \"./score-ring\"\nimport { ScoreBreakdown, type ScoreFactor } from \"./score-breakdown\"\nimport { SignalApproval } from \"./signal-feedback-inline\"\nimport { X } from \"lucide-react\"\n\ninterface ScoreAnalysisModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title: string\n  description: string\n  score: number\n  denominator?: number\n  whyNow: string\n  evidence: React.ReactNode[]\n  factors?: ScoreFactor[]\n  onFactorFeedback?: (factorKey: string, type: \"up\" | \"down\" | null, detail?: string) => void\n  companyName?: string\n  opportunityUrl?: string\n  onApprove?: () => void\n  onApproveFeedback?: (reasons: string[], detail: string) => void\n  onDismiss?: (reasons: string[], detail: string) => void\n  /** When true, renders as an absolute-positioned inline panel instead of a Radix Sheet portal. Useful when the component is inside a container that should not be escaped. */\n  useInlinePanel?: boolean\n}\n\nfunction getScoreLabel(score: number, denominator: number) {\n  const pct = (score / denominator) * 100\n  if (pct >= 70) return { text: \"HIGH\", className: \"text-emerald-600\" }\n  if (pct >= 40) return { text: \"MEDIUM\", className: \"text-amber-600\" }\n  return { text: \"LOW\", className: \"text-red-600\" }\n}\n\nfunction ScoreAnalysisModal({\n  open,\n  onOpenChange,\n  title,\n  description,\n  score,\n  denominator = 100,\n  whyNow,\n  evidence,\n  factors,\n  onFactorFeedback,\n  companyName = \"Account\",\n  opportunityUrl,\n  onApprove,\n  onApproveFeedback,\n  onDismiss,\n  useInlinePanel = false,\n}: ScoreAnalysisModalProps) {\n  const label = getScoreLabel(score, denominator)\n\n  const panelContent = (\n    <SignalApproval.Root\n          companyName={companyName}\n          opportunityUrl={opportunityUrl}\n          onApprove={onApprove}\n          onApproveFeedback={onApproveFeedback}\n          onDismiss={onDismiss}\n        >\n          <div className=\"flex items-center justify-between px-6 py-4 border-b border-border shrink-0\">\n            <h2 className=\"text-lg font-semibold text-foreground\">{title}</h2>\n            <button\n              type=\"button\"\n              onClick={() => onOpenChange(false)}\n              className=\"p-1.5 rounded-md text-muted-foreground hover:bg-secondary transition-colors\"\n            >\n              <X className=\"w-4 h-4\" />\n            </button>\n          </div>\n\n          <div className=\"flex-1 overflow-y-auto px-6 py-6\">\n            <p className=\"text-sm text-muted-foreground mb-6\">{description}</p>\n\n            <div className=\"mb-8\">\n              <SignalApproval.Actions />\n            </div>\n\n            <div className=\"space-y-6\">\n              <div className=\"flex flex-col items-center gap-3\">\n                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} />\n                <Badge variant=\"outline\">\n                  {Math.round((score / denominator) * 100)}% Score\n                  {\" \\u2014 \"}\n                  <span className={label.className}>{label.text}</span>\n                </Badge>\n              </div>\n\n              <div>\n                <h3 className=\"font-semibold mb-2 text-sm\">Why Now</h3>\n                <p className=\"text-sm text-muted-foreground leading-relaxed\">{whyNow}</p>\n              </div>\n\n              <div>\n                <h3 className=\"font-semibold mb-2 text-sm\">Supporting Evidence</h3>\n                <ul className=\"space-y-2\">\n                  {evidence.map((item, index) => (\n                    <li key={index} className=\"flex items-start gap-2 text-sm\">\n                      <div className=\"w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0\" />\n                      <span className=\"text-muted-foreground leading-relaxed\">{item}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n\n              {factors && factors.length > 0 && (\n                <div>\n                  <h3 className=\"font-semibold mb-2 text-sm\">Score Breakdown</h3>\n                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} />\n                </div>\n              )}\n            </div>\n          </div>\n        </SignalApproval.Root>\n  )\n\n  if (useInlinePanel) {\n    if (!open) return null\n    return (\n      <div style={{ position: \"absolute\", inset: 0, zIndex: 50, pointerEvents: \"auto\", overflow: \"hidden\" }}>\n        <div\n          onClick={() => onOpenChange(false)}\n          style={{ position: \"absolute\", inset: 0, backgroundColor: \"rgba(0,0,0,0.5)\", transition: \"opacity 200ms\" }}\n        />\n        <div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            right: 0,\n            bottom: 0,\n            width: 500,\n            maxWidth: \"100%\",\n            zIndex: 50,\n            display: \"flex\",\n            flexDirection: \"column\",\n            overflow: \"hidden\",\n            borderLeft: \"1px solid var(--border)\",\n            backgroundColor: \"var(--background, #fff)\",\n            boxShadow: \"-4px 0 24px rgba(0,0,0,0.12)\",\n          }}\n        >\n          {panelContent}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        side=\"right\"\n        className=\"w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col\"\n        showCloseButton={false}\n      >\n        <SheetHeader className=\"sr-only p-0\">\n          <SheetTitle>{title}</SheetTitle>\n        </SheetHeader>\n        {panelContent}\n      </SheetContent>\n    </Sheet>\n  )\n}\n\nconst ScoreAnalysisPanel = ScoreAnalysisModal\n\nexport { ScoreAnalysisModal, ScoreAnalysisPanel }\nexport type { ScoreAnalysisModalProps }\n"],"mappings":"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","names":[]}

package/dist/components/score-breakdown.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface ScoreFactor {
+    key: string;
+    label: string;
+    score: number | null;
+    risk?: "Low" | "Medium" | "High";
+    why: string;
+}
+interface ScoreBreakdownProps {
+    factors: ScoreFactor[];
+    onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void;
+    className?: string;
+}
+declare function ScoreBreakdown({ factors, onFactorFeedback, className }: ScoreBreakdownProps): React.JSX.Element;
+
+export { ScoreBreakdown, type ScoreBreakdownProps, type ScoreFactor };