@handled-ai/design-system 0.20.33 → 0.21.0

package/src/components/linked-entity-cell.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { ExternalLink } from "lucide-react"
 
 import { cn } from "../lib/utils"
+import { getEntityColor } from "../lib/entity-color"
 
 export interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {
   name: React.ReactNode
@@ -13,6 +14,21 @@ export interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivEleme
   icon?: React.ReactNode
   external?: boolean
   onNavigate?: () => void
+  /**
+   * When provided, renders a small colored rounded initial badge before the
+   * name. The full string is used as the color seed; the displayed letter is
+   * the first character. Omit to render no badge.
+   */
+  avatarLabel?: string
+  /**
+   * Optional node rendered after the name (a trailing slot), e.g. a separate
+   * action link. Does not affect the name's own `href`.
+   */
+  trailingAction?: React.ReactNode
+  /**
+   * Escape-hatch class merged onto the name span/link. Defaults to `text-sm`.
+   */
+  nameClassName?: string
 }
 
 export function LinkedEntityCell({
@@ -23,6 +39,9 @@ export function LinkedEntityCell({
   icon,
   external = false,
   onNavigate,
+  avatarLabel,
+  trailingAction,
+  nameClassName,
   className,
   ...props
 }: LinkedEntityCellProps) {
@@ -39,6 +58,18 @@ export function LinkedEntityCell({
       className={cn("flex min-w-0 items-center gap-2", className)}
       {...props}
     >
+      {avatarLabel ? (
+        <span
+          data-slot="linked-entity-cell-avatar"
+          aria-hidden="true"
+          className={cn(
+            "flex h-6 w-6 shrink-0 items-center justify-center rounded text-[10px] font-bold",
+            getEntityColor(avatarLabel),
+          )}
+        >
+          {avatarLabel.slice(0, 1)}
+        </span>
+      ) : null}
       {icon ? (
         <span data-slot="linked-entity-cell-icon" className="shrink-0 text-muted-foreground">
           {icon}
@@ -52,12 +83,18 @@ export function LinkedEntityCell({
             target={external ? "_blank" : undefined}
             rel={external ? "noreferrer" : undefined}
             onClick={onNavigate}
-            className="inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline"
+            className={cn(
+              "inline-flex max-w-full items-center gap-1 truncate text-sm font-medium text-foreground underline-offset-4 hover:text-primary hover:underline",
+              nameClassName,
+            )}
           >
             {content}
           </a>
         ) : (
-          <span data-slot="linked-entity-cell-name" className="block truncate font-medium text-foreground">
+          <span
+            data-slot="linked-entity-cell-name"
+            className={cn("block truncate text-sm font-medium text-foreground", nameClassName)}
+          >
             {name}
           </span>
         )}
@@ -69,6 +106,11 @@ export function LinkedEntityCell({
           </div>
         ) : null}
       </div>
+      {trailingAction ? (
+        <span data-slot="linked-entity-cell-trailing" className="shrink-0">
+          {trailingAction}
+        </span>
+      ) : null}
     </div>
   )
 }

package/src/components/owner-chips.tsx

@@ -73,7 +73,7 @@ function SalesforceMark({ size = 13 }: { size?: number }) {
 
 function OwnerAvatar({ person, size = "sm" }: { person: OwnerPerson; size?: "sm" | "default" }) {
   return (
-    <Avatar size={size} className="ring-background ring-1">
+    <Avatar size={size} className="ring-background ring-2">
       {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt={person.name} /> : null}
       <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
         {getInitials({ name: person.name, email: person.email })}

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

@@ -270,6 +270,13 @@ export function VirtualizedDataTable<TData>({
                   onColumnSort!(sortKey!, newDir)
                 } : undefined
 
+                const headerDef = header.column.columnDef.header
+                // When the header is a plain string, expose it as a native title
+                // tooltip so truncated headers remain readable. Non-string
+                // ReactNode headers render no title.
+                const headerTitle =
+                  typeof headerDef === "string" ? headerDef : undefined
+
                 return (
                   <div
                     key={header.id}
@@ -290,25 +297,22 @@ export function VirtualizedDataTable<TData>({
                         {canServerSort ? (
                           <button
                             type="button"
-                            className="flex min-w-0 flex-1 items-center gap-1 hover:text-foreground transition-colors"
+                            className="flex min-w-0 flex-1 items-center gap-1 text-xs leading-4 hover:text-foreground transition-colors"
                             onClick={handleHeaderClick}
                           >
-                            <span className="min-w-0 truncate">
-                              {flexRender(header.column.columnDef.header, header.getContext())}
+                            <span className="min-w-0 truncate text-xs leading-4" title={headerTitle}>
+                              {flexRender(headerDef, header.getContext())}
                             </span>
                             {sortIcon}
                           </button>
                         ) : header.column.getCanSort() ? (
                           <button
                             type="button"
-                            className="flex min-w-0 flex-1 items-center gap-1 hover:text-foreground transition-colors"
+                            className="flex min-w-0 flex-1 items-center gap-1 text-xs leading-4 hover:text-foreground transition-colors"
                             onClick={header.column.getToggleSortingHandler()}
                           >
-                            <span className="min-w-0 truncate">
-                              {flexRender(
-                                header.column.columnDef.header,
-                                header.getContext(),
-                              )}
+                            <span className="min-w-0 truncate text-xs leading-4" title={headerTitle}>
+                              {flexRender(headerDef, header.getContext())}
                             </span>
                             {header.column.getIsSorted() === "asc" ? (
                               <ArrowUp className="w-3 h-3 shrink-0" />
@@ -319,11 +323,8 @@ export function VirtualizedDataTable<TData>({
                             )}
                           </button>
                         ) : (
-                          <span className="min-w-0 flex-1 truncate">
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
+                          <span className="min-w-0 flex-1 truncate text-xs leading-4" title={headerTitle}>
+                            {flexRender(headerDef, header.getContext())}
                           </span>
                         )}
                         {(canServerSort || header.column.getCanSort() || header.column.getCanHide()) && (

package/src/index.ts

@@ -5,6 +5,7 @@
 
 // Utilities
 export { cn } from "./lib/utils"
+export { getEntityColor } from "./lib/entity-color"
 export { BRAND_ICONS, BRAND_GRAPHICS } from "./lib/icons"
 export { displayName, getInitials, shortName, type ProfileLike } from "./lib/user-display"
 

package/src/lib/entity-color.ts

@@ -0,0 +1,22 @@
+/**
+ * Deterministically maps an entity name to a muted Tailwind color class pair
+ * (background + text) used for entity avatar/initial badges. The same input
+ * always yields the same color so a given entity keeps a stable color across
+ * the app.
+ */
+const COLORS = [
+  "bg-muted text-muted-foreground",
+  "bg-gray-100 text-gray-600",
+  "bg-zinc-100 text-zinc-600",
+  "bg-blue-50 text-blue-600",
+  "bg-indigo-50 text-indigo-600",
+  "bg-violet-50 text-violet-600",
+]
+
+export function getEntityColor(name: string) {
+  let hash = 0
+  for (let i = 0; i < name.length; i += 1) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return COLORS[Math.abs(hash) % COLORS.length]
+}