canvas-ui-sdk 0.3.19 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-ui-sdk",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "type": "module",
   "description": "A comprehensive UI component library with design tokens for building beautiful interfaces",
   "bin": {

package/registry/blocks/activity-feed.json

@@ -6,15 +6,16 @@
     {
       "path": "components/blocks/activity-feed.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../ui/avatar\";\nimport { TitleGroup } from \"./title-group\";\nimport { Check, Heart, MessageCircle, FileText } from \"lucide-react\";\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ActivityAuthor {\n  id: string;\n  name: string;\n  avatarUrl?: string;\n}\n\nexport interface ActivityAttachment {\n  id: string;\n  name: string;\n  size: string;\n  type?: \"document\" | \"image\" | \"other\";\n}\n\nexport interface BaseActivityItem {\n  id: string;\n  author: ActivityAuthor;\n  timestamp: string;\n}\n\nexport interface StatusChangeActivity extends BaseActivityItem {\n  type: \"status_change\";\n  action: \"completed\" | \"updated\" | \"started\" | \"archived\";\n  projectName: string;\n}\n\nexport interface CommentActivity extends BaseActivityItem {\n  type: \"comment\";\n  projectName: string;\n  content: string;\n  likes: number;\n  replies: number;\n  isLiked?: boolean;\n}\n\nexport interface AttachmentActivity extends BaseActivityItem {\n  type: \"attachment\";\n  action: \"completed\" | \"uploaded\" | \"shared\";\n  projectName: string;\n  attachment: ActivityAttachment;\n}\n\nexport type ActivityItem = StatusChangeActivity | CommentActivity | AttachmentActivity;\n\nexport interface ActivityFeedProps {\n  /** Section title */\n  title?: string;\n  /** Section subtitle */\n  subtitle?: string;\n  /** Activity items to display */\n  items?: ActivityItem[];\n  /** Callback when like button is clicked */\n  onLike?: (itemId: string) => void;\n  /** Callback when reply button is clicked */\n  onReply?: (itemId: string) => void;\n  /** Callback when attachment is clicked */\n  onAttachmentClick?: (itemId: string, attachmentId: string) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n// ============================================\n// Default Data\n// ============================================\n\nconst defaultItems: ActivityItem[] = [\n  {\n    id: \"1\",\n    type: \"status_change\",\n    author: {\n      id: \"raj\",\n      name: \"Raj Mishra\",\n      avatarUrl: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face\",\n    },\n    action: \"completed\",\n    projectName: \"Acme Project\",\n    timestamp: \"Today at 8:15 AM\",\n  },\n  {\n    id: \"2\",\n    type: \"comment\",\n    author: {\n      id: \"raj\",\n      name: \"Raj Mishra\",\n      avatarUrl: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face\",\n    },\n    projectName: \"Acme Project\",\n    content: \"Thank you Mary, the invoice looks great! Could you email it to Jeffrey and the Acme team and ask them to please pay by tomorrow?\",\n    likes: 30,\n    replies: 10,\n    isLiked: true,\n    timestamp: \"Yesterday at 11:25 AM\",\n  },\n  {\n    id: \"3\",\n    type: \"attachment\",\n    author: {\n      id: \"mary\",\n      name: \"Mary Trott\",\n      avatarUrl: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face\",\n    },\n    action: \"completed\",\n    projectName: \"Acme Project\",\n    attachment: {\n      id: \"inv-1\",\n      name: \"Invoice #23J2KF\",\n      size: \"10 MB\",\n      type: \"document\",\n    },\n    timestamp: \"3 days ago\",\n  },\n];\n\n// ============================================\n// Sub-components\n// ============================================\n\ninterface ActivityLineProps {\n  showLine: boolean;\n  height?: string;\n}\n\nfunction ActivityLine({ showLine, height = \"64px\" }: ActivityLineProps) {\n  if (!showLine) return null;\n  return (\n    <div\n      style={{\n        width: \"1px\",\n        height,\n        backgroundColor: \"var(--canvas-border-disabled)\",\n      }}\n    />\n  );\n}\n\ninterface StatusIconProps {\n  status: \"completed\" | \"updated\" | \"started\" | \"archived\";\n}\n\nfunction StatusIcon({ status }: StatusIconProps) {\n  if (status === \"completed\") {\n    return (\n      <div\n        className=\"flex items-center justify-center shrink-0\"\n        style={{\n          width: \"48px\",\n          height: \"48px\",\n          backgroundColor: \"var(--canvas-success)\",\n          borderRadius: \"var(--spacing-3xl)\",\n          border: \"1px solid var(--canvas-border)\",\n        }}\n      >\n        <Check size={20} color=\"white\" strokeWidth={2.5} />\n      </div>\n    );\n  }\n  \n  // Default fallback for other statuses\n  return (\n    <div\n      className=\"flex items-center justify-center shrink-0\"\n      style={{\n        width: \"48px\",\n        height: \"48px\",\n        backgroundColor: \"var(--canvas-surface)\",\n        borderRadius: \"var(--spacing-3xl)\",\n        border: \"1px solid var(--canvas-border)\",\n      }}\n    />\n  );\n}\n\ninterface ActivityAvatarProps {\n  avatarUrl?: string;\n  name: string;\n}\n\nfunction ActivityAvatar({ avatarUrl, name }: ActivityAvatarProps) {\n  return (\n    <Avatar\n      className=\"shrink-0\"\n      style={{\n        width: \"48px\",\n        height: \"48px\",\n        borderRadius: \"var(--spacing-3xl)\",\n        border: \"1px solid var(--canvas-border)\",\n      }}\n    >\n      <AvatarImage src={avatarUrl} alt={name} />\n      <AvatarFallback>\n        {name.split(\" \").map(n => n[0]).join(\"\").slice(0, 2)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\ninterface AttachmentCardProps {\n  attachment: ActivityAttachment;\n  onClick?: () => void;\n}\n\nfunction AttachmentCard({ attachment, onClick }: AttachmentCardProps) {\n  return (\n    <div\n      className=\"flex items-center cursor-pointer\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-2xl)\",\n        padding: \"var(--spacing-xl)\",\n        boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n        gap: \"0\",\n      }}\n      onClick={onClick}\n    >\n      {/* Icon container */}\n      <div\n        className=\"flex items-center justify-center shrink-0\"\n        style={{\n          width: \"64px\",\n          height: \"64px\",\n          backgroundColor: \"var(--canvas-surface-brand)\",\n          border: \"1px solid var(--canvas-primary)\",\n          borderRadius: \"var(--radius-md)\",\n        }}\n      >\n        <FileText size={32} style={{ color: \"var(--canvas-primary)\" }} />\n      </div>\n      \n      {/* File info */}\n      <div\n        className=\"flex flex-col justify-center\"\n        style={{\n          paddingLeft: \"var(--spacing-xl)\",\n          paddingRight: \"var(--spacing-xl)\",\n          paddingTop: \"var(--spacing-md)\",\n          paddingBottom: \"var(--spacing-md)\",\n        }}\n      >\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: \"var(--typo-body-s-weight)\",\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {attachment.name}\n        </span>\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: \"var(--typo-body-s-weight)\",\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {attachment.size}\n        </span>\n      </div>\n    </div>\n  );\n}\n\ninterface CommentCardProps {\n  content: string;\n  likes: number;\n  replies: number;\n  isLiked?: boolean;\n  onLike?: () => void;\n  onReply?: () => void;\n}\n\nfunction CommentCard({ content, likes, replies, isLiked, onLike, onReply }: CommentCardProps) {\n  return (\n    <div\n      className=\"flex flex-col w-full\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-md)\",\n        padding: \"var(--spacing-4xl)\",\n        boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n        gap: \"var(--spacing-lg)\",\n        maxWidth: \"580px\",\n      }}\n    >\n      {/* Comment content */}\n      <p\n        style={{\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size)\",\n          fontWeight: \"var(--typo-body-s-weight)\",\n          lineHeight: \"var(--typo-body-s-line-height)\",\n          color: \"var(--canvas-text)\",\n          margin: 0,\n        }}\n      >\n        {content}\n      </p>\n      \n      {/* Action icons */}\n      <div\n        className=\"flex items-center\"\n        style={{\n          gap: \"var(--spacing-lg)\",\n          paddingTop: \"var(--spacing-xxs)\",\n          paddingBottom: \"var(--spacing-xxs)\",\n        }}\n      >\n        <button\n          onClick={onLike}\n          className=\"flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n        >\n          <Heart\n            size={20}\n            fill={isLiked ? \"var(--canvas-destructive)\" : \"none\"}\n            color={isLiked ? \"var(--canvas-destructive)\" : \"var(--canvas-text)\"}\n          />\n        </button>\n        <button\n          onClick={onReply}\n          className=\"flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n        >\n          <MessageCircle size={20} style={{ color: \"var(--canvas-text)\" }} />\n        </button>\n      </div>\n      \n      {/* Stats */}\n      <div\n        className=\"flex items-start\"\n        style={{\n          gap: \"var(--spacing-xl)\",\n          paddingTop: \"var(--spacing-xs)\",\n        }}\n      >\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 500,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {likes} likes\n        </span>\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 500,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {replies} replies\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction getActionText(action: string): string {\n  switch (action) {\n    case \"completed\":\n      return \"marked\";\n    case \"updated\":\n      return \"updated\";\n    case \"started\":\n      return \"started\";\n    case \"uploaded\":\n      return \"uploaded\";\n    case \"shared\":\n      return \"shared\";\n    default:\n      return action;\n  }\n}\n\nfunction getActionSuffix(action: string): string {\n  switch (action) {\n    case \"completed\":\n      return \"as complete\";\n    case \"updated\":\n      return \"\";\n    case \"started\":\n      return \"\";\n    default:\n      return \"\";\n  }\n}\n\n// ============================================\n// Main Component\n// ============================================\n\n/**\n * Canvas Design System - Activity Feed Block\n * \n * A timeline-style activity feed showing user actions, comments, and file\n * attachments with connecting lines. Useful for project updates, notifications,\n * and collaboration views.\n * \n * @example\n * ```tsx\n * <ActivityFeed\n *   title=\"Project status\"\n *   subtitle=\"Last updated today\"\n *   items={activityItems}\n *   onLike={(id) => console.log(\"Liked\", id)}\n * />\n * ```\n */\nexport function ActivityFeed({\n  title = \"Project status\",\n  subtitle = \"Last updated today\",\n  items = defaultItems,\n  onLike,\n  onReply,\n  onAttachmentClick,\n  className,\n}: ActivityFeedProps) {\n  return (\n    <div \n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-xl)\" }}\n    >\n      {/* Header Section */}\n      <TitleGroup title={title} subtitle={subtitle} />\n\n      {/* Activity List */}\n      <div className=\"flex flex-col w-full overflow-hidden\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          \n          return (\n            <div\n              key={item.id}\n              className=\"flex flex-col w-full\"\n              style={{\n                paddingTop: index === 0 ? \"0\" : \"var(--spacing-xl)\",\n                paddingBottom: isLast ? \"0\" : \"var(--spacing-xl)\",\n              }}\n            >\n              <div\n                className=\"flex w-full\"\n                style={{ gap: \"var(--spacing-xl)\" }}\n              >\n                {/* Left column - Avatar/Icon with line */}\n                <div\n                  className=\"flex flex-col items-center shrink-0\"\n                  style={{ gap: \"var(--spacing-md)\" }}\n                >\n                  {item.type === \"status_change\" ? (\n                    <StatusIcon status={item.action} />\n                  ) : (\n                    <ActivityAvatar\n                      avatarUrl={item.author.avatarUrl}\n                      name={item.author.name}\n                    />\n                  )}\n                  <ActivityLine showLine={!isLast} height={item.type === \"comment\" ? \"100%\" : \"64px\"} />\n                </div>\n\n                {/* Right column - Content */}\n                <div\n                  className=\"flex flex-col flex-1 min-w-0\"\n                  style={{ gap: \"var(--spacing-lg)\" }}\n                >\n                  {/* Activity header row */}\n                  <div\n                    className=\"flex flex-col justify-center\"\n                    style={{\n                      minHeight: \"48px\",\n                      gap: \"0\",\n                    }}\n                  >\n                    {/* Title line */}\n                    <p\n                      style={{\n                        fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                        fontSize: \"var(--typo-body-s-size)\",\n                        lineHeight: \"var(--typo-body-s-line-height)\",\n                        margin: 0,\n                      }}\n                    >\n                      <span\n                        style={{\n                          fontWeight: 600,\n                          color: \"var(--canvas-text)\",\n                        }}\n                      >\n                        {item.author.name}\n                      </span>\n                      {\" \"}\n                      <span\n                        style={{\n                          fontWeight: \"var(--typo-body-s-weight)\",\n                          color: \"var(--canvas-text-placeholder)\",\n                        }}\n                      >\n                        {item.type === \"comment\" ? \"comments on\" : getActionText((item as StatusChangeActivity | AttachmentActivity).action)}\n                      </span>\n                      {\" \"}\n                      <span\n                        style={{\n                          fontWeight: \"var(--typo-body-s-weight)\",\n                          color: \"var(--canvas-text)\",\n                        }}\n                      >\n                        {item.type === \"comment\" \n                          ? (item as CommentActivity).projectName\n                          : (item as StatusChangeActivity | AttachmentActivity).projectName\n                        }\n                      </span>\n                      {item.type !== \"comment\" && getActionSuffix((item as StatusChangeActivity | AttachmentActivity).action) && (\n                        <>\n                          {\" \"}\n                          <span\n                            style={{\n                              fontWeight: \"var(--typo-body-s-weight)\",\n                              color: \"var(--canvas-text-placeholder)\",\n                            }}\n                          >\n                            {getActionSuffix((item as StatusChangeActivity | AttachmentActivity).action)}\n                          </span>\n                        </>\n                      )}\n                    </p>\n                    \n                    {/* Timestamp */}\n                    <p\n                      style={{\n                        fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                        fontSize: \"var(--typo-body-s-size)\",\n                        fontWeight: \"var(--typo-body-s-weight)\",\n                        lineHeight: \"var(--typo-body-s-line-height)\",\n                        color: \"var(--canvas-text-placeholder)\",\n                        margin: 0,\n                      }}\n                    >\n                      {item.timestamp}\n                    </p>\n                  </div>\n\n                  {/* Additional content based on type */}\n                  {item.type === \"comment\" && (\n                    <CommentCard\n                      content={(item as CommentActivity).content}\n                      likes={(item as CommentActivity).likes}\n                      replies={(item as CommentActivity).replies}\n                      isLiked={(item as CommentActivity).isLiked}\n                      onLike={() => onLike?.(item.id)}\n                      onReply={() => onReply?.(item.id)}\n                    />\n                  )}\n\n                  {item.type === \"attachment\" && (\n                    <AttachmentCard\n                      attachment={(item as AttachmentActivity).attachment}\n                      onClick={() => onAttachmentClick?.(item.id, (item as AttachmentActivity).attachment.id)}\n                    />\n                  )}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../ui/avatar\";\nimport { TitleGroup } from \"./title-group\";\nimport { Check, Heart, MessageCircle, FileText } from \"lucide-react\";\nimport { AVATAR_ETHAN_BROOKS, AVATAR_NICOLE_PALMER } from \"./demo-avatars\";\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ActivityAuthor {\n  id: string;\n  name: string;\n  avatarUrl?: string;\n}\n\nexport interface ActivityAttachment {\n  id: string;\n  name: string;\n  size: string;\n  type?: \"document\" | \"image\" | \"other\";\n}\n\nexport interface BaseActivityItem {\n  id: string;\n  author: ActivityAuthor;\n  timestamp: string;\n}\n\nexport interface StatusChangeActivity extends BaseActivityItem {\n  type: \"status_change\";\n  action: \"completed\" | \"updated\" | \"started\" | \"archived\";\n  projectName: string;\n}\n\nexport interface CommentActivity extends BaseActivityItem {\n  type: \"comment\";\n  projectName: string;\n  content: string;\n  likes: number;\n  replies: number;\n  isLiked?: boolean;\n}\n\nexport interface AttachmentActivity extends BaseActivityItem {\n  type: \"attachment\";\n  action: \"completed\" | \"uploaded\" | \"shared\";\n  projectName: string;\n  attachment: ActivityAttachment;\n}\n\nexport type ActivityItem = StatusChangeActivity | CommentActivity | AttachmentActivity;\n\nexport interface ActivityFeedProps {\n  /** Section title */\n  title?: string;\n  /** Section subtitle */\n  subtitle?: string;\n  /** Activity items to display */\n  items?: ActivityItem[];\n  /** Callback when like button is clicked */\n  onLike?: (itemId: string) => void;\n  /** Callback when reply button is clicked */\n  onReply?: (itemId: string) => void;\n  /** Callback when attachment is clicked */\n  onAttachmentClick?: (itemId: string, attachmentId: string) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n// ============================================\n// Default Data\n// ============================================\n\nconst defaultItems: ActivityItem[] = [\n  {\n    id: \"1\",\n    type: \"status_change\",\n    author: {\n      id: \"ethan\",\n      name: \"Ethan Brooks\",\n      avatarUrl: AVATAR_ETHAN_BROOKS,\n    },\n    action: \"completed\",\n    projectName: \"Acme Project\",\n    timestamp: \"Today at 8:15 AM\",\n  },\n  {\n    id: \"2\",\n    type: \"comment\",\n    author: {\n      id: \"ethan\",\n      name: \"Ethan Brooks\",\n      avatarUrl: AVATAR_ETHAN_BROOKS,\n    },\n    projectName: \"Acme Project\",\n    content: \"Thank you Nicole, the invoice looks great! Could you email it to Marcus and the Acme team and ask them to please pay by tomorrow?\",\n    likes: 30,\n    replies: 10,\n    isLiked: true,\n    timestamp: \"Yesterday at 11:25 AM\",\n  },\n  {\n    id: \"3\",\n    type: \"attachment\",\n    author: {\n      id: \"nicole\",\n      name: \"Nicole Palmer\",\n      avatarUrl: AVATAR_NICOLE_PALMER,\n    },\n    action: \"completed\",\n    projectName: \"Acme Project\",\n    attachment: {\n      id: \"inv-1\",\n      name: \"Invoice #23J2KF\",\n      size: \"10 MB\",\n      type: \"document\",\n    },\n    timestamp: \"3 days ago\",\n  },\n];\n\n// ============================================\n// Sub-components\n// ============================================\n\ninterface ActivityLineProps {\n  showLine: boolean;\n  height?: string;\n}\n\nfunction ActivityLine({ showLine, height = \"64px\" }: ActivityLineProps) {\n  if (!showLine) return null;\n  return (\n    <div\n      style={{\n        width: \"1px\",\n        height,\n        backgroundColor: \"var(--canvas-border-disabled)\",\n      }}\n    />\n  );\n}\n\ninterface StatusIconProps {\n  status: \"completed\" | \"updated\" | \"started\" | \"archived\";\n}\n\nfunction StatusIcon({ status }: StatusIconProps) {\n  if (status === \"completed\") {\n    return (\n      <div\n        className=\"flex items-center justify-center shrink-0\"\n        style={{\n          width: \"48px\",\n          height: \"48px\",\n          backgroundColor: \"var(--canvas-success)\",\n          borderRadius: \"var(--spacing-3xl)\",\n          border: \"1px solid var(--canvas-border)\",\n        }}\n      >\n        <Check size={20} color=\"white\" strokeWidth={2.5} />\n      </div>\n    );\n  }\n  \n  // Default fallback for other statuses\n  return (\n    <div\n      className=\"flex items-center justify-center shrink-0\"\n      style={{\n        width: \"48px\",\n        height: \"48px\",\n        backgroundColor: \"var(--canvas-surface)\",\n        borderRadius: \"var(--spacing-3xl)\",\n        border: \"1px solid var(--canvas-border)\",\n      }}\n    />\n  );\n}\n\ninterface ActivityAvatarProps {\n  avatarUrl?: string;\n  name: string;\n}\n\nfunction ActivityAvatar({ avatarUrl, name }: ActivityAvatarProps) {\n  return (\n    <Avatar\n      className=\"shrink-0\"\n      style={{\n        width: \"48px\",\n        height: \"48px\",\n        borderRadius: \"var(--spacing-3xl)\",\n        border: \"1px solid var(--canvas-border)\",\n      }}\n    >\n      <AvatarImage src={avatarUrl} alt={name} />\n      <AvatarFallback>\n        {name.split(\" \").map(n => n[0]).join(\"\").slice(0, 2)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\ninterface AttachmentCardProps {\n  attachment: ActivityAttachment;\n  onClick?: () => void;\n}\n\nfunction AttachmentCard({ attachment, onClick }: AttachmentCardProps) {\n  return (\n    <div\n      className=\"flex items-center cursor-pointer\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-2xl)\",\n        padding: \"var(--spacing-xl)\",\n        boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n        gap: \"0\",\n      }}\n      onClick={onClick}\n    >\n      {/* Icon container */}\n      <div\n        className=\"flex items-center justify-center shrink-0\"\n        style={{\n          width: \"64px\",\n          height: \"64px\",\n          backgroundColor: \"var(--canvas-surface-brand)\",\n          border: \"1px solid var(--canvas-primary)\",\n          borderRadius: \"var(--radius-md)\",\n        }}\n      >\n        <FileText size={32} style={{ color: \"var(--canvas-primary)\" }} />\n      </div>\n      \n      {/* File info */}\n      <div\n        className=\"flex flex-col justify-center\"\n        style={{\n          paddingLeft: \"var(--spacing-xl)\",\n          paddingRight: \"var(--spacing-xl)\",\n          paddingTop: \"var(--spacing-md)\",\n          paddingBottom: \"var(--spacing-md)\",\n        }}\n      >\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: \"var(--typo-body-s-weight)\",\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {attachment.name}\n        </span>\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: \"var(--typo-body-s-weight)\",\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {attachment.size}\n        </span>\n      </div>\n    </div>\n  );\n}\n\ninterface CommentCardProps {\n  content: string;\n  likes: number;\n  replies: number;\n  isLiked?: boolean;\n  onLike?: () => void;\n  onReply?: () => void;\n}\n\nfunction CommentCard({ content, likes, replies, isLiked, onLike, onReply }: CommentCardProps) {\n  return (\n    <div\n      className=\"flex flex-col w-full\"\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n        border: \"1px solid var(--canvas-border)\",\n        borderRadius: \"var(--radius-md)\",\n        padding: \"var(--spacing-4xl)\",\n        boxShadow: \"0px 1px 8px 0px rgba(0, 0, 0, 0.03)\",\n        gap: \"var(--spacing-lg)\",\n        maxWidth: \"580px\",\n      }}\n    >\n      {/* Comment content */}\n      <p\n        style={{\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size)\",\n          fontWeight: \"var(--typo-body-s-weight)\",\n          lineHeight: \"var(--typo-body-s-line-height)\",\n          color: \"var(--canvas-text)\",\n          margin: 0,\n        }}\n      >\n        {content}\n      </p>\n      \n      {/* Action icons */}\n      <div\n        className=\"flex items-center\"\n        style={{\n          gap: \"var(--spacing-lg)\",\n          paddingTop: \"var(--spacing-xxs)\",\n          paddingBottom: \"var(--spacing-xxs)\",\n        }}\n      >\n        <button\n          onClick={onLike}\n          className=\"flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n        >\n          <Heart\n            size={20}\n            fill={isLiked ? \"var(--canvas-destructive)\" : \"none\"}\n            color={isLiked ? \"var(--canvas-destructive)\" : \"var(--canvas-text)\"}\n          />\n        </button>\n        <button\n          onClick={onReply}\n          className=\"flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n        >\n          <MessageCircle size={20} style={{ color: \"var(--canvas-text)\" }} />\n        </button>\n      </div>\n      \n      {/* Stats */}\n      <div\n        className=\"flex items-start\"\n        style={{\n          gap: \"var(--spacing-xl)\",\n          paddingTop: \"var(--spacing-xs)\",\n        }}\n      >\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 500,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {likes} likes\n        </span>\n        <span\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 500,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-placeholder)\",\n          }}\n        >\n          {replies} replies\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction getActionText(action: string): string {\n  switch (action) {\n    case \"completed\":\n      return \"marked\";\n    case \"updated\":\n      return \"updated\";\n    case \"started\":\n      return \"started\";\n    case \"uploaded\":\n      return \"uploaded\";\n    case \"shared\":\n      return \"shared\";\n    default:\n      return action;\n  }\n}\n\nfunction getActionSuffix(action: string): string {\n  switch (action) {\n    case \"completed\":\n      return \"as complete\";\n    case \"updated\":\n      return \"\";\n    case \"started\":\n      return \"\";\n    default:\n      return \"\";\n  }\n}\n\n// ============================================\n// Main Component\n// ============================================\n\n/**\n * Canvas Design System - Activity Feed Block\n * \n * A timeline-style activity feed showing user actions, comments, and file\n * attachments with connecting lines. Useful for project updates, notifications,\n * and collaboration views.\n * \n * @example\n * ```tsx\n * <ActivityFeed\n *   title=\"Project status\"\n *   subtitle=\"Last updated today\"\n *   items={activityItems}\n *   onLike={(id) => console.log(\"Liked\", id)}\n * />\n * ```\n */\nexport function ActivityFeed({\n  title = \"Project status\",\n  subtitle = \"Last updated today\",\n  items = defaultItems,\n  onLike,\n  onReply,\n  onAttachmentClick,\n  className,\n}: ActivityFeedProps) {\n  return (\n    <div \n      className={cn(\"flex flex-col w-full\", className)}\n      style={{ gap: \"var(--spacing-xl)\" }}\n    >\n      {/* Header Section */}\n      <TitleGroup title={title} subtitle={subtitle} />\n\n      {/* Activity List */}\n      <div className=\"flex flex-col w-full overflow-hidden\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          \n          return (\n            <div\n              key={item.id}\n              className=\"flex flex-col w-full\"\n              style={{\n                paddingTop: index === 0 ? \"0\" : \"var(--spacing-xl)\",\n                paddingBottom: isLast ? \"0\" : \"var(--spacing-xl)\",\n              }}\n            >\n              <div\n                className=\"flex w-full\"\n                style={{ gap: \"var(--spacing-xl)\" }}\n              >\n                {/* Left column - Avatar/Icon with line */}\n                <div\n                  className=\"flex flex-col items-center shrink-0\"\n                  style={{ gap: \"var(--spacing-md)\" }}\n                >\n                  {item.type === \"status_change\" ? (\n                    <StatusIcon status={item.action} />\n                  ) : (\n                    <ActivityAvatar\n                      avatarUrl={item.author.avatarUrl}\n                      name={item.author.name}\n                    />\n                  )}\n                  <ActivityLine showLine={!isLast} height={item.type === \"comment\" ? \"100%\" : \"64px\"} />\n                </div>\n\n                {/* Right column - Content */}\n                <div\n                  className=\"flex flex-col flex-1 min-w-0\"\n                  style={{ gap: \"var(--spacing-lg)\" }}\n                >\n                  {/* Activity header row */}\n                  <div\n                    className=\"flex flex-col justify-center\"\n                    style={{\n                      minHeight: \"48px\",\n                      gap: \"0\",\n                    }}\n                  >\n                    {/* Title line */}\n                    <p\n                      style={{\n                        fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                        fontSize: \"var(--typo-body-s-size)\",\n                        lineHeight: \"var(--typo-body-s-line-height)\",\n                        margin: 0,\n                      }}\n                    >\n                      <span\n                        style={{\n                          fontWeight: 600,\n                          color: \"var(--canvas-text)\",\n                        }}\n                      >\n                        {item.author.name}\n                      </span>\n                      {\" \"}\n                      <span\n                        style={{\n                          fontWeight: \"var(--typo-body-s-weight)\",\n                          color: \"var(--canvas-text-placeholder)\",\n                        }}\n                      >\n                        {item.type === \"comment\" ? \"comments on\" : getActionText((item as StatusChangeActivity | AttachmentActivity).action)}\n                      </span>\n                      {\" \"}\n                      <span\n                        style={{\n                          fontWeight: \"var(--typo-body-s-weight)\",\n                          color: \"var(--canvas-text)\",\n                        }}\n                      >\n                        {item.type === \"comment\" \n                          ? (item as CommentActivity).projectName\n                          : (item as StatusChangeActivity | AttachmentActivity).projectName\n                        }\n                      </span>\n                      {item.type !== \"comment\" && getActionSuffix((item as StatusChangeActivity | AttachmentActivity).action) && (\n                        <>\n                          {\" \"}\n                          <span\n                            style={{\n                              fontWeight: \"var(--typo-body-s-weight)\",\n                              color: \"var(--canvas-text-placeholder)\",\n                            }}\n                          >\n                            {getActionSuffix((item as StatusChangeActivity | AttachmentActivity).action)}\n                          </span>\n                        </>\n                      )}\n                    </p>\n                    \n                    {/* Timestamp */}\n                    <p\n                      style={{\n                        fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                        fontSize: \"var(--typo-body-s-size)\",\n                        fontWeight: \"var(--typo-body-s-weight)\",\n                        lineHeight: \"var(--typo-body-s-line-height)\",\n                        color: \"var(--canvas-text-placeholder)\",\n                        margin: 0,\n                      }}\n                    >\n                      {item.timestamp}\n                    </p>\n                  </div>\n\n                  {/* Additional content based on type */}\n                  {item.type === \"comment\" && (\n                    <CommentCard\n                      content={(item as CommentActivity).content}\n                      likes={(item as CommentActivity).likes}\n                      replies={(item as CommentActivity).replies}\n                      isLiked={(item as CommentActivity).isLiked}\n                      onLike={() => onLike?.(item.id)}\n                      onReply={() => onReply?.(item.id)}\n                    />\n                  )}\n\n                  {item.type === \"attachment\" && (\n                    <AttachmentCard\n                      attachment={(item as AttachmentActivity).attachment}\n                      onClick={() => onAttachmentClick?.(item.id, (item as AttachmentActivity).attachment.id)}\n                    />\n                  )}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
     }
   ],
   "dependencies": [
     "lucide-react"
   ],
   "registryDependencies": [
-    "utils",
-    "avatar",
-    "title-group"
+    "lib/utils",
+    "ui/avatar",
+    "blocks/title-group",
+    "blocks/demo-avatars"
   ]
 }

