@better-zap/react 0.2.2 → 25.0.1

package/README.md

@@ -105,7 +105,7 @@ dependency, and Better Zap **adapters** that map domain data onto those primitiv
 | --- | --- | --- |
 | Data mapping (domain → presentation) | None — you pass `align`/`variant` directly | Own it — map `Conversation`/`UIMessage` fields (`sender`/`status`/`direction`) to presentational props |
 | Row layout | `Message`, `MessageAvatar`, `MessageContent`, `MessageHeader`, `MessageFooter` | Composed internally by `MessageBubble` / `MessageList`'s default renderer |
-| Bubble surface | `Bubble`, `BubbleContent`, `BubbleReactions` | Composed internally; still swappable via `renderMessage` (see [MessageList](#messagelist)) |
+| Bubble surface | `Bubble`, `BubbleContent`, `BubbleReactions`, `LinkPreviewCard` | Composed internally; still swappable via `renderMessage` (see [MessageList](#messagelist)) |
 | Metadata / timestamps | You render them (`MessageFooter`, etc.) | Own default formatting (`formatDate`/`formatTime`), overridable via props |
 | Actions | `ComposerButton`, `ComposerSend`, etc. — you wire callbacks | `MessageInput` gates action buttons on callbacks being provided (see [Actions and failures](#actions-and-failures)) |
 | Responsive orchestration | None | `WhatsappDashboard` owns mobile list/chat navigation; `ConversationList`/`MessageView` read it optionally |
@@ -123,7 +123,8 @@ The root entry (`@better-zap/react`) re-exports the full public surface and is a
 | `@better-zap/react` | client | Full barrel |
 | `@better-zap/react/bubble` | server-safe | Presentational bubble primitives |
 | `@better-zap/react/message` | server-safe | Row layout primitives |
-| `@better-zap/react/message-bubble` | server-safe | Domain `MessageBubble` adapter |
+| `@better-zap/react/message-bubble` | server-safe | Domain `MessageBubble` adapter (renders the client `LinkPreviewCard` when given a preview) |
+| `@better-zap/react/link-preview-card` | client | Open Graph card (hides its image if it fails to load) |
 | `@better-zap/react/utils` | server-safe | `cn`, `getDisplayDate`, `renderSlot` |
 | `@better-zap/react/composer` | client | Draft/send orchestration |
 | `@better-zap/react/message-input` | client | Domain input + freeform window |
@@ -424,6 +425,85 @@ prepends *duplicate-label* groups (accepted).
 Also available: `formatTime(iso)` for the **default** bubble timestamp only
 (custom `renderMessage` owns its own time formatting).
 
+## Link previews
+
+WhatsApp shows an Open Graph card (image, title, description, domain) at the
+top of a bubble that contains a link. You supply the preview data; the
+components only render it.
+
+- `MessageList` `resolveLinkPreview(message)` returns a `LinkPreview` (or
+  `null`/`undefined`) for each message. The default renderer shows the card,
+  and custom `renderMessage` functions receive it as `linkPreview`.
+- `MessageBubble` `linkPreview` renders the card inside the bubble, above the
+  text. The bubble takes WhatsApp's fixed 330px preview width (still capped at
+  65% of the chat). Without a preview the bubble renders exactly as before.
+- `LinkPreviewCard` is the card on its own, for `Bubble` compositions. Pass the
+  bubble's `variant` so the card gets the matching tint.
+
+```ts
+interface LinkPreview {
+  url: string;
+  title: string;
+  description?: string;
+  image?: string; // absolute http(s) URL
+  siteName?: string;
+}
+```
+
+`resolveLinkPreview` is synchronous. Fetch previews elsewhere, keep them in
+state, and pass a new resolver when they change: rows re-render when the
+function's identity changes, so wrap it in `useCallback` keyed on that state.
+`firstLinkIn` from `better-zap` picks the same link `FormattedMessage` renders
+as an anchor:
+
+```tsx
+import { useCallback } from "react";
+import { MessageList } from "@better-zap/react";
+import type { LinkPreview, UIMessage } from "@better-zap/react";
+import { firstLinkIn } from "better-zap";
+
+function ChatWithPreviews({
+  messages,
+  previews,
+}: {
+  messages: UIMessage[];
+  previews: Record<string, LinkPreview>;
+}) {
+  const resolveLinkPreview = useCallback(
+    (message: UIMessage) => {
+      const url = message.templateName ? null : firstLinkIn(message.content);
+      return url ? previews[url] : undefined;
+    },
+    [previews],
+  );
+
+  return (
+    <MessageList messages={messages} resolveLinkPreview={resolveLinkPreview} />
+  );
+}
+```
+
+In your own `Bubble` composition:
+
+```tsx
+import { Bubble, BubbleContent, LinkPreviewCard } from "@better-zap/react";
+
+<Bubble variant="primary" align="end" className="w-[330px]">
+  <BubbleContent>
+    <LinkPreviewCard preview={preview} variant="primary" />
+    {text}
+  </BubbleContent>
+</Bubble>
+```
+
+Fetching stays in your app because it needs SSRF guards, timeouts, size limits
+and caching. Do it on the server, never from the browser. `better-zap` ships
+`parseOpenGraph(html, pageUrl)` to turn the fetched page into a `LinkPreview`.
+Some sites (Amazon, for example) return full Open Graph tags only to known
+unfurler user agents such as `WhatsApp/2.23.20.0`. The
+[link previews guide](https://github.com/Dosbodoke/better-zap/blob/main/landing/content/docs/guides/link-previews.mdx) has a
+complete server fetcher and client hook.
+
 ## MessageView
 
 **MessageView** is the chat pane shell (background, empty state, header, content).
@@ -523,9 +603,5 @@ remain public — nothing described below removes an export.
 
 ### Versioning
 
-`@better-zap/react` is `0.x`; per SemVer, minor releases in this range may
-include breaking changes. This wave, however, removes **no** high-level
-export: `MessageBubble`, `MessageInput`, `MessageList`, `ConversationList`,
-`MessageView`, and `WhatsappDashboard` all remain public. The composable
-primitives (`Bubble*`, `Message*` layout parts, `Composer*`, `DateDivider`)
-are additive — they sit alongside the adapters, not in place of them.
+See the [package release policy](../../README.md#releases) and the
+[maintainer release runbook](../../.changeset/README.md).

package/dist/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("./utils-Bp9IahGG.cjs");
 const require_whatsapp_dashboard = require("./whatsapp-dashboard.cjs");
 const require_bubble = require("./bubble.cjs");
+const require_link_preview_card = require("./link-preview-card.cjs");
 const require_message = require("./message.cjs");
 const require_message_bubble = require("./message-bubble.cjs");
 const require_message_view = require("./message-view.cjs");
@@ -24,6 +25,7 @@ exports.ConversationList = require_conversation_list.ConversationList;
 exports.DateDivider = require_message_view.DateDivider;
 exports.FormattedMessage = require_message_bubble.FormattedMessage;
 exports.FreeformWindowClosedError = require_message_input.FreeformWindowClosedError;
+exports.LinkPreviewCard = require_link_preview_card.LinkPreviewCard;
 exports.Message = require_message.Message;
 exports.MessageAvatar = require_message.MessageAvatar;
 exports.MessageBubble = require_message_bubble.MessageBubble;

package/dist/index.d.cts

@@ -4,10 +4,11 @@ import { a as ConversationListProps, c as ConversationFilterValue, i as Conversa
 import { MobileView, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, useOptionalWhatsappDashboard, useWhatsappDashboard } from "./whatsapp-dashboard.cjs";
 import { DateDivider, DateDividerRenderContext, MessageGroupPosition, MessageList, MessageListProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps } from "./message-view.cjs";
 import { FormattedMessage, MessageBubble, MessageBubbleGroupPosition, MessageBubbleProps } from "./message-bubble.cjs";
+import { LinkPreviewCard, LinkPreviewCardProps } from "./link-preview-card.cjs";
 import { Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageProps } from "./message.cjs";
 import { cn, getDisplayDate, renderSlot } from "./utils.cjs";
 import { FreeformWindowClosedError, MessageInput, MessageInputLabels, MessageInputProps } from "./message-input.cjs";
-import { Conversation, Conversation as Conversation$1, ConversationRecord, FreeformMessageWindow, FreeformMessageWindow as FreeformMessageWindow$1, UIMessage, UIMessage as UIMessage$1, UIMessageStatus } from "better-zap";
+import { Conversation, Conversation as Conversation$1, ConversationRecord, FreeformMessageWindow, FreeformMessageWindow as FreeformMessageWindow$1, LinkPreview, UIMessage, UIMessage as UIMessage$1, UIMessageStatus } from "better-zap";
 
 //#region src/use-freeform-message-window.d.ts
 interface UseFreeformMessageWindowResult extends FreeformMessageWindow$1 {
@@ -16,4 +17,4 @@ interface UseFreeformMessageWindowResult extends FreeformMessageWindow$1 {
 }
 declare function useFreeformMessageWindow(conversation?: Pick<Conversation$1, "freeformMessageWindow" | "lastIncomingMessageAt"> | null, messages?: UIMessage$1[]): UseFreeformMessageWindowResult;
 //#endregion
-export { Bubble, BubbleAlign, BubbleContent, BubbleContentProps, BubbleGroup, BubbleGroupProps, BubbleProps, BubbleReactions, BubbleReactionsProps, BubbleVariant, Composer, ComposerButton, ComposerButtonProps, ComposerContextValue, ComposerError, ComposerErrorProps, ComposerProps, ComposerSend, ComposerSendProps, ComposerStateContextValue, ComposerTextarea, ComposerTextareaProps, type Conversation, ConversationFilterChips, ConversationFilterChipsProps, ConversationFilterValue, ConversationItem, ConversationItemProps, ConversationList, ConversationListLabels, ConversationListProps, type ConversationRecord, DateDivider, DateDividerRenderContext, FormattedMessage, type FreeformMessageWindow, FreeformWindowClosedError, Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageBubble, MessageBubbleGroupPosition, MessageBubbleProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupPosition, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageInput, MessageInputLabels, MessageInputProps, MessageList, MessageListProps, MessageProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps, MobileView, type UIMessage, type UIMessageStatus, UseFreeformMessageWindowResult, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, cn, getDisplayDate, renderSlot, useComposer, useComposerState, useComposerValue, useFreeformMessageWindow, useOptionalWhatsappDashboard, useWhatsappDashboard };
+export { Bubble, BubbleAlign, BubbleContent, BubbleContentProps, BubbleGroup, BubbleGroupProps, BubbleProps, BubbleReactions, BubbleReactionsProps, BubbleVariant, Composer, ComposerButton, ComposerButtonProps, ComposerContextValue, ComposerError, ComposerErrorProps, ComposerProps, ComposerSend, ComposerSendProps, ComposerStateContextValue, ComposerTextarea, ComposerTextareaProps, type Conversation, ConversationFilterChips, ConversationFilterChipsProps, ConversationFilterValue, ConversationItem, ConversationItemProps, ConversationList, ConversationListLabels, ConversationListProps, type ConversationRecord, DateDivider, DateDividerRenderContext, FormattedMessage, type FreeformMessageWindow, FreeformWindowClosedError, type LinkPreview, LinkPreviewCard, LinkPreviewCardProps, Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageBubble, MessageBubbleGroupPosition, MessageBubbleProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupPosition, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageInput, MessageInputLabels, MessageInputProps, MessageList, MessageListProps, MessageProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps, MobileView, type UIMessage, type UIMessageStatus, UseFreeformMessageWindowResult, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, cn, getDisplayDate, renderSlot, useComposer, useComposerState, useComposerValue, useFreeformMessageWindow, useOptionalWhatsappDashboard, useWhatsappDashboard };

package/dist/index.d.mts

@@ -4,10 +4,11 @@ import { a as ConversationListProps, c as ConversationFilterValue, i as Conversa
 import { MobileView, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, useOptionalWhatsappDashboard, useWhatsappDashboard } from "./whatsapp-dashboard.mjs";
 import { DateDivider, DateDividerRenderContext, MessageGroupPosition, MessageList, MessageListProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps } from "./message-view.mjs";
 import { FormattedMessage, MessageBubble, MessageBubbleGroupPosition, MessageBubbleProps } from "./message-bubble.mjs";
+import { LinkPreviewCard, LinkPreviewCardProps } from "./link-preview-card.mjs";
 import { Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageProps } from "./message.mjs";
 import { cn, getDisplayDate, renderSlot } from "./utils.mjs";
 import { FreeformWindowClosedError, MessageInput, MessageInputLabels, MessageInputProps } from "./message-input.mjs";
-import { Conversation, Conversation as Conversation$1, ConversationRecord, FreeformMessageWindow, FreeformMessageWindow as FreeformMessageWindow$1, UIMessage, UIMessage as UIMessage$1, UIMessageStatus } from "better-zap";
+import { Conversation, Conversation as Conversation$1, ConversationRecord, FreeformMessageWindow, FreeformMessageWindow as FreeformMessageWindow$1, LinkPreview, UIMessage, UIMessage as UIMessage$1, UIMessageStatus } from "better-zap";
 
 //#region src/use-freeform-message-window.d.ts
 interface UseFreeformMessageWindowResult extends FreeformMessageWindow$1 {
@@ -16,4 +17,4 @@ interface UseFreeformMessageWindowResult extends FreeformMessageWindow$1 {
 }
 declare function useFreeformMessageWindow(conversation?: Pick<Conversation$1, "freeformMessageWindow" | "lastIncomingMessageAt"> | null, messages?: UIMessage$1[]): UseFreeformMessageWindowResult;
 //#endregion
-export { Bubble, BubbleAlign, BubbleContent, BubbleContentProps, BubbleGroup, BubbleGroupProps, BubbleProps, BubbleReactions, BubbleReactionsProps, BubbleVariant, Composer, ComposerButton, ComposerButtonProps, ComposerContextValue, ComposerError, ComposerErrorProps, ComposerProps, ComposerSend, ComposerSendProps, ComposerStateContextValue, ComposerTextarea, ComposerTextareaProps, type Conversation, ConversationFilterChips, ConversationFilterChipsProps, ConversationFilterValue, ConversationItem, ConversationItemProps, ConversationList, ConversationListLabels, ConversationListProps, type ConversationRecord, DateDivider, DateDividerRenderContext, FormattedMessage, type FreeformMessageWindow, FreeformWindowClosedError, Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageBubble, MessageBubbleGroupPosition, MessageBubbleProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupPosition, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageInput, MessageInputLabels, MessageInputProps, MessageList, MessageListProps, MessageProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps, MobileView, type UIMessage, type UIMessageStatus, UseFreeformMessageWindowResult, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, cn, getDisplayDate, renderSlot, useComposer, useComposerState, useComposerValue, useFreeformMessageWindow, useOptionalWhatsappDashboard, useWhatsappDashboard };
+export { Bubble, BubbleAlign, BubbleContent, BubbleContentProps, BubbleGroup, BubbleGroupProps, BubbleProps, BubbleReactions, BubbleReactionsProps, BubbleVariant, Composer, ComposerButton, ComposerButtonProps, ComposerContextValue, ComposerError, ComposerErrorProps, ComposerProps, ComposerSend, ComposerSendProps, ComposerStateContextValue, ComposerTextarea, ComposerTextareaProps, type Conversation, ConversationFilterChips, ConversationFilterChipsProps, ConversationFilterValue, ConversationItem, ConversationItemProps, ConversationList, ConversationListLabels, ConversationListProps, type ConversationRecord, DateDivider, DateDividerRenderContext, FormattedMessage, type FreeformMessageWindow, FreeformWindowClosedError, type LinkPreview, LinkPreviewCard, LinkPreviewCardProps, Message, MessageAlign, MessageAvatar, MessageAvatarProps, MessageBubble, MessageBubbleGroupPosition, MessageBubbleProps, MessageContent, MessageContentProps, MessageFooter, MessageFooterProps, MessageGroup, MessageGroupPosition, MessageGroupProps, MessageHeader, MessageHeaderProps, MessageInput, MessageInputLabels, MessageInputProps, MessageList, MessageListProps, MessageProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps, MobileView, type UIMessage, type UIMessageStatus, UseFreeformMessageWindowResult, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, cn, getDisplayDate, renderSlot, useComposer, useComposerState, useComposerValue, useFreeformMessageWindow, useOptionalWhatsappDashboard, useWhatsappDashboard };

package/dist/index.mjs

@@ -2,10 +2,11 @@
 import { cn, getDisplayDate, renderSlot } from "./utils.mjs";
 import { WhatsappDashboard, useOptionalWhatsappDashboard, useWhatsappDashboard } from "./whatsapp-dashboard.mjs";
 import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./bubble.mjs";
+import { LinkPreviewCard } from "./link-preview-card.mjs";
 import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from "./message.mjs";
 import { FormattedMessage, MessageBubble } from "./message-bubble.mjs";
 import { DateDivider, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader } from "./message-view.mjs";
 import { n as ConversationList, r as ConversationFilterChips, t as ConversationItem } from "./conversation-list-C0EmReS-.mjs";
 import { Composer, ComposerButton, ComposerError, ComposerSend, ComposerTextarea, useComposer, useComposerState, useComposerValue } from "./composer.mjs";
 import { n as MessageInput, r as useFreeformMessageWindow, t as FreeformWindowClosedError } from "./message-input-CkaL6fb4.mjs";
-export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, Composer, ComposerButton, ComposerError, ComposerSend, ComposerTextarea, ConversationFilterChips, ConversationItem, ConversationList, DateDivider, FormattedMessage, FreeformWindowClosedError, Message, MessageAvatar, MessageBubble, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, WhatsappDashboard, cn, getDisplayDate, renderSlot, useComposer, useComposerState, useComposerValue, useFreeformMessageWindow, useOptionalWhatsappDashboard, useWhatsappDashboard };
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, Composer, ComposerButton, ComposerError, ComposerSend, ComposerTextarea, ConversationFilterChips, ConversationItem, ConversationList, DateDivider, FormattedMessage, FreeformWindowClosedError, LinkPreviewCard, Message, MessageAvatar, MessageBubble, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, WhatsappDashboard, cn, getDisplayDate, renderSlot, useComposer, useComposerState, useComposerValue, useFreeformMessageWindow, useOptionalWhatsappDashboard, useWhatsappDashboard };

package/dist/link-preview-card.cjs

@@ -0,0 +1,76 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/link-preview-card.tsx
+const tintByVariant = {
+	default: "bg-[#f0f2f5]",
+	primary: "bg-[#d1f4cc]",
+	destructive: "bg-[#f8cdc9]",
+	outline: "bg-black/5",
+	muted: "bg-black/5"
+};
+/**
+* WhatsApp-style Open Graph card: image, two-line title, two-line description
+* and the link's domain. Render it inside `BubbleContent`, above the text.
+* The image is hidden if it fails to load.
+*/
+function LinkPreviewCard({ preview, variant = "default", className, ...props }) {
+	const [failedImage, setFailedImage] = (0, react.useState)(null);
+	const image = preview.image && preview.image !== failedImage ? preview.image : null;
+	const domain = displayDomain(preview);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		href: httpUrlOrUndefined(preview.url),
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"data-slot": "link-preview",
+		className: require_utils.cn("-mx-[5px] -mt-[2px] mb-1.5 block overflow-hidden rounded-[6px] whitespace-normal no-underline focus-visible:outline-2 focus-visible:outline-offset-2", tintByVariant[variant], className),
+		...props,
+		children: [image && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: image,
+			alt: "",
+			loading: "lazy",
+			decoding: "async",
+			referrerPolicy: "no-referrer",
+			className: "block max-h-[180px] w-full bg-white object-cover",
+			onError: () => setFailedImage(image),
+			ref: (element) => {
+				if (element?.complete && element.naturalWidth === 0) setFailedImage(image);
+			}
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "block px-2.5 py-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "line-clamp-2 text-[13.5px] font-medium leading-[18px] text-[#111b21]",
+					children: preview.title
+				}),
+				preview.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "mt-0.5 line-clamp-2 text-[12.5px] leading-[17px] text-[#667781]",
+					children: preview.description
+				}),
+				domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "mt-1 block truncate text-[12px] leading-4 text-[#8696a0]",
+					children: domain
+				})
+			]
+		})]
+	});
+}
+function parseUrl(value) {
+	try {
+		return new URL(value);
+	} catch {
+		return null;
+	}
+}
+function httpUrlOrUndefined(value) {
+	const url = parseUrl(value);
+	return url && (url.protocol === "http:" || url.protocol === "https:") ? value : void 0;
+}
+function displayDomain(preview) {
+	const hostname = parseUrl(preview.url)?.hostname;
+	return hostname ? hostname.replace(/^www\./i, "") : preview.siteName;
+}
+//#endregion
+exports.LinkPreviewCard = LinkPreviewCard;

