@handled-ai/design-system 0.18.53 → 0.19.0-rc.0

package/dist/components/owner-chips.js

@@ -0,0 +1,256 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ChevronDown,
+  ChevronUp,
+  Check,
+  UserPlus,
+  UserMinus,
+  Info,
+  ArrowUpRight
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { getInitials } from "../lib/user-display.js";
+import { BRAND_ICONS } from "../lib/icons.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator
+} from "./dropdown-menu.js";
+function SalesforceMark({ size = 14 }) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: BRAND_ICONS.salesforce,
+        alt: "Salesforce",
+        width: size,
+        height: size,
+        style: { width: size, height: size, objectFit: "contain", display: "block" }
+      }
+    )
+  );
+}
+function OwnerAvatar({ person, size = "sm" }) {
+  return /* @__PURE__ */ jsxs(Avatar, { size, className: "ring-background ring-2", children: [
+    person.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: person.avatarUrl, alt: person.name }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-muted-foreground text-[10px] font-medium uppercase", children: getInitials({ name: person.name, email: person.email }) })
+  ] });
+}
+const chipBase = "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-[13px] shadow-[0_1px_1px_rgba(0,0,0,0.03)]";
+function SignalOwnerChip({
+  owner,
+  assignableOwners = [],
+  onAssign,
+  onUnassign,
+  disabled,
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  const value = /* @__PURE__ */ jsxs(Fragment, { children: [
+    owner ? /* @__PURE__ */ jsx(OwnerAvatar, { person: owner }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground inline-flex size-[18px] items-center justify-center", children: /* @__PURE__ */ jsx(UserPlus, { size: 13 }) }),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-medium tracking-wide uppercase", children: "Signal owner" }),
+    /* @__PURE__ */ jsx("span", { className: "bg-border/70 mx-0.5 h-3.5 w-px", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: cn("font-medium", owner ? "text-foreground" : "text-muted-foreground"), children: owner ? owner.name.split(" ")[0] : "Unassigned" })
+  ] });
+  if (disabled || !onAssign && !onUnassign) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "signal-owner-chip",
+        "data-empty": owner ? void 0 : "true",
+        className: cn(chipBase, className),
+        title: "Who owns this signal inside Handled",
+        children: value
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "signal-owner-chip",
+        "data-empty": owner ? void 0 : "true",
+        className: cn(chipBase, "hover:bg-muted cursor-pointer transition-colors", className),
+        title: "Who owns this signal inside Handled",
+        children: [
+          value,
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground ml-0.5", children: open ? /* @__PURE__ */ jsx(ChevronUp, { size: 13 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 13 }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold", children: "Assign signal owner" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-normal", children: "Who works this inside Handled, separate from the Salesforce account owner." })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      assignableOwners.map((o) => {
+        var _a;
+        const active = !!owner && (owner.id ? owner.id === o.id : owner.name === o.name);
+        return /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onSelect: () => onAssign == null ? void 0 : onAssign(o),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx(OwnerAvatar, { person: o, size: "default" }),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium", children: o.name }),
+                o.role ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-[11px]", children: o.role }) : null
+              ] }),
+              active ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-foreground ml-auto" }) : null
+            ]
+          },
+          (_a = o.id) != null ? _a : o.name
+        );
+      }),
+      owner && onUnassign ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => onUnassign(), className: "text-muted-foreground gap-2", children: [
+          /* @__PURE__ */ jsx(UserMinus, { size: 13 }),
+          " Unassign"
+        ] })
+      ] }) : null
+    ] })
+  ] });
+}
+function AccountOwnerChip({ owners, className }) {
+  const [open, setOpen] = React.useState(false);
+  if (!owners.length) return null;
+  const multi = owners.length > 1;
+  if (!multi) {
+    const only = owners[0];
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx(SalesforceMark, {}) }),
+      /* @__PURE__ */ jsx(OwnerAvatar, { person: only }),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: only.name.split(" ")[0] })
+    ] });
+    return only.href ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: only.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        "data-slot": "account-owner-chip",
+        className: cn(chipBase, "hover:bg-muted transition-colors", className),
+        title: `Account owner in Salesforce \u2014 ${only.name}`,
+        children: [
+          body,
+          /* @__PURE__ */ jsx(ArrowUpRight, { size: 12, className: "text-muted-foreground ml-0.5" })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "account-owner-chip",
+        className: cn(chipBase, className),
+        title: `Account owner in Salesforce \u2014 ${only.name}`,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "account-owner-chip",
+        "data-multi": "true",
+        className: cn(chipBase, "hover:bg-muted cursor-pointer transition-colors", className),
+        title: "Account owners in Salesforce",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx(SalesforceMark, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "flex -space-x-2", children: owners.map((o) => {
+            var _a;
+            return /* @__PURE__ */ jsx(OwnerAvatar, { person: o }, (_a = o.id) != null ? _a : o.name);
+          }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: "Account owners" }),
+          /* @__PURE__ */ jsxs("span", { className: "bg-muted text-muted-foreground rounded px-1 text-[11px] font-semibold tabular-nums", children: [
+            "\xD7",
+            owners.length
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground ml-0.5", children: open ? /* @__PURE__ */ jsx(ChevronUp, { size: 13 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 13 }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-72", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-1.5 text-[13px]", children: [
+        /* @__PURE__ */ jsx(SalesforceMark, {}),
+        owners.length,
+        " account owners"
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      owners.map((o) => {
+        var _a;
+        const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(OwnerAvatar, { person: o, size: "default" }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium", children: o.name }),
+            o.role ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-[11px]", children: o.role }) : null
+          ] }),
+          o.href ? /* @__PURE__ */ jsx(ArrowUpRight, { size: 13, className: "text-muted-foreground ml-auto" }) : null
+        ] });
+        return /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: !!o.href, className: "gap-2", children: o.href ? /* @__PURE__ */ jsx("a", { href: o.href, target: "_blank", rel: "noopener noreferrer", title: `Open ${o.name} in Salesforce`, children: row }) : /* @__PURE__ */ jsx("span", { children: row }) }, (_a = o.id) != null ? _a : o.name);
+      }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 px-2 py-1.5 text-[11px]", children: [
+        /* @__PURE__ */ jsx(Info, { size: 12 }),
+        " Synced from Salesforce. Manage owners there."
+      ] })
+    ] })
+  ] });
+}
+function OwnerChips(_a) {
+  var _b = _a, { accountOwners = [], className } = _b, signal = __objRest(_b, ["accountOwners", "className"]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SignalOwnerChip, __spreadProps(__spreadValues({}, signal), { className })),
+    /* @__PURE__ */ jsx(AccountOwnerChip, { owners: accountOwners, className })
+  ] });
+}
+export {
+  AccountOwnerChip,
+  OwnerChips,
+  SignalOwnerChip
+};
+//# sourceMappingURL=owner-chips.js.map