package/registry/blocks/bottom-input-chat-widget.json

@@ -6,14 +6,15 @@
     {
       "path": "components/blocks/bottom-input-chat-widget.tsx",
       "type": "registry:block",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { ChevronLeft, ChevronRight, MoreVertical, Paperclip } from \"lucide-react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../ui/avatar\";\nimport { cn } from \"../../lib/utils\";\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ChatThread {\n  id: string;\n  name: string;\n  avatarUrl?: string;\n  preview: string;\n  unreadCount?: number;\n}\n\nexport interface ChatMessageData {\n  id: string;\n  senderName: string;\n  senderAvatar?: string;\n  content: string;\n  timestamp: string;\n}\n\ninterface MessageThreadItemProps {\n  thread: ChatThread;\n  onClick?: () => void;\n}\n\ninterface ConversationMessageProps {\n  message: ChatMessageData;\n}\n\ninterface ChatInputBarProps {\n  placeholder?: string;\n  onSend?: (message: string) => void;\n}\n\ninterface ConversationHeaderProps {\n  name: string;\n  onBackClick?: () => void;\n  onMenuClick?: () => void;\n}\n\nexport interface BottomInputChatWidgetProps {\n  variant?: \"threads\" | \"conversation\";\n  title?: string;\n  threads?: ChatThread[];\n  messages?: ChatMessageData[];\n  conversationName?: string;\n  onThreadClick?: (threadId: string) => void;\n  onBackClick?: () => void;\n  onSend?: (message: string) => void;\n  className?: string;\n}\n\n// ============================================\n// Default Data\n// ============================================\n\nconst defaultThreads: ChatThread[] = [\n  {\n    id: \"1\",\n    name: \"Jeffrey Connor\",\n    avatarUrl: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face\",\n    preview: \"That's true. Let's go ahead and book the mountain cabin then!\",\n    unreadCount: 12,\n  },\n  {\n    id: \"2\",\n    name: \"Mary Trott\",\n    avatarUrl: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face\",\n    preview: \"Sounds great! Let's meet at 2PM.\",\n  },\n  {\n    id: \"3\",\n    name: \"Taylor Reed\",\n    avatarUrl: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face\",\n    preview: \"Thanks for sending the conference agenda. I'll add my comments in the document.\",\n  },\n];\n\nconst defaultMessages: ChatMessageData[] = [\n  {\n    id: \"1\",\n    senderName: \"Jeffrey Connor\",\n    senderAvatar: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face\",\n    content: \"That's true. Let's go ahead and book the mountain cabin then!\",\n    timestamp: \"Feb 23, 1:32 PM\",\n  },\n  {\n    id: \"2\",\n    senderName: \"Mary Trott\",\n    senderAvatar: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face\",\n    content: \"Sounds great! Let's meet at 2PM.\",\n    timestamp: \"Feb 23, 3:50 PM\",\n  },\n  {\n    id: \"3\",\n    senderName: \"Taylor Reed\",\n    senderAvatar: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face\",\n    content: \"Thanks for sending the conference agenda. I'll add my comments in the document.\",\n    timestamp: \"Feb 23, 6:13 PM\",\n  },\n];\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction MessageThreadItem({ thread, onClick }: MessageThreadItemProps) {\n  const initials = thread.name\n    .split(\" \")\n    .map((n) => n[0])\n    .join(\"\");\n\n  return (\n    <div\n      className=\"flex items-start gap-[var(--spacing-xl)] py-[var(--spacing-2xl)] cursor-pointer hover:opacity-80 transition-opacity\"\n      style={{\n        borderTop: \"1px solid var(--canvas-border)\",\n        borderBottom: \"1px solid var(--canvas-border)\",\n      }}\n      onClick={onClick}\n    >\n      {/* Avatar */}\n      <Avatar\n        className=\"size-12 shrink-0\"\n        style={{\n          borderRadius: \"var(--spacing-3xl)\",\n          border: \"1px solid var(--canvas-border)\",\n        }}\n      >\n        <AvatarImage src={thread.avatarUrl} alt={thread.name} />\n        <AvatarFallback\n          style={{\n            backgroundColor: \"var(--canvas-surface)\",\n            color: \"var(--canvas-text-muted)\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 600,\n          }}\n        >\n          {initials}\n        </AvatarFallback>\n      </Avatar>\n\n      {/* Content */}\n      <div className=\"flex-1 min-w-0\">\n        <p\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 600,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {thread.name}\n        </p>\n        <p\n          className=\"truncate\"\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 400,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-muted)\",\n          }}\n        >\n          {thread.preview}\n        </p>\n      </div>\n\n      {/* Right side: unread badge + chevron */}\n      <div className=\"flex items-center gap-[var(--spacing-xl)] self-stretch shrink-0\">\n        {thread.unreadCount && thread.unreadCount > 0 && (\n          <div\n            className=\"flex items-center justify-center size-10 rounded-full\"\n            style={{\n              backgroundColor: \"var(--canvas-primary)\",\n            }}\n          >\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size)\",\n                fontWeight: 600,\n                lineHeight: \"var(--typo-body-s-line-height)\",\n                color: \"var(--canvas-primary-foreground)\",\n              }}\n            >\n              {thread.unreadCount}\n            </span>\n          </div>\n        )}\n        <ChevronRight\n          className=\"size-10\"\n          style={{ color: \"var(--canvas-text-placeholder)\" }}\n          strokeWidth={1.5}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction ConversationMessage({ message }: ConversationMessageProps) {\n  const initials = message.senderName\n    .split(\" \")\n    .map((n) => n[0])\n    .join(\"\");\n\n  return (\n    <div className=\"flex items-start gap-[var(--spacing-xl)] py-[var(--spacing-2xl)]\">\n      {/* Avatar */}\n      <Avatar\n        className=\"size-12 shrink-0\"\n        style={{\n          borderRadius: \"var(--radius-xs)\",\n          border: \"1px solid var(--canvas-border)\",\n        }}\n      >\n        <AvatarImage src={message.senderAvatar} alt={message.senderName} />\n        <AvatarFallback\n          style={{\n            backgroundColor: \"var(--canvas-surface)\",\n            color: \"var(--canvas-text-muted)\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 600,\n            borderRadius: \"var(--radius-xs)\",\n          }}\n        >\n          {initials}\n        </AvatarFallback>\n      </Avatar>\n\n      {/* Content */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-[var(--spacing-xl)]\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-body-s-size)\",\n              fontWeight: 600,\n              lineHeight: \"var(--typo-body-s-line-height)\",\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {message.senderName}\n          </span>\n          <span\n            style={{\n              fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-body-s-size)\",\n              fontWeight: 400,\n              lineHeight: \"var(--typo-body-s-line-height)\",\n              color: \"var(--canvas-text-placeholder)\",\n            }}\n          >\n            {message.timestamp}\n          </span>\n        </div>\n        <p\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 400,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {message.content}\n        </p>\n      </div>\n    </div>\n  );\n}\n\nfunction ConversationHeader({ name, onBackClick, onMenuClick }: ConversationHeaderProps) {\n  return (\n    <div className=\"flex items-center gap-[var(--spacing-xs)]\">\n      <button\n        onClick={onBackClick}\n        className=\"size-10 flex items-center justify-center hover:opacity-70 transition-opacity\"\n        aria-label=\"Go back\"\n      >\n        <ChevronLeft\n          className=\"size-6\"\n          style={{ color: \"var(--canvas-text-placeholder)\" }}\n          strokeWidth={1.5}\n        />\n      </button>\n      <span\n        className=\"flex-1\"\n        style={{\n          fontFamily: \"var(--typo-body-xl-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-xl-size)\",\n          fontWeight: 600,\n          lineHeight: \"1.5\",\n          color: \"var(--canvas-text)\",\n        }}\n      >\n        {name}\n      </span>\n      <button\n        onClick={onMenuClick}\n        className=\"size-8 flex items-center justify-center hover:opacity-70 transition-opacity rounded-full\"\n        aria-label=\"More options\"\n      >\n        <MoreVertical\n          className=\"size-5\"\n          style={{ color: \"var(--canvas-text-placeholder)\" }}\n        />\n      </button>\n    </div>\n  );\n}\n\nfunction ChatInputBar({ placeholder = \"Send a message\", onSend }: ChatInputBarProps) {\n  const [value, setValue] = useState(\"\");\n\n  const handleSend = () => {\n    if (value.trim() && onSend) {\n      onSend(value.trim());\n      setValue(\"\");\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      handleSend();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex items-center gap-[var(--spacing-xl)] h-20\"\n      style={{\n        borderTop: \"1px solid var(--canvas-border)\",\n        borderBottom: \"1px solid var(--canvas-border)\",\n      }}\n    >\n      {/* Input field */}\n      <div className=\"flex-1 flex items-center gap-[var(--spacing-md)] h-11\">\n        <input\n          type=\"text\"\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          className=\"flex-1 bg-transparent outline-none\"\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 400,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        />\n        <button\n          className=\"size-6 flex items-center justify-center hover:opacity-70 transition-opacity\"\n          aria-label=\"Attach file\"\n        >\n          <Paperclip\n            className=\"size-6\"\n            style={{ color: \"var(--canvas-text-placeholder)\" }}\n          />\n        </button>\n      </div>\n\n      {/* Send button */}\n      <button\n        onClick={handleSend}\n        className=\"h-11 px-[var(--spacing-xl)] flex items-center justify-center transition-colors hover:opacity-90\"\n        style={{\n          backgroundColor: \"var(--btn-primary-bg)\",\n          color: \"var(--btn-primary-text)\",\n          borderRadius: \"var(--radius-xs)\",\n          boxShadow: \"0px 1px 8px 0px rgba(0,0,0,0.03)\",\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size)\",\n          fontWeight: 600,\n          lineHeight: \"var(--typo-body-s-line-height)\",\n        }}\n      >\n        Send\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// Main Component\n// ============================================\n\nexport function BottomInputChatWidget({\n  variant = \"threads\",\n  title = \"Messages\",\n  threads = defaultThreads,\n  messages = defaultMessages,\n  conversationName = \"Mary Trott\",\n  onThreadClick,\n  onBackClick,\n  onSend,\n  className,\n}: BottomInputChatWidgetProps) {\n  if (variant === \"threads\") {\n    return (\n      <div\n        className={cn(\n          \"flex flex-col gap-[var(--spacing-3xl)] py-[var(--spacing-xl)]\",\n          className\n        )}\n        style={{\n          backgroundColor: \"var(--canvas-background)\",\n        }}\n      >\n        {/* Title */}\n        <div className=\"flex flex-col gap-[var(--spacing-xl)]\">\n          <h2\n            style={{\n              fontFamily: \"var(--typo-h6-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h6-size)\",\n              fontWeight: \"var(--typo-h6-weight)\",\n              lineHeight: \"var(--typo-h6-line-height)\",\n              color: \"var(--canvas-text)\",\n              margin: 0,\n            }}\n          >\n            {title}\n          </h2>\n        </div>\n\n        {/* Thread list */}\n        <div className=\"flex flex-col\">\n          {threads.map((thread, index) => (\n            <div\n              key={thread.id}\n              style={{\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n              }}\n            >\n              <MessageThreadItem\n                thread={thread}\n                onClick={() => onThreadClick?.(thread.id)}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Conversation variant\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-[var(--spacing-3xl)] py-[var(--spacing-xl)]\",\n        className\n      )}\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n      }}\n    >\n      {/* Messages section */}\n      <div className=\"flex flex-col gap-[var(--spacing-xl)]\">\n        {/* Header */}\n        <ConversationHeader\n          name={conversationName}\n          onBackClick={onBackClick}\n        />\n\n        {/* Messages list */}\n        <div className=\"flex flex-col\">\n          {messages.map((message, index) => (\n            <div\n              key={message.id}\n              style={{\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n              }}\n            >\n              <ConversationMessage message={message} />\n            </div>\n          ))}\n        </div>\n\n        {/* Input bar */}\n        <ChatInputBar onSend={onSend} />\n      </div>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { ChevronLeft, ChevronRight, MoreVertical, Paperclip } from \"lucide-react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../ui/avatar\";\nimport { cn } from \"../../lib/utils\";\nimport { AVATAR_ETHAN_BROOKS, AVATAR_SARAH_CHEN, AVATAR_NICOLE_PALMER } from \"./demo-avatars\";\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ChatThread {\n  id: string;\n  name: string;\n  avatarUrl?: string;\n  preview: string;\n  unreadCount?: number;\n}\n\nexport interface ChatMessageData {\n  id: string;\n  senderName: string;\n  senderAvatar?: string;\n  content: string;\n  timestamp: string;\n}\n\ninterface MessageThreadItemProps {\n  thread: ChatThread;\n  onClick?: () => void;\n}\n\ninterface ConversationMessageProps {\n  message: ChatMessageData;\n}\n\ninterface ChatInputBarProps {\n  placeholder?: string;\n  onSend?: (message: string) => void;\n}\n\ninterface ConversationHeaderProps {\n  name: string;\n  onBackClick?: () => void;\n  onMenuClick?: () => void;\n}\n\nexport interface BottomInputChatWidgetProps {\n  variant?: \"threads\" | \"conversation\";\n  title?: string;\n  threads?: ChatThread[];\n  messages?: ChatMessageData[];\n  conversationName?: string;\n  onThreadClick?: (threadId: string) => void;\n  onBackClick?: () => void;\n  onSend?: (message: string) => void;\n  className?: string;\n}\n\n// ============================================\n// Default Data\n// ============================================\n\nconst defaultThreads: ChatThread[] = [\n  {\n    id: \"1\",\n    name: \"Ethan Brooks\",\n    avatarUrl: AVATAR_ETHAN_BROOKS,\n    preview: \"That's true. Let's go ahead and book the mountain cabin then!\",\n    unreadCount: 12,\n  },\n  {\n    id: \"2\",\n    name: \"Sarah Chen\",\n    avatarUrl: AVATAR_SARAH_CHEN,\n    preview: \"Sounds great! Let's meet at 2PM.\",\n  },\n  {\n    id: \"3\",\n    name: \"Nicole Palmer\",\n    avatarUrl: AVATAR_NICOLE_PALMER,\n    preview: \"Thanks for sending the conference agenda. I'll add my comments in the document.\",\n  },\n];\n\nconst defaultMessages: ChatMessageData[] = [\n  {\n    id: \"1\",\n    senderName: \"Ethan Brooks\",\n    senderAvatar: AVATAR_ETHAN_BROOKS,\n    content: \"That's true. Let's go ahead and book the mountain cabin then!\",\n    timestamp: \"Feb 23, 1:32 PM\",\n  },\n  {\n    id: \"2\",\n    senderName: \"Sarah Chen\",\n    senderAvatar: AVATAR_SARAH_CHEN,\n    content: \"Sounds great! Let's meet at 2PM.\",\n    timestamp: \"Feb 23, 3:50 PM\",\n  },\n  {\n    id: \"3\",\n    senderName: \"Nicole Palmer\",\n    senderAvatar: AVATAR_NICOLE_PALMER,\n    content: \"Thanks for sending the conference agenda. I'll add my comments in the document.\",\n    timestamp: \"Feb 23, 6:13 PM\",\n  },\n];\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction MessageThreadItem({ thread, onClick }: MessageThreadItemProps) {\n  const initials = thread.name\n    .split(\" \")\n    .map((n) => n[0])\n    .join(\"\");\n\n  return (\n    <div\n      className=\"flex items-start gap-[var(--spacing-xl)] py-[var(--spacing-2xl)] cursor-pointer hover:opacity-80 transition-opacity\"\n      style={{\n        borderTop: \"1px solid var(--canvas-border)\",\n        borderBottom: \"1px solid var(--canvas-border)\",\n      }}\n      onClick={onClick}\n    >\n      {/* Avatar */}\n      <Avatar\n        className=\"size-12 shrink-0\"\n        style={{\n          borderRadius: \"var(--spacing-3xl)\",\n          border: \"1px solid var(--canvas-border)\",\n        }}\n      >\n        <AvatarImage src={thread.avatarUrl} alt={thread.name} />\n        <AvatarFallback\n          style={{\n            backgroundColor: \"var(--canvas-surface)\",\n            color: \"var(--canvas-text-muted)\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 600,\n          }}\n        >\n          {initials}\n        </AvatarFallback>\n      </Avatar>\n\n      {/* Content */}\n      <div className=\"flex-1 min-w-0\">\n        <p\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 600,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {thread.name}\n        </p>\n        <p\n          className=\"truncate\"\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 400,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text-muted)\",\n          }}\n        >\n          {thread.preview}\n        </p>\n      </div>\n\n      {/* Right side: unread badge + chevron */}\n      <div className=\"flex items-center gap-[var(--spacing-xl)] self-stretch shrink-0\">\n        {thread.unreadCount && thread.unreadCount > 0 && (\n          <div\n            className=\"flex items-center justify-center size-10 rounded-full\"\n            style={{\n              backgroundColor: \"var(--canvas-primary)\",\n            }}\n          >\n            <span\n              style={{\n                fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n                fontSize: \"var(--typo-body-s-size)\",\n                fontWeight: 600,\n                lineHeight: \"var(--typo-body-s-line-height)\",\n                color: \"var(--canvas-primary-foreground)\",\n              }}\n            >\n              {thread.unreadCount}\n            </span>\n          </div>\n        )}\n        <ChevronRight\n          className=\"size-10\"\n          style={{ color: \"var(--canvas-text-placeholder)\" }}\n          strokeWidth={1.5}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction ConversationMessage({ message }: ConversationMessageProps) {\n  const initials = message.senderName\n    .split(\" \")\n    .map((n) => n[0])\n    .join(\"\");\n\n  return (\n    <div className=\"flex items-start gap-[var(--spacing-xl)] py-[var(--spacing-2xl)]\">\n      {/* Avatar */}\n      <Avatar\n        className=\"size-12 shrink-0\"\n        style={{\n          borderRadius: \"var(--radius-xs)\",\n          border: \"1px solid var(--canvas-border)\",\n        }}\n      >\n        <AvatarImage src={message.senderAvatar} alt={message.senderName} />\n        <AvatarFallback\n          style={{\n            backgroundColor: \"var(--canvas-surface)\",\n            color: \"var(--canvas-text-muted)\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 600,\n            borderRadius: \"var(--radius-xs)\",\n          }}\n        >\n          {initials}\n        </AvatarFallback>\n      </Avatar>\n\n      {/* Content */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-[var(--spacing-xl)]\">\n          <span\n            style={{\n              fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-body-s-size)\",\n              fontWeight: 600,\n              lineHeight: \"var(--typo-body-s-line-height)\",\n              color: \"var(--canvas-text)\",\n            }}\n          >\n            {message.senderName}\n          </span>\n          <span\n            style={{\n              fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-body-s-size)\",\n              fontWeight: 400,\n              lineHeight: \"var(--typo-body-s-line-height)\",\n              color: \"var(--canvas-text-placeholder)\",\n            }}\n          >\n            {message.timestamp}\n          </span>\n        </div>\n        <p\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 400,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        >\n          {message.content}\n        </p>\n      </div>\n    </div>\n  );\n}\n\nfunction ConversationHeader({ name, onBackClick, onMenuClick }: ConversationHeaderProps) {\n  return (\n    <div className=\"flex items-center gap-[var(--spacing-xs)]\">\n      <button\n        onClick={onBackClick}\n        className=\"size-10 flex items-center justify-center hover:opacity-70 transition-opacity\"\n        aria-label=\"Go back\"\n      >\n        <ChevronLeft\n          className=\"size-6\"\n          style={{ color: \"var(--canvas-text-placeholder)\" }}\n          strokeWidth={1.5}\n        />\n      </button>\n      <span\n        className=\"flex-1\"\n        style={{\n          fontFamily: \"var(--typo-body-xl-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-xl-size)\",\n          fontWeight: 600,\n          lineHeight: \"1.5\",\n          color: \"var(--canvas-text)\",\n        }}\n      >\n        {name}\n      </span>\n      <button\n        onClick={onMenuClick}\n        className=\"size-8 flex items-center justify-center hover:opacity-70 transition-opacity rounded-full\"\n        aria-label=\"More options\"\n      >\n        <MoreVertical\n          className=\"size-5\"\n          style={{ color: \"var(--canvas-text-placeholder)\" }}\n        />\n      </button>\n    </div>\n  );\n}\n\nfunction ChatInputBar({ placeholder = \"Send a message\", onSend }: ChatInputBarProps) {\n  const [value, setValue] = useState(\"\");\n\n  const handleSend = () => {\n    if (value.trim() && onSend) {\n      onSend(value.trim());\n      setValue(\"\");\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      handleSend();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex items-center gap-[var(--spacing-xl)] h-20\"\n      style={{\n        borderTop: \"1px solid var(--canvas-border)\",\n        borderBottom: \"1px solid var(--canvas-border)\",\n      }}\n    >\n      {/* Input field */}\n      <div className=\"flex-1 flex items-center gap-[var(--spacing-md)] h-11\">\n        <input\n          type=\"text\"\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          className=\"flex-1 bg-transparent outline-none\"\n          style={{\n            fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n            fontSize: \"var(--typo-body-s-size)\",\n            fontWeight: 400,\n            lineHeight: \"var(--typo-body-s-line-height)\",\n            color: \"var(--canvas-text)\",\n          }}\n        />\n        <button\n          className=\"size-6 flex items-center justify-center hover:opacity-70 transition-opacity\"\n          aria-label=\"Attach file\"\n        >\n          <Paperclip\n            className=\"size-6\"\n            style={{ color: \"var(--canvas-text-placeholder)\" }}\n          />\n        </button>\n      </div>\n\n      {/* Send button */}\n      <button\n        onClick={handleSend}\n        className=\"h-11 px-[var(--spacing-xl)] flex items-center justify-center transition-colors hover:opacity-90\"\n        style={{\n          backgroundColor: \"var(--btn-primary-bg)\",\n          color: \"var(--btn-primary-text)\",\n          borderRadius: \"var(--radius-xs)\",\n          boxShadow: \"0px 1px 8px 0px rgba(0,0,0,0.03)\",\n          fontFamily: \"var(--typo-body-s-font, var(--typo-global-font))\",\n          fontSize: \"var(--typo-body-s-size)\",\n          fontWeight: 600,\n          lineHeight: \"var(--typo-body-s-line-height)\",\n        }}\n      >\n        Send\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// Main Component\n// ============================================\n\nexport function BottomInputChatWidget({\n  variant = \"threads\",\n  title = \"Messages\",\n  threads = defaultThreads,\n  messages = defaultMessages,\n  conversationName = \"Sarah Chen\",\n  onThreadClick,\n  onBackClick,\n  onSend,\n  className,\n}: BottomInputChatWidgetProps) {\n  if (variant === \"threads\") {\n    return (\n      <div\n        className={cn(\n          \"flex flex-col gap-[var(--spacing-3xl)] py-[var(--spacing-xl)]\",\n          className\n        )}\n        style={{\n          backgroundColor: \"var(--canvas-background)\",\n        }}\n      >\n        {/* Title */}\n        <div className=\"flex flex-col gap-[var(--spacing-xl)]\">\n          <h2\n            style={{\n              fontFamily: \"var(--typo-h6-font, var(--typo-global-font))\",\n              fontSize: \"var(--typo-h6-size)\",\n              fontWeight: \"var(--typo-h6-weight)\",\n              lineHeight: \"var(--typo-h6-line-height)\",\n              color: \"var(--canvas-text)\",\n              margin: 0,\n            }}\n          >\n            {title}\n          </h2>\n        </div>\n\n        {/* Thread list */}\n        <div className=\"flex flex-col\">\n          {threads.map((thread, index) => (\n            <div\n              key={thread.id}\n              style={{\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n              }}\n            >\n              <MessageThreadItem\n                thread={thread}\n                onClick={() => onThreadClick?.(thread.id)}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Conversation variant\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-[var(--spacing-3xl)] py-[var(--spacing-xl)]\",\n        className\n      )}\n      style={{\n        backgroundColor: \"var(--canvas-background)\",\n      }}\n    >\n      {/* Messages section */}\n      <div className=\"flex flex-col gap-[var(--spacing-xl)]\">\n        {/* Header */}\n        <ConversationHeader\n          name={conversationName}\n          onBackClick={onBackClick}\n        />\n\n        {/* Messages list */}\n        <div className=\"flex flex-col\">\n          {messages.map((message, index) => (\n            <div\n              key={message.id}\n              style={{\n                borderTop: index === 0 ? \"1px solid var(--canvas-border)\" : \"none\",\n              }}\n            >\n              <ConversationMessage message={message} />\n            </div>\n          ))}\n        </div>\n\n        {/* Input bar */}\n        <ChatInputBar onSend={onSend} />\n      </div>\n    </div>\n  );\n}\n"
     }
   ],
   "dependencies": [
     "lucide-react"
   ],
   "registryDependencies": [
-    "avatar",
-    "utils"
+    "ui/avatar",
+    "lib/utils",
+    "blocks/demo-avatars"
   ]
 }

package/registry/blocks/chat-message.json

@@ -13,6 +13,6 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "avatar"
+    "ui/avatar"
   ]
 }

package/registry/blocks/circular-progress-bar-list.json

@@ -11,8 +11,8 @@
   ],
   "dependencies": [],
   "registryDependencies": [
-    "utils",
-    "menufocus-template",
-    "title-group"
+    "lib/utils",
+    "blocks/menufocus-template",
+    "blocks/title-group"
   ]
 }

package/registry/blocks/component-search.json

@@ -13,7 +13,7 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "utils",
-    "component-registry"
+    "lib/utils",
+    "lib/component-registry"
   ]
 }

package/registry/blocks/content-dropzone.json

@@ -11,6 +11,6 @@
   ],
   "dependencies": [],
   "registryDependencies": [
-    "utils"
+    "lib/utils"
   ]
 }

package/registry/blocks/credit-card-display.json

@@ -11,6 +11,6 @@
   ],
   "dependencies": [],
   "registryDependencies": [
-    "utils"
+    "lib/utils"
   ]
 }

package/registry/blocks/custom-component-helper.json

@@ -13,7 +13,7 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "utils",
-    "component-search"
+    "lib/utils",
+    "blocks/component-search"
   ]
 }