@fragments-sdk/ui 0.9.4 → 0.9.6

package/dist/components/Link/Link.module.scss.js

@@ -9,8 +9,11 @@ const styles = {
   "default": "_default_77ogl_27",
   subtle,
   muted,
+  "underline-always": "_underline-always_77ogl_48",
   underlineAlways,
+  "underline-hover": "_underline-hover_77ogl_53",
   underlineHover,
+  "underline-none": "_underline-none_77ogl_61",
   underlineNone
 };
 export {

package/dist/components/Link/Link.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"Link.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/List/List.module.scss.cjs

@@ -20,10 +20,15 @@ const styles = {
   disc,
   decimal,
   icon,
+  "gap-none": "_gap-none_16fbx_26",
   gapNone,
+  "gap-xs": "_gap-xs_16fbx_30",
   gapXs,
+  "gap-sm": "_gap-sm_16fbx_34",
   gapSm,
+  "gap-md": "_gap-md_16fbx_38",
   gapMd,
+  "gap-lg": "_gap-lg_16fbx_42",
   gapLg,
   item,
   iconItem,

package/dist/components/List/List.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"List.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/List/List.module.scss.js

@@ -18,10 +18,15 @@ const styles = {
   disc,
   decimal,
   icon,
+  "gap-none": "_gap-none_16fbx_26",
   gapNone,
+  "gap-xs": "_gap-xs_16fbx_30",
   gapXs,
+  "gap-sm": "_gap-sm_16fbx_34",
   gapSm,
+  "gap-md": "_gap-md_16fbx_38",
   gapMd,
+  "gap-lg": "_gap-lg_16fbx_42",
   gapLg,
   item,
   iconItem,

package/dist/components/List/List.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"List.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Loading/Loading.module.scss.cjs

@@ -31,8 +31,11 @@ const styles = {
   md,
   lg,
   xl,
+  "color-accent": "_color-accent_f3s9k_24",
   colorAccent,
+  "color-current": "_color-current_f3s9k_28",
   colorCurrent,
+  "color-muted": "_color-muted_f3s9k_32",
   colorMuted,
   centered,
   fill,
@@ -46,7 +49,9 @@ const styles = {
   pulseDot,
   overlayBackdrop,
   inline,
+  "inline-sm": "_inline-sm_f3s9k_168",
   inlineSm,
+  "inline-md": "_inline-md_f3s9k_172",
   inlineMd,
   inlineSpinner,
   screen,

package/dist/components/Loading/Loading.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Loading.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Loading/Loading.module.scss.js

@@ -29,8 +29,11 @@ const styles = {
   md,
   lg,
   xl,
+  "color-accent": "_color-accent_f3s9k_24",
   colorAccent,
+  "color-current": "_color-current_f3s9k_28",
   colorCurrent,
+  "color-muted": "_color-muted_f3s9k_32",
   colorMuted,
   centered,
   fill,
@@ -44,7 +47,9 @@ const styles = {
   pulseDot,
   overlayBackdrop,
   inline,
+  "inline-sm": "_inline-sm_f3s9k_168",
   inlineSm,
+  "inline-md": "_inline-md_f3s9k_172",
   inlineMd,
   inlineSpinner,
   screen,

package/dist/components/Loading/Loading.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Loading.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Markdown/Markdown.module.scss.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const markdown = "_markdown_17m4r_1";
+const markdown = "_markdown_u63zl_1";
 const styles = {
   markdown
 };

package/dist/components/Markdown/Markdown.module.scss.js

@@ -1,4 +1,4 @@
-const markdown = "_markdown_17m4r_1";
+const markdown = "_markdown_u63zl_1";
 const styles = {
   markdown
 };

package/dist/components/Message/Message.module.scss.cjs

@@ -1,21 +1,23 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const message = "_message_hkbox_1";
-const actions = "_actions_hkbox_8";
-const user = "_user_hkbox_15";
-const body = "_body_hkbox_19";
-const content = "_content_hkbox_22";
-const assistant = "_assistant_hkbox_27";
-const system = "_system_hkbox_32";
-const avatar = "_avatar_hkbox_42";
-const error = "_error_hkbox_46";
-const sending = "_sending_hkbox_52";
-const avatarUser = "_avatarUser_hkbox_72";
-const avatarAssistant = "_avatarAssistant_hkbox_77";
-const avatarSystem = "_avatarSystem_hkbox_82";
-const streaming = "_streaming_hkbox_137";
-const blink = "_blink_hkbox_1";
-const timestamp = "_timestamp_hkbox_163";
+const message = "_message_1052q_1";
+const actions = "_actions_1052q_8";
+const user = "_user_1052q_15";
+const body = "_body_1052q_19";
+const content = "_content_1052q_22";
+const assistant = "_assistant_1052q_27";
+const system = "_system_1052q_32";
+const avatar = "_avatar_1052q_42";
+const error = "_error_1052q_46";
+const sending = "_sending_1052q_52";
+const avatarUser = "_avatarUser_1052q_72";
+const avatarAssistant = "_avatarAssistant_1052q_77";
+const avatarSystem = "_avatarSystem_1052q_82";
+const avatarImage = "_avatarImage_1052q_87";
+const avatarImg = "_avatarImg_1052q_92";
+const streaming = "_streaming_1052q_148";
+const blink = "_blink_1052q_1";
+const timestamp = "_timestamp_1052q_174";
 const styles = {
   message,
   actions,
@@ -30,6 +32,8 @@ const styles = {
   avatarUser,
   avatarAssistant,
   avatarSystem,
+  avatarImage,
+  avatarImg,
   streaming,
   blink,
   timestamp
@@ -38,6 +42,8 @@ exports.actions = actions;
 exports.assistant = assistant;
 exports.avatar = avatar;
 exports.avatarAssistant = avatarAssistant;
+exports.avatarImage = avatarImage;
+exports.avatarImg = avatarImg;
 exports.avatarSystem = avatarSystem;
 exports.avatarUser = avatarUser;
 exports.blink = blink;

package/dist/components/Message/Message.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Message.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Message.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Message/Message.module.scss.js

@@ -1,19 +1,21 @@
-const message = "_message_hkbox_1";
-const actions = "_actions_hkbox_8";
-const user = "_user_hkbox_15";
-const body = "_body_hkbox_19";
-const content = "_content_hkbox_22";
-const assistant = "_assistant_hkbox_27";
-const system = "_system_hkbox_32";
-const avatar = "_avatar_hkbox_42";
-const error = "_error_hkbox_46";
-const sending = "_sending_hkbox_52";
-const avatarUser = "_avatarUser_hkbox_72";
-const avatarAssistant = "_avatarAssistant_hkbox_77";
-const avatarSystem = "_avatarSystem_hkbox_82";
-const streaming = "_streaming_hkbox_137";
-const blink = "_blink_hkbox_1";
-const timestamp = "_timestamp_hkbox_163";
+const message = "_message_1052q_1";
+const actions = "_actions_1052q_8";
+const user = "_user_1052q_15";
+const body = "_body_1052q_19";
+const content = "_content_1052q_22";
+const assistant = "_assistant_1052q_27";
+const system = "_system_1052q_32";
+const avatar = "_avatar_1052q_42";
+const error = "_error_1052q_46";
+const sending = "_sending_1052q_52";
+const avatarUser = "_avatarUser_1052q_72";
+const avatarAssistant = "_avatarAssistant_1052q_77";
+const avatarSystem = "_avatarSystem_1052q_82";
+const avatarImage = "_avatarImage_1052q_87";
+const avatarImg = "_avatarImg_1052q_92";
+const streaming = "_streaming_1052q_148";
+const blink = "_blink_1052q_1";
+const timestamp = "_timestamp_1052q_174";
 const styles = {
   message,
   actions,
@@ -28,6 +30,8 @@ const styles = {
   avatarUser,
   avatarAssistant,
   avatarSystem,
+  avatarImage,
+  avatarImg,
   streaming,
   blink,
   timestamp
@@ -37,6 +41,8 @@ export {
   assistant,
   avatar,
   avatarAssistant,
+  avatarImage,
+  avatarImg,
   avatarSystem,
   avatarUser,
   blink,

package/dist/components/Message/Message.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Message.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Message/index.cjs

@@ -68,7 +68,7 @@ function AssistantIcon() {
       viewBox: "0 0 24 24",
       fill: "currentColor",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" })
     }
   );
 }
@@ -113,15 +113,17 @@ function MessageTimestamp({
   const classes = [Message_module.default.timestamp, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ...htmlProps, className: classes, children: formatted });
 }
-function MessageAvatar({ children, className, ...htmlProps }) {
+function MessageAvatar({ children, src, alt, className, ...htmlProps }) {
   const { role } = useMessageContext();
   const classes = [
     Message_module.default.avatar,
     Message_module.default[`avatar${role.charAt(0).toUpperCase() + role.slice(1)}`],
+    src && Message_module.default.avatarImage,
     className
   ].filter(Boolean).join(" ");
   const defaultIcon = role === "user" ? /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {}) : role === "assistant" ? /* @__PURE__ */ jsxRuntime.jsx(AssistantIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(SystemIcon, {});
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children: children ?? defaultIcon });
+  const content = children ?? (src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: alt ?? role, className: Message_module.default.avatarImg }) : defaultIcon);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children: content });
 }
 function MessageRoot({
   role,

package/dist/components/Message/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Message/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Message.module.scss';\nimport { Markdown } from '../Markdown';\n\n// ============================================\n// Types\n// ============================================\n\nexport type MessageRole = 'user' | 'assistant' | 'system';\nexport type MessageStatus = 'sending' | 'streaming' | 'complete' | 'error';\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Message role determines styling and alignment */\n  role: MessageRole;\n  /** Message content */\n  children: React.ReactNode;\n  /** Message status */\n  status?: MessageStatus;\n  /** When the message was sent */\n  timestamp?: Date;\n  /** Custom avatar override */\n  avatar?: React.ReactNode;\n  /** Hover actions (copy, regenerate) */\n  actions?: React.ReactNode;\n}\n\nexport interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** When true, renders string children as markdown */\n  markdown?: boolean;\n}\n\nexport interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface MessageTimestampProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Date to format */\n  date?: Date;\n  /** Custom format function */\n  format?: (date: Date) => string;\n}\n\nexport interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface MessageContextValue {\n  role: MessageRole;\n  status: MessageStatus;\n  timestamp?: Date;\n}\n\nconst MessageContext = React.createContext<MessageContextValue | null>(null);\n\nfunction useMessageContext() {\n  const context = React.useContext(MessageContext);\n  if (!context) {\n    throw new Error('Message compound components must be used within a Message');\n  }\n  return context;\n}\n\n// ============================================\n// Helper Functions\n// ============================================\n\nfunction formatTimestamp(date: Date): string {\n  const now = new Date();\n  const diff = now.getTime() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n  const hours = Math.floor(diff / 3600000);\n\n  if (minutes < 1) return 'Just now';\n  if (minutes < 60) return `${minutes}m ago`;\n  if (hours < 24) return `${hours}h ago`;\n\n  return date.toLocaleDateString(undefined, {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  });\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction UserIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </svg>\n  );\n}\n\nfunction AssistantIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n    </svg>\n  );\n}\n\nfunction SystemIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction MessageContent({ children, markdown, className, ...htmlProps }: MessageContentProps) {\n  const { status } = useMessageContext();\n\n  const classes = [\n    styles.content,\n    status === 'streaming' && styles.streaming,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const content = markdown && typeof children === 'string'\n    ? <Markdown content={children} />\n    : children;\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {content}\n    </div>\n  );\n}\n\nfunction MessageActions({ children, className, ...htmlProps }: MessageActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction MessageTimestamp({\n  date,\n  format: customFormat,\n  className,\n  ...htmlProps\n}: MessageTimestampProps) {\n  const { timestamp } = useMessageContext();\n  const dateToFormat = date ?? timestamp;\n\n  if (!dateToFormat) return null;\n\n  const formatted = customFormat ? customFormat(dateToFormat) : formatTimestamp(dateToFormat);\n\n  const classes = [styles.timestamp, className].filter(Boolean).join(' ');\n\n  return (\n    <span {...htmlProps} className={classes}>\n      {formatted}\n    </span>\n  );\n}\n\nfunction MessageAvatar({ children, className, ...htmlProps }: MessageAvatarProps) {\n  const { role } = useMessageContext();\n\n  const classes = [\n    styles.avatar,\n    styles[`avatar${role.charAt(0).toUpperCase() + role.slice(1)}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  const defaultIcon = role === 'user'\n    ? <UserIcon />\n    : role === 'assistant'\n      ? <AssistantIcon />\n      : <SystemIcon />;\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {children ?? defaultIcon}\n    </div>\n  );\n}\n\n// ============================================\n// Main Component\n// ============================================\n\nfunction MessageRoot({\n  role,\n  children,\n  status = 'complete',\n  timestamp,\n  avatar,\n  actions,\n  className,\n  ...htmlProps\n}: MessageProps) {\n  const contextValue: MessageContextValue = {\n    role,\n    status,\n    timestamp,\n  };\n\n  const classes = [\n    styles.message,\n    styles[role],\n    status === 'error' && styles.error,\n    status === 'sending' && styles.sending,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <MessageContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        className={classes}\n        data-role={role}\n        data-status={status}\n      >\n        {avatar !== undefined ? avatar : <MessageAvatar />}\n        <div className={styles.body}>\n          {children}\n          {actions && <MessageActions>{actions}</MessageActions>}\n        </div>\n      </div>\n    </MessageContext.Provider>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Message = Object.assign(MessageRoot, {\n  Content: MessageContent,\n  Actions: MessageActions,\n  Timestamp: MessageTimestamp,\n  Avatar: MessageAvatar,\n});\n\nexport {\n  MessageRoot,\n  MessageContent,\n  MessageActions,\n  MessageTimestamp,\n  MessageAvatar,\n};\n\nexport { useMessageContext };\n"],"names":["React","jsx","markdown","styles","Markdown","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Message/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Message.module.scss';\nimport { Markdown } from '../Markdown';\n\n// ============================================\n// Types\n// ============================================\n\nexport type MessageRole = 'user' | 'assistant' | 'system';\nexport type MessageStatus = 'sending' | 'streaming' | 'complete' | 'error';\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Message role determines styling and alignment */\n  role: MessageRole;\n  /** Message content */\n  children: React.ReactNode;\n  /** Message status */\n  status?: MessageStatus;\n  /** When the message was sent */\n  timestamp?: Date;\n  /** Custom avatar override */\n  avatar?: React.ReactNode;\n  /** Hover actions (copy, regenerate) */\n  actions?: React.ReactNode;\n}\n\nexport interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** When true, renders string children as markdown */\n  markdown?: boolean;\n}\n\nexport interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface MessageTimestampProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Date to format */\n  date?: Date;\n  /** Custom format function */\n  format?: (date: Date) => string;\n}\n\nexport interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Image URL for the avatar */\n  src?: string;\n  /** Alt text for image avatars */\n  alt?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface MessageContextValue {\n  role: MessageRole;\n  status: MessageStatus;\n  timestamp?: Date;\n}\n\nconst MessageContext = React.createContext<MessageContextValue | null>(null);\n\nfunction useMessageContext() {\n  const context = React.useContext(MessageContext);\n  if (!context) {\n    throw new Error('Message compound components must be used within a Message');\n  }\n  return context;\n}\n\n// ============================================\n// Helper Functions\n// ============================================\n\nfunction formatTimestamp(date: Date): string {\n  const now = new Date();\n  const diff = now.getTime() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n  const hours = Math.floor(diff / 3600000);\n\n  if (minutes < 1) return 'Just now';\n  if (minutes < 60) return `${minutes}m ago`;\n  if (hours < 24) return `${hours}h ago`;\n\n  return date.toLocaleDateString(undefined, {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  });\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction UserIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </svg>\n  );\n}\n\nfunction AssistantIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z\" />\n    </svg>\n  );\n}\n\nfunction SystemIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction MessageContent({ children, markdown, className, ...htmlProps }: MessageContentProps) {\n  const { status } = useMessageContext();\n\n  const classes = [\n    styles.content,\n    status === 'streaming' && styles.streaming,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const content = markdown && typeof children === 'string'\n    ? <Markdown content={children} />\n    : children;\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {content}\n    </div>\n  );\n}\n\nfunction MessageActions({ children, className, ...htmlProps }: MessageActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction MessageTimestamp({\n  date,\n  format: customFormat,\n  className,\n  ...htmlProps\n}: MessageTimestampProps) {\n  const { timestamp } = useMessageContext();\n  const dateToFormat = date ?? timestamp;\n\n  if (!dateToFormat) return null;\n\n  const formatted = customFormat ? customFormat(dateToFormat) : formatTimestamp(dateToFormat);\n\n  const classes = [styles.timestamp, className].filter(Boolean).join(' ');\n\n  return (\n    <span {...htmlProps} className={classes}>\n      {formatted}\n    </span>\n  );\n}\n\nfunction MessageAvatar({ children, src, alt, className, ...htmlProps }: MessageAvatarProps) {\n  const { role } = useMessageContext();\n\n  const classes = [\n    styles.avatar,\n    styles[`avatar${role.charAt(0).toUpperCase() + role.slice(1)}`],\n    src && styles.avatarImage,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const defaultIcon = role === 'user'\n    ? <UserIcon />\n    : role === 'assistant'\n      ? <AssistantIcon />\n      : <SystemIcon />;\n\n  const content = children ?? (src\n    ? <img src={src} alt={alt ?? role} className={styles.avatarImg} />\n    : defaultIcon);\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {content}\n    </div>\n  );\n}\n\n// ============================================\n// Main Component\n// ============================================\n\nfunction MessageRoot({\n  role,\n  children,\n  status = 'complete',\n  timestamp,\n  avatar,\n  actions,\n  className,\n  ...htmlProps\n}: MessageProps) {\n  const contextValue: MessageContextValue = {\n    role,\n    status,\n    timestamp,\n  };\n\n  const classes = [\n    styles.message,\n    styles[role],\n    status === 'error' && styles.error,\n    status === 'sending' && styles.sending,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <MessageContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        className={classes}\n        data-role={role}\n        data-status={status}\n      >\n        {avatar !== undefined ? avatar : <MessageAvatar />}\n        <div className={styles.body}>\n          {children}\n          {actions && <MessageActions>{actions}</MessageActions>}\n        </div>\n      </div>\n    </MessageContext.Provider>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Message = Object.assign(MessageRoot, {\n  Content: MessageContent,\n  Actions: MessageActions,\n  Timestamp: MessageTimestamp,\n  Avatar: MessageAvatar,\n});\n\nexport {\n  MessageRoot,\n  MessageContent,\n  MessageActions,\n  MessageTimestamp,\n  MessageAvatar,\n};\n\nexport { useMessageContext };\n"],"names":["React","jsx","markdown","styles","Markdown","jsxs"],"mappings":"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"}

package/dist/components/Message/index.d.ts

@@ -31,6 +31,10 @@ export interface MessageTimestampProps extends React.HTMLAttributes<HTMLSpanElem
 }
 export interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    /** Image URL for the avatar */
+    src?: string;
+    /** Alt text for image avatars */
+    alt?: string;
 }
 interface MessageContextValue {
     role: MessageRole;
@@ -41,7 +45,7 @@ declare function useMessageContext(): MessageContextValue;
 declare function MessageContent({ children, markdown, className, ...htmlProps }: MessageContentProps): import("react/jsx-runtime").JSX.Element;
 declare function MessageActions({ children, className, ...htmlProps }: MessageActionsProps): import("react/jsx-runtime").JSX.Element;
 declare function MessageTimestamp({ date, format: customFormat, className, ...htmlProps }: MessageTimestampProps): import("react/jsx-runtime").JSX.Element | null;
-declare function MessageAvatar({ children, className, ...htmlProps }: MessageAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function MessageAvatar({ children, src, alt, className, ...htmlProps }: MessageAvatarProps): import("react/jsx-runtime").JSX.Element;
 declare function MessageRoot({ role, children, status, timestamp, avatar, actions, className, ...htmlProps }: MessageProps): import("react/jsx-runtime").JSX.Element;
 export declare const Message: typeof MessageRoot & {
     Content: typeof MessageContent;

package/dist/components/Message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Message/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,oDAAoD;IACpD,IAAI,EAAE,WAAW,CAAC;IAClB,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gCAAgC;IAChC,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,uCAAuC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAClF,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6BAA6B;IAC7B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAID,iBAAS,iBAAiB,wBAMzB;AA6ED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,2CAkB3F;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,2CAQjF;AAED,iBAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,MAAM,EAAE,YAAY,EACpB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,qBAAqB,kDAevB;AAED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAoB/E;AAMD,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,MAAmB,EACnB,SAAS,EACT,MAAM,EACN,OAAO,EACP,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,2CA+Bd;AAMD,eAAO,MAAM,OAAO;;;;;CAKlB,CAAC;AAEH,OAAO,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,aAAa,GACd,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Message/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,oDAAoD;IACpD,IAAI,EAAE,WAAW,CAAC;IAClB,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gCAAgC;IAChC,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,uCAAuC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAClF,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6BAA6B;IAC7B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAMD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAID,iBAAS,iBAAiB,wBAMzB;AA6ED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,2CAkB3F;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,2CAQjF;AAED,iBAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,MAAM,EAAE,YAAY,EACpB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,qBAAqB,kDAevB;AAED,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,2CAyBzF;AAMD,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,MAAmB,EACnB,SAAS,EACT,MAAM,EACN,OAAO,EACP,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,2CA+Bd;AAMD,eAAO,MAAM,OAAO;;;;;CAKlB,CAAC;AAEH,OAAO,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,aAAa,GACd,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Message/index.js

@@ -49,7 +49,7 @@ function AssistantIcon() {
       viewBox: "0 0 24 24",
       fill: "currentColor",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
+      children: /* @__PURE__ */ jsx("path", { d: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" })
     }
   );
 }
@@ -94,15 +94,17 @@ function MessageTimestamp({
   const classes = [styles.timestamp, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("span", { ...htmlProps, className: classes, children: formatted });
 }
-function MessageAvatar({ children, className, ...htmlProps }) {
+function MessageAvatar({ children, src, alt, className, ...htmlProps }) {
   const { role } = useMessageContext();
   const classes = [
     styles.avatar,
     styles[`avatar${role.charAt(0).toUpperCase() + role.slice(1)}`],
+    src && styles.avatarImage,
     className
   ].filter(Boolean).join(" ");
   const defaultIcon = role === "user" ? /* @__PURE__ */ jsx(UserIcon, {}) : role === "assistant" ? /* @__PURE__ */ jsx(AssistantIcon, {}) : /* @__PURE__ */ jsx(SystemIcon, {});
-  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children: children ?? defaultIcon });
+  const content = children ?? (src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? role, className: styles.avatarImg }) : defaultIcon);
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children: content });
 }
 function MessageRoot({
   role,

package/dist/components/Message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Message/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Message.module.scss';\nimport { Markdown } from '../Markdown';\n\n// ============================================\n// Types\n// ============================================\n\nexport type MessageRole = 'user' | 'assistant' | 'system';\nexport type MessageStatus = 'sending' | 'streaming' | 'complete' | 'error';\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Message role determines styling and alignment */\n  role: MessageRole;\n  /** Message content */\n  children: React.ReactNode;\n  /** Message status */\n  status?: MessageStatus;\n  /** When the message was sent */\n  timestamp?: Date;\n  /** Custom avatar override */\n  avatar?: React.ReactNode;\n  /** Hover actions (copy, regenerate) */\n  actions?: React.ReactNode;\n}\n\nexport interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** When true, renders string children as markdown */\n  markdown?: boolean;\n}\n\nexport interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface MessageTimestampProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Date to format */\n  date?: Date;\n  /** Custom format function */\n  format?: (date: Date) => string;\n}\n\nexport interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface MessageContextValue {\n  role: MessageRole;\n  status: MessageStatus;\n  timestamp?: Date;\n}\n\nconst MessageContext = React.createContext<MessageContextValue | null>(null);\n\nfunction useMessageContext() {\n  const context = React.useContext(MessageContext);\n  if (!context) {\n    throw new Error('Message compound components must be used within a Message');\n  }\n  return context;\n}\n\n// ============================================\n// Helper Functions\n// ============================================\n\nfunction formatTimestamp(date: Date): string {\n  const now = new Date();\n  const diff = now.getTime() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n  const hours = Math.floor(diff / 3600000);\n\n  if (minutes < 1) return 'Just now';\n  if (minutes < 60) return `${minutes}m ago`;\n  if (hours < 24) return `${hours}h ago`;\n\n  return date.toLocaleDateString(undefined, {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  });\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction UserIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </svg>\n  );\n}\n\nfunction AssistantIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n    </svg>\n  );\n}\n\nfunction SystemIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction MessageContent({ children, markdown, className, ...htmlProps }: MessageContentProps) {\n  const { status } = useMessageContext();\n\n  const classes = [\n    styles.content,\n    status === 'streaming' && styles.streaming,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const content = markdown && typeof children === 'string'\n    ? <Markdown content={children} />\n    : children;\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {content}\n    </div>\n  );\n}\n\nfunction MessageActions({ children, className, ...htmlProps }: MessageActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction MessageTimestamp({\n  date,\n  format: customFormat,\n  className,\n  ...htmlProps\n}: MessageTimestampProps) {\n  const { timestamp } = useMessageContext();\n  const dateToFormat = date ?? timestamp;\n\n  if (!dateToFormat) return null;\n\n  const formatted = customFormat ? customFormat(dateToFormat) : formatTimestamp(dateToFormat);\n\n  const classes = [styles.timestamp, className].filter(Boolean).join(' ');\n\n  return (\n    <span {...htmlProps} className={classes}>\n      {formatted}\n    </span>\n  );\n}\n\nfunction MessageAvatar({ children, className, ...htmlProps }: MessageAvatarProps) {\n  const { role } = useMessageContext();\n\n  const classes = [\n    styles.avatar,\n    styles[`avatar${role.charAt(0).toUpperCase() + role.slice(1)}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  const defaultIcon = role === 'user'\n    ? <UserIcon />\n    : role === 'assistant'\n      ? <AssistantIcon />\n      : <SystemIcon />;\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {children ?? defaultIcon}\n    </div>\n  );\n}\n\n// ============================================\n// Main Component\n// ============================================\n\nfunction MessageRoot({\n  role,\n  children,\n  status = 'complete',\n  timestamp,\n  avatar,\n  actions,\n  className,\n  ...htmlProps\n}: MessageProps) {\n  const contextValue: MessageContextValue = {\n    role,\n    status,\n    timestamp,\n  };\n\n  const classes = [\n    styles.message,\n    styles[role],\n    status === 'error' && styles.error,\n    status === 'sending' && styles.sending,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <MessageContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        className={classes}\n        data-role={role}\n        data-status={status}\n      >\n        {avatar !== undefined ? avatar : <MessageAvatar />}\n        <div className={styles.body}>\n          {children}\n          {actions && <MessageActions>{actions}</MessageActions>}\n        </div>\n      </div>\n    </MessageContext.Provider>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Message = Object.assign(MessageRoot, {\n  Content: MessageContent,\n  Actions: MessageActions,\n  Timestamp: MessageTimestamp,\n  Avatar: MessageAvatar,\n});\n\nexport {\n  MessageRoot,\n  MessageContent,\n  MessageActions,\n  MessageTimestamp,\n  MessageAvatar,\n};\n\nexport { useMessageContext };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Message/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Message.module.scss';\nimport { Markdown } from '../Markdown';\n\n// ============================================\n// Types\n// ============================================\n\nexport type MessageRole = 'user' | 'assistant' | 'system';\nexport type MessageStatus = 'sending' | 'streaming' | 'complete' | 'error';\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Message role determines styling and alignment */\n  role: MessageRole;\n  /** Message content */\n  children: React.ReactNode;\n  /** Message status */\n  status?: MessageStatus;\n  /** When the message was sent */\n  timestamp?: Date;\n  /** Custom avatar override */\n  avatar?: React.ReactNode;\n  /** Hover actions (copy, regenerate) */\n  actions?: React.ReactNode;\n}\n\nexport interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** When true, renders string children as markdown */\n  markdown?: boolean;\n}\n\nexport interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface MessageTimestampProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Date to format */\n  date?: Date;\n  /** Custom format function */\n  format?: (date: Date) => string;\n}\n\nexport interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Image URL for the avatar */\n  src?: string;\n  /** Alt text for image avatars */\n  alt?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface MessageContextValue {\n  role: MessageRole;\n  status: MessageStatus;\n  timestamp?: Date;\n}\n\nconst MessageContext = React.createContext<MessageContextValue | null>(null);\n\nfunction useMessageContext() {\n  const context = React.useContext(MessageContext);\n  if (!context) {\n    throw new Error('Message compound components must be used within a Message');\n  }\n  return context;\n}\n\n// ============================================\n// Helper Functions\n// ============================================\n\nfunction formatTimestamp(date: Date): string {\n  const now = new Date();\n  const diff = now.getTime() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n  const hours = Math.floor(diff / 3600000);\n\n  if (minutes < 1) return 'Just now';\n  if (minutes < 60) return `${minutes}m ago`;\n  if (hours < 24) return `${hours}h ago`;\n\n  return date.toLocaleDateString(undefined, {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  });\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction UserIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </svg>\n  );\n}\n\nfunction AssistantIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z\" />\n    </svg>\n  );\n}\n\nfunction SystemIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Sub-components\n// ============================================\n\nfunction MessageContent({ children, markdown, className, ...htmlProps }: MessageContentProps) {\n  const { status } = useMessageContext();\n\n  const classes = [\n    styles.content,\n    status === 'streaming' && styles.streaming,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const content = markdown && typeof children === 'string'\n    ? <Markdown content={children} />\n    : children;\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {content}\n    </div>\n  );\n}\n\nfunction MessageActions({ children, className, ...htmlProps }: MessageActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction MessageTimestamp({\n  date,\n  format: customFormat,\n  className,\n  ...htmlProps\n}: MessageTimestampProps) {\n  const { timestamp } = useMessageContext();\n  const dateToFormat = date ?? timestamp;\n\n  if (!dateToFormat) return null;\n\n  const formatted = customFormat ? customFormat(dateToFormat) : formatTimestamp(dateToFormat);\n\n  const classes = [styles.timestamp, className].filter(Boolean).join(' ');\n\n  return (\n    <span {...htmlProps} className={classes}>\n      {formatted}\n    </span>\n  );\n}\n\nfunction MessageAvatar({ children, src, alt, className, ...htmlProps }: MessageAvatarProps) {\n  const { role } = useMessageContext();\n\n  const classes = [\n    styles.avatar,\n    styles[`avatar${role.charAt(0).toUpperCase() + role.slice(1)}`],\n    src && styles.avatarImage,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const defaultIcon = role === 'user'\n    ? <UserIcon />\n    : role === 'assistant'\n      ? <AssistantIcon />\n      : <SystemIcon />;\n\n  const content = children ?? (src\n    ? <img src={src} alt={alt ?? role} className={styles.avatarImg} />\n    : defaultIcon);\n\n  return (\n    <div {...htmlProps} className={classes}>\n      {content}\n    </div>\n  );\n}\n\n// ============================================\n// Main Component\n// ============================================\n\nfunction MessageRoot({\n  role,\n  children,\n  status = 'complete',\n  timestamp,\n  avatar,\n  actions,\n  className,\n  ...htmlProps\n}: MessageProps) {\n  const contextValue: MessageContextValue = {\n    role,\n    status,\n    timestamp,\n  };\n\n  const classes = [\n    styles.message,\n    styles[role],\n    status === 'error' && styles.error,\n    status === 'sending' && styles.sending,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <MessageContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        className={classes}\n        data-role={role}\n        data-status={status}\n      >\n        {avatar !== undefined ? avatar : <MessageAvatar />}\n        <div className={styles.body}>\n          {children}\n          {actions && <MessageActions>{actions}</MessageActions>}\n        </div>\n      </div>\n    </MessageContext.Provider>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Message = Object.assign(MessageRoot, {\n  Content: MessageContent,\n  Actions: MessageActions,\n  Timestamp: MessageTimestamp,\n  Avatar: MessageAvatar,\n});\n\nexport {\n  MessageRoot,\n  MessageContent,\n  MessageActions,\n  MessageTimestamp,\n  MessageAvatar,\n};\n\nexport { useMessageContext };\n"],"names":[],"mappings":"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"}

package/dist/components/Skeleton/Skeleton.module.scss.cjs

@@ -25,27 +25,41 @@ const gapMd = "_gap-md_1qpb2_111";
 const textLine = "_textLine_1qpb2_115";
 const styles = {
   skeleton,
+  "skeleton-pulse": "_skeleton-pulse_1qpb2_1",
   skeletonPulse,
   "static": "_static_1qpb2_16",
   fill,
   text,
   heading,
   avatar,
+  "avatar-sm": "_avatar-sm_1qpb2_41",
   avatarSm,
+  "avatar-md": "_avatar-md_1qpb2_46",
   avatarMd,
+  "avatar-lg": "_avatar-lg_1qpb2_51",
   avatarLg,
   button,
+  "button-sm": "_button-sm_1qpb2_60",
   buttonSm,
+  "button-md": "_button-md_1qpb2_65",
   buttonMd,
+  "button-lg": "_button-lg_1qpb2_70",
   buttonLg,
   input,
+  "radius-none": "_radius-none_1qpb2_81",
   radiusNone,
+  "radius-sm": "_radius-sm_1qpb2_85",
   radiusSm,
+  "radius-md": "_radius-md_1qpb2_89",
   radiusMd,
+  "radius-lg": "_radius-lg_1qpb2_93",
   radiusLg,
+  "radius-full": "_radius-full_1qpb2_97",
   radiusFull,
   textContainer,
+  "gap-sm": "_gap-sm_1qpb2_107",
   gapSm,
+  "gap-md": "_gap-md_1qpb2_111",
   gapMd,
   textLine
 };

package/dist/components/Skeleton/Skeleton.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Skeleton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Skeleton/Skeleton.module.scss.js

@@ -23,27 +23,41 @@ const gapMd = "_gap-md_1qpb2_111";
 const textLine = "_textLine_1qpb2_115";
 const styles = {
   skeleton,
+  "skeleton-pulse": "_skeleton-pulse_1qpb2_1",
   skeletonPulse,
   "static": "_static_1qpb2_16",
   fill,
   text,
   heading,
   avatar,
+  "avatar-sm": "_avatar-sm_1qpb2_41",
   avatarSm,
+  "avatar-md": "_avatar-md_1qpb2_46",
   avatarMd,
+  "avatar-lg": "_avatar-lg_1qpb2_51",
   avatarLg,
   button,
+  "button-sm": "_button-sm_1qpb2_60",
   buttonSm,
+  "button-md": "_button-md_1qpb2_65",
   buttonMd,
+  "button-lg": "_button-lg_1qpb2_70",
   buttonLg,
   input,
+  "radius-none": "_radius-none_1qpb2_81",
   radiusNone,
+  "radius-sm": "_radius-sm_1qpb2_85",
   radiusSm,
+  "radius-md": "_radius-md_1qpb2_89",
   radiusMd,
+  "radius-lg": "_radius-lg_1qpb2_93",
   radiusLg,
+  "radius-full": "_radius-full_1qpb2_97",
   radiusFull,
   textContainer,
+  "gap-sm": "_gap-sm_1qpb2_107",
   gapSm,
+  "gap-md": "_gap-md_1qpb2_111",
   gapMd,
   textLine
 };

package/dist/components/Skeleton/Skeleton.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Skeleton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Stack/Stack.module.scss.cjs

@@ -26,20 +26,34 @@ const styles = {
   row,
   column,
   directionResponsive,
+  "gap-xs": "_gap-xs_ixv42_37",
   gapXs,
+  "gap-sm": "_gap-sm_ixv42_41",
   gapSm,
+  "gap-md": "_gap-md_ixv42_45",
   gapMd,
+  "gap-lg": "_gap-lg_ixv42_49",
   gapLg,
+  "gap-xl": "_gap-xl_ixv42_53",
   gapXl,
   gapResponsive,
+  "align-start": "_align-start_ixv42_81",
   alignStart,
+  "align-center": "_align-center_ixv42_85",
   alignCenter,
+  "align-end": "_align-end_ixv42_89",
   alignEnd,
+  "align-stretch": "_align-stretch_ixv42_93",
   alignStretch,
+  "align-baseline": "_align-baseline_ixv42_97",
   alignBaseline,
+  "justify-start": "_justify-start_ixv42_101",
   justifyStart,
+  "justify-center": "_justify-center_ixv42_105",
   justifyCenter,
+  "justify-end": "_justify-end_ixv42_109",
   justifyEnd,
+  "justify-between": "_justify-between_ixv42_113",
   justifyBetween,
   wrap,
   separator

package/dist/components/Stack/Stack.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Stack.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}