package/dist/components/owner-chips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/owner-chips.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * owner-chips.tsx — disambiguates the two ownership concepts operators kept\n * confusing on the case panel:\n *\n *  1. SIGNAL OWNER   — Handled's OWN assignment. Who owns working this\n *     signal/action inside Handled. Editable here (assign / reassign /\n *     unassign). Replaces the ambiguous bare \"Unassigned\" chip.\n *\n *  2. ACCOUNT OWNER(S) — read-through from Salesforce. An account can carry\n *     more than one (AE + RM). Informational + links out to Salesforce; never\n *     assigned from inside Handled. Leads with the Salesforce mark.\n *\n * Single account owner -> a static, non-interactive chip (no dropdown).\n * Multiple account owners -> stacked avatars + a ×N badge and a menu that\n * lists each owner with a link out. This keeps a single owner cheap and quiet\n * while still surfacing the full set when there is more than one.\n *\n * Presentational only: data + handlers come from the consumer (the app).\n */\n\nimport * as React from \"react\"\nimport {\n  ChevronDown,\n  ChevronUp,\n  Check,\n  UserPlus,\n  UserMinus,\n  Info,\n  ArrowUpRight,\n} from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { getInitials } from \"../lib/user-display\"\nimport { BRAND_ICONS } from \"../lib/icons\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"./avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from \"./dropdown-menu\"\n\nexport interface OwnerPerson {\n  /** Stable id (profile id for signal owner; SF user id for account owner). */\n  id?: string\n  name: string\n  email?: string\n  /** e.g. \"Relationship Manager\", \"Account Executive\". */\n  role?: string\n  /** Avatar image; falls back to initials when absent. */\n  avatarUrl?: string | null\n  /** External link (Salesforce) for an account owner. */\n  href?: string\n}\n\n/* ── shared bits ─────────────────────────────────────────────────────────── */\n\nfunction SalesforceMark({ size = 14 }: { size?: number }) {\n  return (\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={BRAND_ICONS.salesforce}\n      alt=\"Salesforce\"\n      width={size}\n      height={size}\n      style={{ width: size, height: size, objectFit: \"contain\", display: \"block\" }}\n    />\n  )\n}\n\nfunction OwnerAvatar({ person, size = \"sm\" }: { person: OwnerPerson; size?: \"sm\" | \"default\" }) {\n  return (\n    <Avatar size={size} className=\"ring-background ring-2\">\n      {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt={person.name} /> : null}\n      <AvatarFallback className=\"bg-muted text-muted-foreground text-[10px] font-medium uppercase\">\n        {getInitials({ name: person.name, email: person.email })}\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n\nconst chipBase =\n  \"inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-[13px] \" +\n  \"shadow-[0_1px_1px_rgba(0,0,0,0.03)]\"\n\n/* ── Signal owner (Handled assignment, editable) ─────────────────────────── */\n\nexport interface SignalOwnerChipProps {\n  /** Current Handled assignee, or null when unassigned. */\n  owner: OwnerPerson | null\n  /** Operators the case can be assigned to (preloaded — no fetch on open). */\n  assignableOwners?: OwnerPerson[]\n  onAssign?: (owner: OwnerPerson) => void\n  onUnassign?: () => void\n  /** Read-only: render a static chip without the assignment menu. */\n  disabled?: boolean\n  className?: string\n}\n\nfunction SignalOwnerChip({\n  owner,\n  assignableOwners = [],\n  onAssign,\n  onUnassign,\n  disabled,\n  className,\n}: SignalOwnerChipProps) {\n  const [open, setOpen] = React.useState(false)\n\n  const value = (\n    <>\n      {owner ? (\n        <OwnerAvatar person={owner} />\n      ) : (\n        <span className=\"text-muted-foreground inline-flex size-[18px] items-center justify-center\">\n          <UserPlus size={13} />\n        </span>\n      )}\n      <span className=\"text-muted-foreground text-[11px] font-medium tracking-wide uppercase\">\n        Signal owner\n      </span>\n      <span className=\"bg-border/70 mx-0.5 h-3.5 w-px\" aria-hidden />\n      <span className={cn(\"font-medium\", owner ? \"text-foreground\" : \"text-muted-foreground\")}>\n        {owner ? owner.name.split(\" \")[0] : \"Unassigned\"}\n      </span>\n    </>\n  )\n\n  // Read-only or nothing to assign to: static chip.\n  if (disabled || (!onAssign && !onUnassign)) {\n    return (\n      <span\n        data-slot=\"signal-owner-chip\"\n        data-empty={owner ? undefined : \"true\"}\n        className={cn(chipBase, className)}\n        title=\"Who owns this signal inside Handled\"\n      >\n        {value}\n      </span>\n    )\n  }\n\n  return (\n    <DropdownMenu open={open} onOpenChange={setOpen}>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"signal-owner-chip\"\n          data-empty={owner ? undefined : \"true\"}\n          className={cn(chipBase, \"hover:bg-muted cursor-pointer transition-colors\", className)}\n          title=\"Who owns this signal inside Handled\"\n        >\n          {value}\n          <span className=\"text-muted-foreground ml-0.5\">\n            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}\n          </span>\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-64\">\n        <DropdownMenuLabel className=\"flex flex-col gap-0.5\">\n          <span className=\"text-[13px] font-semibold\">Assign signal owner</span>\n          <span className=\"text-muted-foreground text-[11px] font-normal\">\n            Who works this inside Handled, separate from the Salesforce account owner.\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {assignableOwners.map((o) => {\n          const active = !!owner && (owner.id ? owner.id === o.id : owner.name === o.name)\n          return (\n            <DropdownMenuItem\n              key={o.id ?? o.name}\n              onSelect={() => onAssign?.(o)}\n              className=\"gap-2\"\n            >\n              <OwnerAvatar person={o} size=\"default\" />\n              <span className=\"flex min-w-0 flex-col\">\n                <span className=\"truncate text-[13px] font-medium\">{o.name}</span>\n                {o.role ? (\n                  <span className=\"text-muted-foreground truncate text-[11px]\">{o.role}</span>\n                ) : null}\n              </span>\n              {active ? <Check size={14} className=\"text-foreground ml-auto\" /> : null}\n            </DropdownMenuItem>\n          )\n        })}\n        {owner && onUnassign ? (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onSelect={() => onUnassign()} className=\"text-muted-foreground gap-2\">\n              <UserMinus size={13} /> Unassign\n            </DropdownMenuItem>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/* ── Account owner(s) (Salesforce, read-through) ─────────────────────────── */\n\nexport interface AccountOwnerChipProps {\n  /** Salesforce account owners (RM, AE, …). Empty -> renders nothing. */\n  owners: OwnerPerson[]\n  className?: string\n}\n\nfunction AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {\n  const [open, setOpen] = React.useState(false)\n  if (!owners.length) return null\n  const multi = owners.length > 1\n\n  // Single owner: a quiet, static chip — no dropdown (per product intent).\n  if (!multi) {\n    const only = owners[0]\n    const body = (\n      <>\n        <span className=\"inline-flex shrink-0 items-center\">\n          <SalesforceMark />\n        </span>\n        <OwnerAvatar person={only} />\n        <span className=\"text-foreground font-medium\">{only.name.split(\" \")[0]}</span>\n      </>\n    )\n    return only.href ? (\n      <a\n        href={only.href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        data-slot=\"account-owner-chip\"\n        className={cn(chipBase, \"hover:bg-muted transition-colors\", className)}\n        title={`Account owner in Salesforce — ${only.name}`}\n      >\n        {body}\n        <ArrowUpRight size={12} className=\"text-muted-foreground ml-0.5\" />\n      </a>\n    ) : (\n      <span\n        data-slot=\"account-owner-chip\"\n        className={cn(chipBase, className)}\n        title={`Account owner in Salesforce — ${only.name}`}\n      >\n        {body}\n      </span>\n    )\n  }\n\n  // Multiple owners: stacked avatars + ×N + a menu listing each.\n  return (\n    <DropdownMenu open={open} onOpenChange={setOpen}>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"account-owner-chip\"\n          data-multi=\"true\"\n          className={cn(chipBase, \"hover:bg-muted cursor-pointer transition-colors\", className)}\n          title=\"Account owners in Salesforce\"\n        >\n          <span className=\"inline-flex shrink-0 items-center\">\n            <SalesforceMark />\n          </span>\n          <span className=\"flex -space-x-2\">\n            {owners.map((o) => (\n              <OwnerAvatar key={o.id ?? o.name} person={o} />\n            ))}\n          </span>\n          <span className=\"text-foreground font-medium\">Account owners</span>\n          <span className=\"bg-muted text-muted-foreground rounded px-1 text-[11px] font-semibold tabular-nums\">\n            ×{owners.length}\n          </span>\n          <span className=\"text-muted-foreground ml-0.5\">\n            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}\n          </span>\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-72\">\n        <DropdownMenuLabel className=\"flex items-center gap-1.5 text-[13px]\">\n          <SalesforceMark />\n          {owners.length} account owners\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {owners.map((o) => {\n          const row = (\n            <>\n              <OwnerAvatar person={o} size=\"default\" />\n              <span className=\"flex min-w-0 flex-col\">\n                <span className=\"truncate text-[13px] font-medium\">{o.name}</span>\n                {o.role ? (\n                  <span className=\"text-muted-foreground truncate text-[11px]\">{o.role}</span>\n                ) : null}\n              </span>\n              {o.href ? <ArrowUpRight size={13} className=\"text-muted-foreground ml-auto\" /> : null}\n            </>\n          )\n          return (\n            <DropdownMenuItem key={o.id ?? o.name} asChild={!!o.href} className=\"gap-2\">\n              {o.href ? (\n                <a href={o.href} target=\"_blank\" rel=\"noopener noreferrer\" title={`Open ${o.name} in Salesforce`}>\n                  {row}\n                </a>\n              ) : (\n                <span>{row}</span>\n              )}\n            </DropdownMenuItem>\n          )\n        })}\n        <DropdownMenuSeparator />\n        <div className=\"text-muted-foreground flex items-center gap-1.5 px-2 py-1.5 text-[11px]\">\n          <Info size={12} /> Synced from Salesforce. Manage owners there.\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/* ── Convenience composite ──────────────────────────────────────────────── */\n\nexport interface OwnerChipsProps extends SignalOwnerChipProps {\n  /** Salesforce account owners (read-through). */\n  accountOwners?: OwnerPerson[]\n}\n\nfunction OwnerChips({ accountOwners = [], className, ...signal }: OwnerChipsProps) {\n  return (\n    <>\n      <SignalOwnerChip {...signal} className={className} />\n      <AccountOwnerChip owners={accountOwners} className={className} />\n    </>\n  )\n}\n\nexport { SignalOwnerChip, AccountOwnerChip, OwnerChips }\n"],"mappings":"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","names":[]}