package/dist/link-preview-card.d.cts

@@ -0,0 +1,26 @@
+import { BubbleVariant } from "./bubble.cjs";
+import React from "react";
+import { LinkPreview, LinkPreview as LinkPreview$1 } from "better-zap";
+
+//#region src/link-preview-card.d.ts
+interface LinkPreviewCardProps extends Omit<React.ComponentProps<"a">, "children"> {
+  preview: LinkPreview$1;
+  /**
+   * Variant of the surrounding `Bubble`, so the card gets the matching tint.
+   * @default "default"
+   */
+  variant?: BubbleVariant;
+}
+/**
+ * WhatsApp-style Open Graph card: image, two-line title, two-line description
+ * and the link's domain. Render it inside `BubbleContent`, above the text.
+ * The image is hidden if it fails to load.
+ */
+declare function LinkPreviewCard({
+  preview,
+  variant,
+  className,
+  ...props
+}: LinkPreviewCardProps): React.JSX.Element;
+//#endregion
+export { type LinkPreview, LinkPreviewCard, LinkPreviewCardProps };

package/dist/link-preview-card.d.mts

@@ -0,0 +1,26 @@
+import { BubbleVariant } from "./bubble.mjs";
+import React from "react";
+import { LinkPreview, LinkPreview as LinkPreview$1 } from "better-zap";
+
+//#region src/link-preview-card.d.ts
+interface LinkPreviewCardProps extends Omit<React.ComponentProps<"a">, "children"> {
+  preview: LinkPreview$1;
+  /**
+   * Variant of the surrounding `Bubble`, so the card gets the matching tint.
+   * @default "default"
+   */
+  variant?: BubbleVariant;
+}
+/**
+ * WhatsApp-style Open Graph card: image, two-line title, two-line description
+ * and the link's domain. Render it inside `BubbleContent`, above the text.
+ * The image is hidden if it fails to load.
+ */
+declare function LinkPreviewCard({
+  preview,
+  variant,
+  className,
+  ...props
+}: LinkPreviewCardProps): React.JSX.Element;
+//#endregion
+export { type LinkPreview, LinkPreviewCard, LinkPreviewCardProps };