package/dist/components/timeline-activity.d.ts

@@ -23,6 +23,13 @@ interface TimelineEvent {
         date?: string;
         subject?: string;
         body: React.ReactNode;
+        /**
+         * HTML body. When provided, the card renders formatted, Gmail-like HTML
+         * instead of the plain-text `body`. The component sanitizes it before
+         * rendering. Opt-in: when absent, the plain-text `body` path is used and
+         * existing consumers are unaffected.
+         */
+        bodyHtml?: string;
     };
     content?: React.ReactNode;
     source?: {

package/dist/components/timeline-activity.js

@@ -4,7 +4,17 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+import { sanitizeHtml } from "../internal/safe-html.js";
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react";
+const EMAIL_HTML_CLASS = cn(
+  "text-sm leading-[1.62] text-foreground/90 break-words",
+  "[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
+  "[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline",
+  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
+  "[&_img]:max-w-full [&_img]:h-auto",
+  "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:text-[13px]",
+  "[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]"
+);
 const TONE_CLASSES = {
   red: {
     dot: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40",
@@ -143,7 +153,18 @@ function TimelineItem({ event, isLast }) {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "whitespace-pre-line text-sm leading-relaxed text-foreground/90", children: event.email.body }),
+            event.email.bodyHtml ? (
+              // Gmail reading-pane typography; quoted history
+              // (blockquote.gmail_quote) is de-emphasized with a left rule.
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "timeline-email-html",
+                  className: EMAIL_HTML_CLASS,
+                  dangerouslySetInnerHTML: { __html: sanitizeHtml(event.email.bodyHtml) }
+                }
+              )
+            ) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-line text-sm leading-relaxed text-foreground/90", children: event.email.body }),
             /* @__PURE__ */ jsxs(
               "button",
               {

package/dist/components/timeline-activity.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/timeline-activity.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport { ChevronDown, ChevronUp, ExternalLink } from \"lucide-react\"\n\nexport type TimelineEventTone =\n  | \"red\"\n  | \"amber\"\n  | \"emerald\"\n  | \"violet\"\n  | \"blue\"\n  | \"slate\"\n  | \"salesforce\"\n  | \"gmail\"\n\nexport interface TimelineEventActor {\n  kind: \"user\" | \"integration\" | \"system\"\n  name?: string\n  initials?: string\n  avatarUrl?: string\n  verb?: string\n}\n\nexport interface TimelineEvent {\n  id: string\n  icon: React.ReactNode\n  title: React.ReactNode\n  time: string\n  preview?: React.ReactNode\n  email?: {\n    from: string\n    fromEmail?: string\n    to: string\n    cc?: string\n    bcc?: string\n    date?: string\n    subject?: string\n    body: React.ReactNode\n  }\n  content?: React.ReactNode\n  source?: {\n    label: string\n    url: string\n  }\n  defaultExpanded?: boolean\n  isInteractive?: boolean\n  onSourceClick?: () => void\n  tone?: TimelineEventTone\n  actor?: TimelineEventActor\n  isSystemNoise?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Tone class map — every class is a complete static string literal so\n// Tailwind's JIT scanner can detect them. NO interpolation.\n// ---------------------------------------------------------------------------\n\nexport const TONE_CLASSES: Record<\n  TimelineEventTone,\n  { dot: string; icon: string }\n> = {\n  red: {\n    dot: \"bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40\",\n    icon: \"text-red-600 dark:text-red-300\",\n  },\n  amber: {\n    dot: \"bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40\",\n    icon: \"text-amber-600 dark:text-amber-300\",\n  },\n  emerald: {\n    dot: \"bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40\",\n    icon: \"text-emerald-600 dark:text-emerald-300\",\n  },\n  violet: {\n    dot: \"bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40\",\n    icon: \"text-violet-600 dark:text-violet-300\",\n  },\n  blue: {\n    dot: \"bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40\",\n    icon: \"text-blue-600 dark:text-blue-300\",\n  },\n  slate: {\n    dot: \"bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700\",\n    icon: \"text-slate-500 dark:text-slate-300\",\n  },\n  salesforce: {\n    dot: \"bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25\",\n    icon: \"text-[#00A1E0]\",\n  },\n  gmail: {\n    dot: \"bg-white border-red-200 dark:bg-background dark:border-red-900/40\",\n    icon: \"text-red-500 dark:text-red-300\",\n  },\n}\n\nconst NEUTRAL_DOT_CLASSES = \"border-border/60 bg-background\"\nconst NEUTRAL_ICON_CLASSES = \"text-muted-foreground\"\n\nexport interface TimelineActivityProps {\n  events: TimelineEvent[]\n  className?: string\n}\n\nexport function TimelineActivity({ events, className }: TimelineActivityProps) {\n  return (\n    <div className={cn(\"space-y-0\", className)}>\n      {events.map((event, index) => (\n        <TimelineItem\n          key={event.id}\n          event={event}\n          isLast={index === events.length - 1}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {\n  if (actor.kind === \"system\") return null\n\n  if (actor.kind === \"integration\") {\n    return (\n      <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n        <span>Integration</span>\n        <span className=\"text-muted-foreground/40\">&middot;</span>\n        <span>{time}</span>\n      </div>\n    )\n  }\n\n  // actor.kind === \"user\"\n  const verb = actor.verb ?? \"performed this action\"\n  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : \"?\")\n\n  return (\n    <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n      {actor.avatarUrl ? (\n        <img\n          src={actor.avatarUrl}\n          alt={actor.name ?? \"User\"}\n          className=\"h-4 w-4 rounded-full object-cover\"\n        />\n      ) : (\n        <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground\">\n          {displayInitials}\n        </span>\n      )}\n      {actor.name && <span className=\"text-foreground font-medium\">{actor.name}</span>}\n      <span>{verb}</span>\n      <span className=\"text-muted-foreground/40\">&middot;</span>\n      <span>{time}</span>\n    </div>\n  )\n}\n\nfunction TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {\n  const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)\n  const [showAllRecipients, setShowAllRecipients] = React.useState(false)\n  const hasContent = !!event.content\n  const hasEmail = !!event.email\n\n  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null\n  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES\n  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES\n\n  return (\n    <div className=\"group relative flex gap-3.5\">\n      {!isLast && (\n        <div className=\"absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60\" />\n      )}\n\n      <div className=\"relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background\">\n        <div className={cn(\"flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background\", dotClasses, iconClasses)} data-testid=\"timeline-dot\">\n          {event.icon}\n        </div>\n      </div>\n\n      <div className=\"flex-1 pb-5 pt-0.5\">\n        <div className=\"flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"pr-4 text-[13px] leading-relaxed text-foreground\">\n            {event.title}\n          </div>\n          <span className=\"mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70\">\n            {event.time}\n          </span>\n        </div>\n\n        {event.actor && <ActorByline actor={event.actor} time={event.time} />}\n\n        {(hasContent || hasEmail) && (\n          <div className=\"mt-2\">\n            {event.isInteractive ? (\n              hasEmail ? (\n                <div className=\"overflow-hidden rounded-md border border-border/80 bg-muted/20\">\n                  <div\n                    className={cn(\n                      \"px-3 py-2.5 text-sm\",\n                      !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n                    )}\n                    onClick={() => !expanded && setExpanded(true)}\n                  >\n                    {expanded && event.email ? (\n                      <div className=\"space-y-3\">\n                        <div>\n                          <div className=\"flex items-center justify-between gap-4\">\n                            <div className=\"flex min-w-0 items-baseline gap-1.5\">\n                              <span className=\"font-semibold text-foreground text-[13px] whitespace-nowrap\">{event.email.from}</span>\n                              {event.email.fromEmail && (\n                                <span className=\"text-muted-foreground/60 text-xs truncate\">{event.email.fromEmail}</span>\n                              )}\n                            </div>\n                            {event.email.date && (\n                              <span className=\"shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap\">{event.email.date}</span>\n                            )}\n                          </div>\n                          <div className=\"mt-0.5 flex items-center gap-1 text-xs text-muted-foreground\">\n                            <span className=\"truncate\">\n                              To {event.email.to}\n                              {!showAllRecipients && (event.email.cc || event.email.bcc) ? (\n                                <>, ...</>\n                              ) : null}\n                              {showAllRecipients && event.email.cc ? (\n                                <>, {event.email.cc}</>\n                              ) : null}\n                              {showAllRecipients && event.email.bcc ? (\n                                <> <span className=\"text-muted-foreground/40\">bcc</span> {event.email.bcc}</>\n                              ) : null}\n                            </span>\n                            {(event.email.cc || event.email.bcc) && (\n                              <button\n                                type=\"button\"\n                                onClick={(e) => {\n                                  e.stopPropagation()\n                                  setShowAllRecipients((prev) => !prev)\n                                }}\n                                className=\"shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors\"\n                              >\n                                <ChevronDown className={cn(\"h-3 w-3 transition-transform\", showAllRecipients && \"rotate-180\")} />\n                              </button>\n                            )}\n                          </div>\n                        </div>\n\n                        <div className=\"whitespace-pre-line text-sm leading-relaxed text-foreground/90\">\n                          {event.email.body}\n                        </div>\n\n                        <button\n                          onClick={(e) => {\n                            e.stopPropagation()\n                            setExpanded(false)\n                          }}\n                          className=\"mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                        >\n                          Show less <ChevronUp className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    ) : (\n                      <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n                        <span className=\"line-clamp-1 pr-3 text-[13px]\">\n                          <span className=\"text-muted-foreground\">{event.email?.from}</span>\n                          <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n                          {event.email?.subject ? (\n                            <>\n                              <span className=\"text-muted-foreground\">{event.email.subject}</span>\n                              <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n                            </>\n                          ) : null}\n                          <span className=\"text-muted-foreground\">{event.preview}</span>\n                        </span>\n                        <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                          Expand <ChevronDown className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              ) : (\n                <div className=\"overflow-hidden rounded-md border border-border/80 bg-muted/20\">\n                  <div\n                    className={cn(\n                      \"px-3 py-2.5 text-sm\",\n                      !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n                    )}\n                    onClick={() => !expanded && setExpanded(true)}\n                  >\n                    {expanded ? (\n                      <div className=\"space-y-2\">\n                        {event.content}\n                        <div className=\"mt-2 flex items-center gap-3\">\n                          {event.source ? (\n                            event.onSourceClick ? (\n                              <button\n                                type=\"button\"\n                                onClick={(e) => { e.stopPropagation(); event.onSourceClick?.(); }}\n                                className=\"mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                              >\n                                Open in {event.source.label}\n                                <ExternalLink className=\"h-3 w-3\" />\n                              </button>\n                            ) : (\n                              <a\n                                href={event.source.url}\n                                target=\"_blank\"\n                                rel=\"noreferrer noopener\"\n                                className=\"mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                              >\n                                Open in {event.source.label}\n                                <ExternalLink className=\"h-3 w-3\" />\n                              </a>\n                            )\n                          ) : null}\n                          <button\n                            onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n                            className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                          >\n                            Show less <ChevronUp className=\"h-3 w-3\" />\n                          </button>\n                        </div>\n                      </div>\n                    ) : (\n                      <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n                        <span className=\"line-clamp-1 pr-3\">\n                          {event.preview ?? event.content}\n                        </span>\n                        <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                          Expand <ChevronDown className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )\n            ) : (\n              <div className=\"pr-2 text-sm leading-relaxed text-muted-foreground\">\n                {event.content}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}
+{"version":3,"sources":["../../src/components/timeline-activity.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport { sanitizeHtml } from \"../internal/safe-html\"\nimport { ChevronDown, ChevronUp, ExternalLink } from \"lucide-react\"\n\n/**\n * Gmail-like reading-pane typography for rendered, sanitized email HTML.\n * Self-contained Tailwind child-variant utilities — no global CSS. Links use\n * Gmail blue; quoted history (`blockquote.gmail_quote`) is de-emphasized with a\n * left rule and muted, slightly smaller text.\n */\nconst EMAIL_HTML_CLASS = cn(\n  \"text-sm leading-[1.62] text-foreground/90 break-words\",\n  \"[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\",\n  \"[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline\",\n  \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5\",\n  \"[&_img]:max-w-full [&_img]:h-auto\",\n  \"[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:text-[13px]\",\n  \"[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]\"\n)\n\nexport type TimelineEventTone =\n  | \"red\"\n  | \"amber\"\n  | \"emerald\"\n  | \"violet\"\n  | \"blue\"\n  | \"slate\"\n  | \"salesforce\"\n  | \"gmail\"\n\nexport interface TimelineEventActor {\n  kind: \"user\" | \"integration\" | \"system\"\n  name?: string\n  initials?: string\n  avatarUrl?: string\n  verb?: string\n}\n\nexport interface TimelineEvent {\n  id: string\n  icon: React.ReactNode\n  title: React.ReactNode\n  time: string\n  preview?: React.ReactNode\n  email?: {\n    from: string\n    fromEmail?: string\n    to: string\n    cc?: string\n    bcc?: string\n    date?: string\n    subject?: string\n    body: React.ReactNode\n    /**\n     * HTML body. When provided, the card renders formatted, Gmail-like HTML\n     * instead of the plain-text `body`. The component sanitizes it before\n     * rendering. Opt-in: when absent, the plain-text `body` path is used and\n     * existing consumers are unaffected.\n     */\n    bodyHtml?: string\n  }\n  content?: React.ReactNode\n  source?: {\n    label: string\n    url: string\n  }\n  defaultExpanded?: boolean\n  isInteractive?: boolean\n  onSourceClick?: () => void\n  tone?: TimelineEventTone\n  actor?: TimelineEventActor\n  isSystemNoise?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Tone class map — every class is a complete static string literal so\n// Tailwind's JIT scanner can detect them. NO interpolation.\n// ---------------------------------------------------------------------------\n\nexport const TONE_CLASSES: Record<\n  TimelineEventTone,\n  { dot: string; icon: string }\n> = {\n  red: {\n    dot: \"bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40\",\n    icon: \"text-red-600 dark:text-red-300\",\n  },\n  amber: {\n    dot: \"bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40\",\n    icon: \"text-amber-600 dark:text-amber-300\",\n  },\n  emerald: {\n    dot: \"bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40\",\n    icon: \"text-emerald-600 dark:text-emerald-300\",\n  },\n  violet: {\n    dot: \"bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40\",\n    icon: \"text-violet-600 dark:text-violet-300\",\n  },\n  blue: {\n    dot: \"bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40\",\n    icon: \"text-blue-600 dark:text-blue-300\",\n  },\n  slate: {\n    dot: \"bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700\",\n    icon: \"text-slate-500 dark:text-slate-300\",\n  },\n  salesforce: {\n    dot: \"bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25\",\n    icon: \"text-[#00A1E0]\",\n  },\n  gmail: {\n    dot: \"bg-white border-red-200 dark:bg-background dark:border-red-900/40\",\n    icon: \"text-red-500 dark:text-red-300\",\n  },\n}\n\nconst NEUTRAL_DOT_CLASSES = \"border-border/60 bg-background\"\nconst NEUTRAL_ICON_CLASSES = \"text-muted-foreground\"\n\nexport interface TimelineActivityProps {\n  events: TimelineEvent[]\n  className?: string\n}\n\nexport function TimelineActivity({ events, className }: TimelineActivityProps) {\n  return (\n    <div className={cn(\"space-y-0\", className)}>\n      {events.map((event, index) => (\n        <TimelineItem\n          key={event.id}\n          event={event}\n          isLast={index === events.length - 1}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {\n  if (actor.kind === \"system\") return null\n\n  if (actor.kind === \"integration\") {\n    return (\n      <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n        <span>Integration</span>\n        <span className=\"text-muted-foreground/40\">&middot;</span>\n        <span>{time}</span>\n      </div>\n    )\n  }\n\n  // actor.kind === \"user\"\n  const verb = actor.verb ?? \"performed this action\"\n  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : \"?\")\n\n  return (\n    <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n      {actor.avatarUrl ? (\n        <img\n          src={actor.avatarUrl}\n          alt={actor.name ?? \"User\"}\n          className=\"h-4 w-4 rounded-full object-cover\"\n        />\n      ) : (\n        <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground\">\n          {displayInitials}\n        </span>\n      )}\n      {actor.name && <span className=\"text-foreground font-medium\">{actor.name}</span>}\n      <span>{verb}</span>\n      <span className=\"text-muted-foreground/40\">&middot;</span>\n      <span>{time}</span>\n    </div>\n  )\n}\n\nfunction TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {\n  const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)\n  const [showAllRecipients, setShowAllRecipients] = React.useState(false)\n  const hasContent = !!event.content\n  const hasEmail = !!event.email\n\n  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null\n  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES\n  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES\n\n  return (\n    <div className=\"group relative flex gap-3.5\">\n      {!isLast && (\n        <div className=\"absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60\" />\n      )}\n\n      <div className=\"relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background\">\n        <div className={cn(\"flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background\", dotClasses, iconClasses)} data-testid=\"timeline-dot\">\n          {event.icon}\n        </div>\n      </div>\n\n      <div className=\"flex-1 pb-5 pt-0.5\">\n        <div className=\"flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"pr-4 text-[13px] leading-relaxed text-foreground\">\n            {event.title}\n          </div>\n          <span className=\"mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70\">\n            {event.time}\n          </span>\n        </div>\n\n        {event.actor && <ActorByline actor={event.actor} time={event.time} />}\n\n        {(hasContent || hasEmail) && (\n          <div className=\"mt-2\">\n            {event.isInteractive ? (\n              hasEmail ? (\n                <div className=\"overflow-hidden rounded-md border border-border/80 bg-muted/20\">\n                  <div\n                    className={cn(\n                      \"px-3 py-2.5 text-sm\",\n                      !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n                    )}\n                    onClick={() => !expanded && setExpanded(true)}\n                  >\n                    {expanded && event.email ? (\n                      <div className=\"space-y-3\">\n                        <div>\n                          <div className=\"flex items-center justify-between gap-4\">\n                            <div className=\"flex min-w-0 items-baseline gap-1.5\">\n                              <span className=\"font-semibold text-foreground text-[13px] whitespace-nowrap\">{event.email.from}</span>\n                              {event.email.fromEmail && (\n                                <span className=\"text-muted-foreground/60 text-xs truncate\">{event.email.fromEmail}</span>\n                              )}\n                            </div>\n                            {event.email.date && (\n                              <span className=\"shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap\">{event.email.date}</span>\n                            )}\n                          </div>\n                          <div className=\"mt-0.5 flex items-center gap-1 text-xs text-muted-foreground\">\n                            <span className=\"truncate\">\n                              To {event.email.to}\n                              {!showAllRecipients && (event.email.cc || event.email.bcc) ? (\n                                <>, ...</>\n                              ) : null}\n                              {showAllRecipients && event.email.cc ? (\n                                <>, {event.email.cc}</>\n                              ) : null}\n                              {showAllRecipients && event.email.bcc ? (\n                                <> <span className=\"text-muted-foreground/40\">bcc</span> {event.email.bcc}</>\n                              ) : null}\n                            </span>\n                            {(event.email.cc || event.email.bcc) && (\n                              <button\n                                type=\"button\"\n                                onClick={(e) => {\n                                  e.stopPropagation()\n                                  setShowAllRecipients((prev) => !prev)\n                                }}\n                                className=\"shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors\"\n                              >\n                                <ChevronDown className={cn(\"h-3 w-3 transition-transform\", showAllRecipients && \"rotate-180\")} />\n                              </button>\n                            )}\n                          </div>\n                        </div>\n\n                        {event.email.bodyHtml ? (\n                          // Gmail reading-pane typography; quoted history\n                          // (blockquote.gmail_quote) is de-emphasized with a left rule.\n                          <div\n                            data-slot=\"timeline-email-html\"\n                            className={EMAIL_HTML_CLASS}\n                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(event.email.bodyHtml) }}\n                          />\n                        ) : (\n                          <div className=\"whitespace-pre-line text-sm leading-relaxed text-foreground/90\">\n                            {event.email.body}\n                          </div>\n                        )}\n\n                        <button\n                          onClick={(e) => {\n                            e.stopPropagation()\n                            setExpanded(false)\n                          }}\n                          className=\"mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                        >\n                          Show less <ChevronUp className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    ) : (\n                      <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n                        <span className=\"line-clamp-1 pr-3 text-[13px]\">\n                          <span className=\"text-muted-foreground\">{event.email?.from}</span>\n                          <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n                          {event.email?.subject ? (\n                            <>\n                              <span className=\"text-muted-foreground\">{event.email.subject}</span>\n                              <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n                            </>\n                          ) : null}\n                          <span className=\"text-muted-foreground\">{event.preview}</span>\n                        </span>\n                        <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                          Expand <ChevronDown className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              ) : (\n                <div className=\"overflow-hidden rounded-md border border-border/80 bg-muted/20\">\n                  <div\n                    className={cn(\n                      \"px-3 py-2.5 text-sm\",\n                      !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n                    )}\n                    onClick={() => !expanded && setExpanded(true)}\n                  >\n                    {expanded ? (\n                      <div className=\"space-y-2\">\n                        {event.content}\n                        <div className=\"mt-2 flex items-center gap-3\">\n                          {event.source ? (\n                            event.onSourceClick ? (\n                              <button\n                                type=\"button\"\n                                onClick={(e) => { e.stopPropagation(); event.onSourceClick?.(); }}\n                                className=\"mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                              >\n                                Open in {event.source.label}\n                                <ExternalLink className=\"h-3 w-3\" />\n                              </button>\n                            ) : (\n                              <a\n                                href={event.source.url}\n                                target=\"_blank\"\n                                rel=\"noreferrer noopener\"\n                                className=\"mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                              >\n                                Open in {event.source.label}\n                                <ExternalLink className=\"h-3 w-3\" />\n                              </a>\n                            )\n                          ) : null}\n                          <button\n                            onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n                            className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                          >\n                            Show less <ChevronUp className=\"h-3 w-3\" />\n                          </button>\n                        </div>\n                      </div>\n                    ) : (\n                      <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n                        <span className=\"line-clamp-1 pr-3\">\n                          {event.preview ?? event.content}\n                        </span>\n                        <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                          Expand <ChevronDown className=\"h-3 w-3\" />\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              )\n            ) : (\n              <div className=\"pr-2 text-sm leading-relaxed text-muted-foreground\">\n                {event.content}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}

package/dist/index.d.ts

@@ -19,10 +19,12 @@ export { CasePanelActivityActor, CasePanelActivityEvent, CasePanelActivityPayloa
 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 { CommentComposer, CommentComposerProps } from './components/comment-composer.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, ContextualQuickActionLauncherVariant } from './components/contextual-quick-action-launcher.js';
+export { ConvMessage, ConvParticipant, ConvStatus, ConversationPanel, ConversationPanelProps, ConversationReplyPayload, ConversationThread } from './components/conversation-panel.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';
@@ -55,6 +57,7 @@ export { KbdHint } from './components/kbd-hint.js';
 export { Label } from './components/label.js';
 export { Message, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageProps } from './components/message.js';
 export { KpiStrip, KpiStripItem, KpiStripProps, MetricCard, MetricCardProps, MetricDataPoint } from './components/metric-card.js';
+export { AccountOwnerChip, AccountOwnerChipProps, OwnerChips, OwnerChipsProps, OwnerPerson, SignalOwnerChip, SignalOwnerChipProps } from './components/owner-chips.js';
 export { PerformanceMetricsTable, PerformanceMetricsTableRow, PerformanceMetricsTableSortOption } from './components/performance-metrics-table.js';
 export { Pill, PillProps, PillStatus, StatusPill, StatusPillProps, pillVariants } from './components/pill.js';
 export { PreviewList, PreviewListItem, PreviewListItemProps } from './components/preview-list.js';

package/dist/index.js

@@ -19,10 +19,12 @@ 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/comment-composer.js";
 export * from "./components/compliance-badge.js";
 export * from "./components/contact-chip.js";
 export * from "./components/contact-list.js";
 export * from "./components/contextual-quick-action-launcher.js";
+export * from "./components/conversation-panel.js";
 export * from "./components/dashboard-cards.js";
 export * from "./components/data-table.js";
 export * from "./components/data-table-condition-filter.js";
@@ -55,6 +57,7 @@ export * from "./components/kbd-hint.js";
 export * from "./components/label.js";
 export * from "./components/message.js";
 export * from "./components/metric-card.js";
+export * from "./components/owner-chips.js";
 export * from "./components/performance-metrics-table.js";
 export * from "./components/pill.js";
 export * from "./components/preview-list.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 * from \"./components/case-panel-email-composer\"\nexport * from \"./components/email-composer-row\"\nexport * from \"./components/email-preview-card\"\nexport * from \"./components/email-recipient-field\"\nexport * from \"./components/email-send-bar\"\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 * from \"./components/related-record-action-card\"\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,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,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/email-composer-row\"\nexport * from \"./components/email-preview-card\"\nexport * from \"./components/email-recipient-field\"\nexport * from \"./components/email-send-bar\"\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/comment-composer\"\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/conversation-panel\"\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 * from \"./components/related-record-action-card\"\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/owner-chips\"\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,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,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,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/dist/internal/safe-html.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Conservative, deterministic sanitizer for user/email supplied HTML rendered by
+ * design-system components. It keeps common email formatting tags while removing
+ * executable tags, event handlers, inline styles, and unsafe URLs. This stays
+ * dependency-free for the shared package and intentionally favors stripping
+ * ambiguous email content over preserving every possible HTML feature.
+ */
+declare function sanitizeHtml(html: string): string;
+declare function htmlToTextSnippet(html: string, maxLength?: number): string;
+
+export { htmlToTextSnippet, sanitizeHtml };