package/dist/link-preview-card.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/link-preview-card.tsx
+const tintByVariant = {
+	default: "bg-[#f0f2f5]",
+	primary: "bg-[#d1f4cc]",
+	destructive: "bg-[#f8cdc9]",
+	outline: "bg-black/5",
+	muted: "bg-black/5"
+};
+/**
+* WhatsApp-style Open Graph card: image, two-line title, two-line description
+* and the link's domain. Render it inside `BubbleContent`, above the text.
+* The image is hidden if it fails to load.
+*/
+function LinkPreviewCard({ preview, variant = "default", className, ...props }) {
+	const [failedImage, setFailedImage] = useState(null);
+	const image = preview.image && preview.image !== failedImage ? preview.image : null;
+	const domain = displayDomain(preview);
+	return /* @__PURE__ */ jsxs("a", {
+		href: httpUrlOrUndefined(preview.url),
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"data-slot": "link-preview",
+		className: cn("-mx-[5px] -mt-[2px] mb-1.5 block overflow-hidden rounded-[6px] whitespace-normal no-underline focus-visible:outline-2 focus-visible:outline-offset-2", tintByVariant[variant], className),
+		...props,
+		children: [image && /* @__PURE__ */ jsx("img", {
+			src: image,
+			alt: "",
+			loading: "lazy",
+			decoding: "async",
+			referrerPolicy: "no-referrer",
+			className: "block max-h-[180px] w-full bg-white object-cover",
+			onError: () => setFailedImage(image),
+			ref: (element) => {
+				if (element?.complete && element.naturalWidth === 0) setFailedImage(image);
+			}
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "block px-2.5 py-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "line-clamp-2 text-[13.5px] font-medium leading-[18px] text-[#111b21]",
+					children: preview.title
+				}),
+				preview.description && /* @__PURE__ */ jsx("span", {
+					className: "mt-0.5 line-clamp-2 text-[12.5px] leading-[17px] text-[#667781]",
+					children: preview.description
+				}),
+				domain && /* @__PURE__ */ jsx("span", {
+					className: "mt-1 block truncate text-[12px] leading-4 text-[#8696a0]",
+					children: domain
+				})
+			]
+		})]
+	});
+}
+function parseUrl(value) {
+	try {
+		return new URL(value);
+	} catch {
+		return null;
+	}
+}
+function httpUrlOrUndefined(value) {
+	const url = parseUrl(value);
+	return url && (url.protocol === "http:" || url.protocol === "https:") ? value : void 0;
+}
+function displayDomain(preview) {
+	const hostname = parseUrl(preview.url)?.hostname;
+	return hostname ? hostname.replace(/^www\./i, "") : preview.siteName;
+}
+//#endregion
+export { LinkPreviewCard };

package/dist/message-bubble.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("./utils-Bp9IahGG.cjs");
 const require_bubble = require("./bubble.cjs");
+const require_link_preview_card = require("./link-preview-card.cjs");
 const require_message = require("./message.cjs");
 let react = require("react");
 react = require_utils.__toESM(react);
@@ -16,7 +17,7 @@ const statusVariants = (0, require("class-variance-authority").cva)("flex items-
 	} },
 	defaultVariants: { variant: "default" }
 });
-function MessageBubble({ content, sender, timestamp, status, templateName, label, groupPosition = "single", className, ...props }) {
+function MessageBubble({ content, sender, timestamp, status, templateName, label, groupPosition = "single", linkPreview, className, ...props }) {
 	const isIncoming = sender === "user";
 	const isFailed = status === "failed";
 	const align = sender === "user" ? "start" : "end";
@@ -34,6 +35,7 @@ function MessageBubble({ content, sender, timestamp, status, templateName, label
 			variant,
 			align,
 			tail: hasTail,
+			className: linkPreview ? "w-[330px]" : void 0,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_bubble.BubbleContent, { children: [
 				label && !isIncoming && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "mb-1 block text-xs font-medium opacity-70",
@@ -49,6 +51,10 @@ function MessageBubble({ content, sender, timestamp, status, templateName, label
 						}), templateName]
 					})
 				}),
+				linkPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_link_preview_card.LinkPreviewCard, {
+					preview: linkPreview,
+					variant
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormattedMessage, { text: displayContent }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "float-right -mb-1 ml-2 mt-1.5 flex items-center justify-end gap-1 shrink-0 h-[15px] select-none",

package/dist/message-bubble.d.cts

@@ -1,6 +1,6 @@
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { UIMessageStatus } from "better-zap";
+import { LinkPreview, UIMessageStatus } from "better-zap";
 
 //#region src/message-bubble.d.ts
 type MessageBubbleGroupPosition = "single" | "first" | "middle" | "last";
@@ -17,6 +17,11 @@ interface MessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
    * WhatsApp's grouping. @default "single"
    */
   groupPosition?: MessageBubbleGroupPosition;
+  /**
+   * Open Graph card shown inside the bubble, above the text. The bubble takes
+   * WhatsApp's fixed preview width while a card is shown.
+   */
+  linkPreview?: LinkPreview | null;
 }
 declare function MessageBubble({
   content,
@@ -26,6 +31,7 @@ declare function MessageBubble({
   templateName,
   label,
   groupPosition,
+  linkPreview,
   className,
   ...props
 }: MessageBubbleProps): react_jsx_runtime0.JSX.Element;

package/dist/message-bubble.d.mts

@@ -1,6 +1,6 @@
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { UIMessageStatus } from "better-zap";
+import { LinkPreview, UIMessageStatus } from "better-zap";
 
 //#region src/message-bubble.d.ts
 type MessageBubbleGroupPosition = "single" | "first" | "middle" | "last";
@@ -17,6 +17,11 @@ interface MessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
    * WhatsApp's grouping. @default "single"
    */
   groupPosition?: MessageBubbleGroupPosition;
+  /**
+   * Open Graph card shown inside the bubble, above the text. The bubble takes
+   * WhatsApp's fixed preview width while a card is shown.
+   */
+  linkPreview?: LinkPreview | null;
 }
 declare function MessageBubble({
   content,
@@ -26,6 +31,7 @@ declare function MessageBubble({
   templateName,
   label,
   groupPosition,
+  linkPreview,
   className,
   ...props
 }: MessageBubbleProps): react_jsx_runtime0.JSX.Element;

package/dist/message-bubble.mjs

@@ -1,5 +1,6 @@
 import { cn } from "./utils.mjs";
 import { Bubble, BubbleContent } from "./bubble.mjs";
+import { LinkPreviewCard } from "./link-preview-card.mjs";
 import { Message, MessageContent } from "./message.mjs";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +16,7 @@ const statusVariants = cva("flex items-center leading-none", {
 	} },
 	defaultVariants: { variant: "default" }
 });
-function MessageBubble({ content, sender, timestamp, status, templateName, label, groupPosition = "single", className, ...props }) {
+function MessageBubble({ content, sender, timestamp, status, templateName, label, groupPosition = "single", linkPreview, className, ...props }) {
 	const isIncoming = sender === "user";
 	const isFailed = status === "failed";
 	const align = sender === "user" ? "start" : "end";
@@ -33,6 +34,7 @@ function MessageBubble({ content, sender, timestamp, status, templateName, label
 			variant,
 			align,
 			tail: hasTail,
+			className: linkPreview ? "w-[330px]" : void 0,
 			children: /* @__PURE__ */ jsxs(BubbleContent, { children: [
 				label && !isIncoming && /* @__PURE__ */ jsx("span", {
 					className: "mb-1 block text-xs font-medium opacity-70",
@@ -48,6 +50,10 @@ function MessageBubble({ content, sender, timestamp, status, templateName, label
 						}), templateName]
 					})
 				}),
+				linkPreview && /* @__PURE__ */ jsx(LinkPreviewCard, {
+					preview: linkPreview,
+					variant
+				}),
 				/* @__PURE__ */ jsx(FormattedMessage, { text: displayContent }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "float-right -mb-1 ml-2 mt-1.5 flex items-center justify-end gap-1 shrink-0 h-[15px] select-none",

package/dist/message-view.cjs

@@ -116,8 +116,19 @@ function MessageViewContent({ children, autoScroll = true, onScrollTop, classNam
 		})
 	});
 }
-const MemoizedMessageBubble = react.default.memo(require_message_bubble.MessageBubble);
+const MemoizedMessageBubble = react.default.memo(require_message_bubble.MessageBubble, areMessageBubblePropsEqual);
 const MemoizedDateDivider = react.default.memo(DateDivider);
+function areMessageBubblePropsEqual(prev, next) {
+	const { linkPreview: prevPreview, ...prevRest } = prev;
+	const { linkPreview: nextPreview, ...nextRest } = next;
+	return (prevPreview && nextPreview ? shallowEqual(prevPreview, nextPreview) : !prevPreview && !nextPreview) && shallowEqual(prevRest, nextRest);
+}
+function shallowEqual(a, b) {
+	const left = a;
+	const right = b;
+	const keys = Object.keys(left);
+	return keys.length === Object.keys(right).length && keys.every((key) => Object.is(left[key], right[key]));
+}
 function defaultFormatTime(isoDate) {
 	return new Date(isoDate).toLocaleTimeString("pt-BR", {
 		hour: "2-digit",
@@ -136,7 +147,7 @@ function getGroupPosition(messages, index, resolveFormatDate) {
 	if (prevSame && nextSame) return "middle";
 	return "last";
 }
-function MessageList({ messages, renderMessage, renderDateDivider, formatDate, formatTime, renderMessageLabel, autoScroll: autoScrollProp, onScrollTop: onScrollTopProp, className }) {
+function MessageList({ messages, renderMessage, renderDateDivider, formatDate, formatTime, renderMessageLabel, resolveLinkPreview, autoScroll: autoScrollProp, onScrollTop: onScrollTopProp, className }) {
 	const scrollContext = (0, react.useContext)(MessageViewScrollContext);
 	const resolvedAutoScroll = autoScrollProp ?? scrollContext?.autoScroll ?? true;
 	const resolvedOnScrollTop = onScrollTopProp ?? scrollContext?.onScrollTop;
@@ -180,6 +191,7 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 		contentContainerStyle: { paddingBottom: 16 },
 		data: items,
 		estimatedItemSize: 72,
+		extraData: resolveLinkPreview,
 		getItemType: (item) => item.type,
 		initialScrollAtEnd: resolvedAutoScroll,
 		keyExtractor: (item) => item.id,
@@ -195,6 +207,7 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 			}) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedDateDivider, { children: item.label });
 			const { message, groupPosition } = item;
 			const label = renderMessageLabel?.(message);
+			const linkPreview = resolveLinkPreview?.(message) ?? void 0;
 			const direction = message.direction;
 			const align = direction === "incoming" ? "start" : "end";
 			const ctx = {
@@ -203,7 +216,8 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 				direction,
 				align,
 				groupPosition,
-				label
+				label,
+				linkPreview
 			};
 			return renderMessage?.(ctx) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedMessageBubble, {
 				content: message.content || "",
@@ -212,7 +226,8 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 				status: message.status,
 				templateName: message.templateName || void 0,
 				label,
-				groupPosition
+				groupPosition,
+				linkPreview
 			});
 		},
 		stickyHeaderIndices,

package/dist/message-view.d.cts

@@ -1,6 +1,6 @@
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { Conversation, UIMessage } from "better-zap";
+import { Conversation, LinkPreview, UIMessage } from "better-zap";
 
 //#region src/message-view.d.ts
 interface MessageViewProps extends React.ComponentProps<"div"> {
@@ -63,6 +63,8 @@ interface MessageRenderContext {
   groupPosition: MessageGroupPosition;
   /** Result of renderMessageLabel, when provided. */
   label?: string;
+  /** Result of resolveLinkPreview, when it returned a preview. */
+  linkPreview?: LinkPreview;
 }
 interface DateDividerRenderContext {
   /** Formatted label (output of formatDate / getDisplayDate). */
@@ -79,6 +81,13 @@ interface MessageListProps {
   /** Formats the in-bubble timestamp used by the DEFAULT renderer. Default: pt-BR HH:mm. */
   formatTime?: (isoDate: string) => string;
   renderMessageLabel?: (message: UIMessage) => string | undefined;
+  /**
+   * Returns the Open Graph card for a message, shown by the default renderer
+   * and passed to `renderMessage` as `linkPreview`. Must be synchronous: keep
+   * fetched previews in state and pass a new function (e.g. from
+   * `useCallback`) when they change; rows re-render when its identity changes.
+   */
+  resolveLinkPreview?: (message: UIMessage) => LinkPreview | null | undefined;
   /** Direct props — context from MessageViewContent still works; these win over it. */
   autoScroll?: boolean;
   onScrollTop?: () => void;
@@ -91,6 +100,7 @@ declare function MessageList({
   formatDate,
   formatTime,
   renderMessageLabel,
+  resolveLinkPreview,
   autoScroll: autoScrollProp,
   onScrollTop: onScrollTopProp,
   className

package/dist/message-view.d.mts

@@ -1,6 +1,6 @@
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { Conversation, UIMessage } from "better-zap";
+import { Conversation, LinkPreview, UIMessage } from "better-zap";
 
 //#region src/message-view.d.ts
 interface MessageViewProps extends React.ComponentProps<"div"> {
@@ -63,6 +63,8 @@ interface MessageRenderContext {
   groupPosition: MessageGroupPosition;
   /** Result of renderMessageLabel, when provided. */
   label?: string;
+  /** Result of resolveLinkPreview, when it returned a preview. */
+  linkPreview?: LinkPreview;
 }
 interface DateDividerRenderContext {
   /** Formatted label (output of formatDate / getDisplayDate). */
@@ -79,6 +81,13 @@ interface MessageListProps {
   /** Formats the in-bubble timestamp used by the DEFAULT renderer. Default: pt-BR HH:mm. */
   formatTime?: (isoDate: string) => string;
   renderMessageLabel?: (message: UIMessage) => string | undefined;
+  /**
+   * Returns the Open Graph card for a message, shown by the default renderer
+   * and passed to `renderMessage` as `linkPreview`. Must be synchronous: keep
+   * fetched previews in state and pass a new function (e.g. from
+   * `useCallback`) when they change; rows re-render when its identity changes.
+   */
+  resolveLinkPreview?: (message: UIMessage) => LinkPreview | null | undefined;
   /** Direct props — context from MessageViewContent still works; these win over it. */
   autoScroll?: boolean;
   onScrollTop?: () => void;
@@ -91,6 +100,7 @@ declare function MessageList({
   formatDate,
   formatTime,
   renderMessageLabel,
+  resolveLinkPreview,
   autoScroll: autoScrollProp,
   onScrollTop: onScrollTopProp,
   className

package/dist/message-view.mjs

@@ -114,8 +114,19 @@ function MessageViewContent({ children, autoScroll = true, onScrollTop, classNam
 		})
 	});
 }
-const MemoizedMessageBubble = React.memo(MessageBubble);
+const MemoizedMessageBubble = React.memo(MessageBubble, areMessageBubblePropsEqual);
 const MemoizedDateDivider = React.memo(DateDivider);
+function areMessageBubblePropsEqual(prev, next) {
+	const { linkPreview: prevPreview, ...prevRest } = prev;
+	const { linkPreview: nextPreview, ...nextRest } = next;
+	return (prevPreview && nextPreview ? shallowEqual(prevPreview, nextPreview) : !prevPreview && !nextPreview) && shallowEqual(prevRest, nextRest);
+}
+function shallowEqual(a, b) {
+	const left = a;
+	const right = b;
+	const keys = Object.keys(left);
+	return keys.length === Object.keys(right).length && keys.every((key) => Object.is(left[key], right[key]));
+}
 function defaultFormatTime(isoDate) {
 	return new Date(isoDate).toLocaleTimeString("pt-BR", {
 		hour: "2-digit",
@@ -134,7 +145,7 @@ function getGroupPosition(messages, index, resolveFormatDate) {
 	if (prevSame && nextSame) return "middle";
 	return "last";
 }
-function MessageList({ messages, renderMessage, renderDateDivider, formatDate, formatTime, renderMessageLabel, autoScroll: autoScrollProp, onScrollTop: onScrollTopProp, className }) {
+function MessageList({ messages, renderMessage, renderDateDivider, formatDate, formatTime, renderMessageLabel, resolveLinkPreview, autoScroll: autoScrollProp, onScrollTop: onScrollTopProp, className }) {
 	const scrollContext = useContext(MessageViewScrollContext);
 	const resolvedAutoScroll = autoScrollProp ?? scrollContext?.autoScroll ?? true;
 	const resolvedOnScrollTop = onScrollTopProp ?? scrollContext?.onScrollTop;
@@ -178,6 +189,7 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 		contentContainerStyle: { paddingBottom: 16 },
 		data: items,
 		estimatedItemSize: 72,
+		extraData: resolveLinkPreview,
 		getItemType: (item) => item.type,
 		initialScrollAtEnd: resolvedAutoScroll,
 		keyExtractor: (item) => item.id,
@@ -193,6 +205,7 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 			}) ?? /* @__PURE__ */ jsx(MemoizedDateDivider, { children: item.label });
 			const { message, groupPosition } = item;
 			const label = renderMessageLabel?.(message);
+			const linkPreview = resolveLinkPreview?.(message) ?? void 0;
 			const direction = message.direction;
 			const align = direction === "incoming" ? "start" : "end";
 			const ctx = {
@@ -201,7 +214,8 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 				direction,
 				align,
 				groupPosition,
-				label
+				label,
+				linkPreview
 			};
 			return renderMessage?.(ctx) ?? /* @__PURE__ */ jsx(MemoizedMessageBubble, {
 				content: message.content || "",
@@ -210,7 +224,8 @@ function MessageList({ messages, renderMessage, renderDateDivider, formatDate, f
 				status: message.status,
 				templateName: message.templateName || void 0,
 				label,
-				groupPosition
+				groupPosition,
+				linkPreview
 			});
 		},
 		stickyHeaderIndices,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@better-zap/react",
-  "version": "0.2.2",
+  "version": "25.0.1",
   "description": "React components for Better Zap.",
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Dosbodoke/better-zap",
+    "url": "git+https://github.com/Dosbodoke/better-zap.git",
     "directory": "packages/react"
   },
   "type": "module",
@@ -19,54 +19,114 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./bubble": {
-      "types": "./dist/bubble.d.mts",
-      "import": "./dist/bubble.mjs",
-      "require": "./dist/bubble.cjs"
+      "import": {
+        "types": "./dist/bubble.d.mts",
+        "default": "./dist/bubble.mjs"
+      },
+      "require": {
+        "types": "./dist/bubble.d.cts",
+        "default": "./dist/bubble.cjs"
+      }
     },
     "./message": {
-      "types": "./dist/message.d.mts",
-      "import": "./dist/message.mjs",
-      "require": "./dist/message.cjs"
+      "import": {
+        "types": "./dist/message.d.mts",
+        "default": "./dist/message.mjs"
+      },
+      "require": {
+        "types": "./dist/message.d.cts",
+        "default": "./dist/message.cjs"
+      }
     },
     "./message-bubble": {
-      "types": "./dist/message-bubble.d.mts",
-      "import": "./dist/message-bubble.mjs",
-      "require": "./dist/message-bubble.cjs"
+      "import": {
+        "types": "./dist/message-bubble.d.mts",
+        "default": "./dist/message-bubble.mjs"
+      },
+      "require": {
+        "types": "./dist/message-bubble.d.cts",
+        "default": "./dist/message-bubble.cjs"
+      }
+    },
+    "./link-preview-card": {
+      "import": {
+        "types": "./dist/link-preview-card.d.mts",
+        "default": "./dist/link-preview-card.mjs"
+      },
+      "require": {
+        "types": "./dist/link-preview-card.d.cts",
+        "default": "./dist/link-preview-card.cjs"
+      }
     },
     "./composer": {
-      "types": "./dist/composer.d.mts",
-      "import": "./dist/composer.mjs",
-      "require": "./dist/composer.cjs"
+      "import": {
+        "types": "./dist/composer.d.mts",
+        "default": "./dist/composer.mjs"
+      },
+      "require": {
+        "types": "./dist/composer.d.cts",
+        "default": "./dist/composer.cjs"
+      }
     },
     "./message-input": {
-      "types": "./dist/message-input.d.mts",
-      "import": "./dist/message-input.mjs",
-      "require": "./dist/message-input.cjs"
+      "import": {
+        "types": "./dist/message-input.d.mts",
+        "default": "./dist/message-input.mjs"
+      },
+      "require": {
+        "types": "./dist/message-input.d.cts",
+        "default": "./dist/message-input.cjs"
+      }
     },
     "./message-view": {
-      "types": "./dist/message-view.d.mts",
-      "import": "./dist/message-view.mjs",
-      "require": "./dist/message-view.cjs"
+      "import": {
+        "types": "./dist/message-view.d.mts",
+        "default": "./dist/message-view.mjs"
+      },
+      "require": {
+        "types": "./dist/message-view.d.cts",
+        "default": "./dist/message-view.cjs"
+      }
     },
     "./conversation-list": {
-      "types": "./dist/conversation-list.d.mts",
-      "import": "./dist/conversation-list.mjs",
-      "require": "./dist/conversation-list.cjs"
+      "import": {
+        "types": "./dist/conversation-list.d.mts",
+        "default": "./dist/conversation-list.mjs"
+      },
+      "require": {
+        "types": "./dist/conversation-list.d.cts",
+        "default": "./dist/conversation-list.cjs"
+      }
     },
     "./whatsapp-dashboard": {
-      "types": "./dist/whatsapp-dashboard.d.mts",
-      "import": "./dist/whatsapp-dashboard.mjs",
-      "require": "./dist/whatsapp-dashboard.cjs"
+      "import": {
+        "types": "./dist/whatsapp-dashboard.d.mts",
+        "default": "./dist/whatsapp-dashboard.mjs"
+      },
+      "require": {
+        "types": "./dist/whatsapp-dashboard.d.cts",
+        "default": "./dist/whatsapp-dashboard.cjs"
+      }
     },
     "./utils": {
-      "types": "./dist/utils.d.mts",
-      "import": "./dist/utils.mjs",
-      "require": "./dist/utils.cjs"
+      "import": {
+        "types": "./dist/utils.d.mts",
+        "default": "./dist/utils.mjs"
+      },
+      "require": {
+        "types": "./dist/utils.d.cts",
+        "default": "./dist/utils.cjs"
+      }
     },
     "./tailwind.css": "./dist/tailwind.css",
     "./package.json": "./package.json"
@@ -78,7 +138,9 @@
     "node": ">=20"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
   },
   "dependencies": {
     "@hugeicons/core-free-icons": "^3.1.1",
@@ -87,7 +149,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.0",
-    "better-zap": "0.2.0"
+    "better-zap": "25.0.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -106,6 +168,7 @@
   "scripts": {
     "build": "tsdown",
     "typecheck": "tsc --noEmit",
-    "test": "pnpm run build && vitest run"
+    "test": "pnpm run build && vitest run",
+    "package:check": "publint --strict && attw --pack --profile node16 --exclude-entrypoints @better-zap/react/tailwind.css"
   }
 }