@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/components/core/Masonry/Masonry.js

@@ -1,9 +1,13 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { getMasonryTheme } from './Masonry.theme.js';
 
+// Arrange BEFORE the browser paints so items never flash full-width in normal flow
+// before being absolutely positioned. Falls back to useEffect on the server (no DOM).
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const MASONRY_ITEM_INITIAL = { opacity: 0, y: 10 };
 const MASONRY_ITEM_ANIMATE = { opacity: 1, y: 0 };
 const MASONRY_ITEM_EXIT = { opacity: 0, scale: 0.95 };
@@ -13,62 +17,67 @@ const MASONRY_ITEM_TRANSITION_BASE = {
 };
 const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, gapBreakpoints, className, style, minColumns = 1, maxColumns = 10, sequential = false, themeOverrides, loading = false, ...props }, ref) => {
     const containerRef = useRef(null);
+    const relayoutRef = useRef(() => { });
     const [currentColumns, setCurrentColumns] = useState(typeof columns === 'number' ? columns : 3);
     const [currentGap, setCurrentGap] = useState(gap);
-    const [containerWidth, setContainerWidth] = useState(0);
+    // Items stay hidden until the first arrange completes, so there is no full-width
+    // flash even on the rare path where the container can't be measured before paint.
+    const [isArranged, setIsArranged] = useState(false);
     // Get the theme with any overrides applied
     const theme = getMasonryTheme(themeOverrides);
-    // Calculate responsive columns and gap
+    // Resolve columns + gap for the current container width. Returns the resolved layout so
+    // the caller can arrange immediately with these exact values (React state lags a render
+    // behind, which is what let the first arrange run with stale numbers). Also syncs state
+    // so the values are available to renders/consumers, but never gates positioning on it.
     const calculateLayout = useCallback(() => {
         if (!containerRef.current)
-            return;
+            return null;
         // Use getBoundingClientRect for more accurate width measurement
         const containerRect = containerRef.current.getBoundingClientRect();
         const width = Math.floor(containerRect.width);
-        // Only update if width actually changed to prevent unnecessary re-renders
-        if (width !== containerWidth && width > 0) {
-            setContainerWidth(width);
-        }
-        // Handle responsive columns
+        // Resolve responsive columns
+        let resolvedColumns;
         if (typeof columns === 'object') {
             const breakpoints = Object.keys(columns)
                 .map(Number)
                 .sort((a, b) => a - b);
-            let newColumns = 3; // Default fallback
+            resolvedColumns = 3; // Default fallback
             for (const breakpoint of breakpoints) {
                 if (width >= breakpoint) {
-                    newColumns = columns[breakpoint];
+                    resolvedColumns = columns[breakpoint];
                 }
             }
-            // Ensure columns are within min/max bounds
-            newColumns = Math.min(Math.max(newColumns, minColumns), maxColumns);
-            setCurrentColumns(newColumns);
         }
         else {
-            const clampedColumns = Math.min(Math.max(columns, minColumns), maxColumns);
-            setCurrentColumns(clampedColumns);
+            resolvedColumns = columns;
         }
-        // Handle responsive gap
+        // Ensure columns are within min/max bounds
+        resolvedColumns = Math.min(Math.max(resolvedColumns, minColumns), maxColumns);
+        // Resolve responsive gap
+        let resolvedGap = gap;
         if (gapBreakpoints) {
             const gapBreakpointKeys = Object.keys(gapBreakpoints)
                 .map(Number)
                 .sort((a, b) => a - b);
-            let newGap = gap;
             for (const breakpoint of gapBreakpointKeys) {
                 if (width >= breakpoint) {
-                    newGap = gapBreakpoints[breakpoint];
+                    resolvedGap = gapBreakpoints[breakpoint];
                 }
             }
-            setCurrentGap(newGap);
         }
-        else {
-            setCurrentGap(gap);
-        }
-    }, [columns, gap, gapBreakpoints, minColumns, maxColumns, containerWidth]);
-    // Arrange items in masonry layout
-    const arrangeItems = useCallback(() => {
+        // Sync the render-facing column/gap state (React no-ops if the value is unchanged).
+        setCurrentColumns(resolvedColumns);
+        setCurrentGap(resolvedGap);
+        return { width, columns: resolvedColumns, gap: resolvedGap };
+    }, [columns, gap, gapBreakpoints, minColumns, maxColumns]);
+    // Arrange items in masonry layout. Pass the freshly-resolved layout to position with exact
+    // values (the initial pre-paint pass); omit it to read the synced state (observer-driven passes).
+    const arrangeItems = useCallback((resolved) => {
+        var _a, _b;
         if (!containerRef.current)
             return;
+        const cols = (_a = resolved === null || resolved === void 0 ? void 0 : resolved.columns) !== null && _a !== void 0 ? _a : currentColumns;
+        const itemGap = (_b = resolved === null || resolved === void 0 ? void 0 : resolved.gap) !== null && _b !== void 0 ? _b : currentGap;
         const container = containerRef.current;
         const wrappers = Array.from(container.children);
         if (wrappers.length === 0)
@@ -76,12 +85,12 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
         // Get fresh container width to avoid stale closure issues
         const currentContainerWidth = container.offsetWidth;
         // Calculate column width
-        const availableWidth = currentContainerWidth - (currentGap * (currentColumns - 1));
-        const columnWidth = Math.floor(availableWidth / currentColumns);
+        const availableWidth = currentContainerWidth - (itemGap * (cols - 1));
+        const columnWidth = Math.floor(availableWidth / cols);
         if (columnWidth <= 0)
             return; // Prevent invalid layouts
         // Initialize column heights
-        const columnHeights = new Array(currentColumns).fill(0);
+        const columnHeights = new Array(cols).fill(0);
         // PHASE 1: READ - Measure all wrapper heights first (prevents layout thrashing)
         const wrapperHeights = [];
         wrappers.forEach((wrapper) => {
@@ -111,14 +120,14 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             let targetColumn;
             if (sequential) {
                 // Sequential placement: round-robin distribution
-                targetColumn = index % currentColumns;
+                targetColumn = index % cols;
             }
             else {
                 // Optimal placement: shortest column
                 targetColumn = columnHeights.indexOf(Math.min(...columnHeights));
             }
             // Calculate position
-            const left = targetColumn * (columnWidth + currentGap);
+            const left = targetColumn * (columnWidth + itemGap);
             const top = columnHeights[targetColumn];
             // Position the wrapper
             wrapper.style.left = `${left}px`;
@@ -126,63 +135,66 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             // Update column height using pre-measured height
             const itemHeight = wrapperHeights[index];
             if (itemHeight > 0) {
-                columnHeights[targetColumn] = top + itemHeight + currentGap;
+                columnHeights[targetColumn] = top + itemHeight + itemGap;
             }
         });
-        // Set final container height after all items are positioned
-        requestAnimationFrame(() => {
-            const maxHeight = Math.max(...columnHeights) - currentGap;
-            container.style.height = `${Math.max(0, maxHeight)}px`;
-        });
+        // Set final container height synchronously — items are now absolutely positioned, so the
+        // container would collapse to 0 without it. Done in the same frame (no rAF) so the first
+        // painted frame already has the correct height.
+        const maxHeight = Math.max(...columnHeights) - itemGap;
+        container.style.height = `${Math.max(0, maxHeight)}px`;
+        // Reveal items now that they're positioned (no-op after the first arrange).
+        setIsArranged(true);
     }, [currentColumns, currentGap, sequential]);
-    // Handle container resize with ResizeObserver for better performance
+    // Measure + arrange in one shot, positioning with the freshly-resolved values (never lagging
+    // state). This is the single entry point for every relayout trigger: mount, resize, children.
+    const relayout = useCallback(() => {
+        const layout = calculateLayout();
+        if (layout && layout.width > 0)
+            arrangeItems(layout);
+    }, [calculateLayout, arrangeItems]);
+    // Keep a ref so the observers (set up once) always call the latest relayout.
+    useEffect(() => {
+        relayoutRef.current = relayout;
+    }, [relayout]);
+    // Initial + children-change arrangement — runs BEFORE paint so items are positioned on the
+    // first frame instead of flashing full-width in normal flow. Keyed on the child COUNT (a
+    // structural signal) rather than the `children` prop identity — the latter is a fresh
+    // reference every parent render, which would force a synchronous measure+arrange on every
+    // unrelated re-render (layout thrash). Reorders/content edits at the same count are caught by
+    // the MutationObserver safety net below.
+    const childCount = React__default.Children.count(children);
+    useIsomorphicLayoutEffect(() => {
+        relayout();
+    }, [relayout, childCount]);
+    // Handle container resize with ResizeObserver, with a window-resize fallback.
     useEffect(() => {
         if (!containerRef.current)
             return;
         let resizeTimeoutId;
-        const resizeObserver = new ResizeObserver((_entries) => {
-            // Debounce resize events to prevent excessive recalculations
-            clearTimeout(resizeTimeoutId);
-            resizeTimeoutId = setTimeout(() => {
-                calculateLayout();
-            }, 100);
-        });
-        // Fallback window resize handler for older browsers
-        const handleWindowResize = () => {
+        const scheduleRelayout = () => {
+            // Debounce to prevent excessive recalculations
             clearTimeout(resizeTimeoutId);
-            resizeTimeoutId = setTimeout(() => {
-                calculateLayout();
-            }, 100);
+            resizeTimeoutId = setTimeout(() => relayoutRef.current(), 100);
         };
+        const resizeObserver = new ResizeObserver(scheduleRelayout);
         resizeObserver.observe(containerRef.current);
-        window.addEventListener('resize', handleWindowResize);
+        window.addEventListener('resize', scheduleRelayout);
         return () => {
             resizeObserver.disconnect();
-            window.removeEventListener('resize', handleWindowResize);
+            window.removeEventListener('resize', scheduleRelayout);
             clearTimeout(resizeTimeoutId);
         };
-    }, [calculateLayout]);
-    // Initial layout calculation and arrangement
-    useEffect(() => {
-        // Wait for next tick to ensure container is mounted and measured
-        const timer = setTimeout(() => {
-            calculateLayout();
-            // Only arrange items if we have a valid container width
-            if (containerWidth > 0) {
-                arrangeItems();
-            }
-        }, 0);
-        return () => clearTimeout(timer);
-    }, [calculateLayout, arrangeItems, children, containerWidth]);
-    // Re-arrange when children change (with debouncing)
+    }, []);
+    // Safety net for direct child add/remove that bypasses React (e.g. imperative DOM mutation,
+    // or AnimatePresence enter/exit). React-driven children changes are already handled by the
+    // layout effect above via its `children` dep; this catches the rest, debounced.
     useEffect(() => {
         let timeoutId;
         const observer = new MutationObserver(() => {
             // Debounce multiple rapid changes
             clearTimeout(timeoutId);
-            timeoutId = setTimeout(() => {
-                arrangeItems();
-            }, 10);
+            timeoutId = setTimeout(() => relayoutRef.current(), 10);
         });
         if (containerRef.current) {
             observer.observe(containerRef.current, {
@@ -194,7 +206,7 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             observer.disconnect();
             clearTimeout(timeoutId);
         };
-    }, [arrangeItems]);
+    }, []);
     // Generate container classes
     const containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
     // Wrap each child in a positioning div with theme styles
@@ -203,7 +215,12 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             return child;
         }
         const wrapperClasses = cn(theme.item.base, theme.animations.transition);
-        return (jsx(motion.div, { className: wrapperClasses, "data-masonry-item": true, initial: MASONRY_ITEM_INITIAL, animate: MASONRY_ITEM_ANIMATE, exit: MASONRY_ITEM_EXIT, transition: {
+        return (jsx(motion.div, { className: wrapperClasses, "data-masonry-item": true, 
+            // Hidden until the first arrange positions it — prevents any full-width flash on the
+            // rare path where the container isn't measurable before paint. `visibility` is a
+            // separate style key from the position/left/top set imperatively during arrange, so
+            // the two never clash. Cleared in the same pre-paint commit on the happy path.
+            style: isArranged ? undefined : { visibility: 'hidden' }, initial: MASONRY_ITEM_INITIAL, animate: MASONRY_ITEM_ANIMATE, exit: MASONRY_ITEM_EXIT, transition: {
                 ...MASONRY_ITEM_TRANSITION_BASE,
                 delay: index * 0.05,
             }, children: child }, child.key || index));

package/dist/components/core/Masonry/Masonry.theme.js

@@ -2,14 +2,20 @@
  * Default theme for the Masonry component
  */
 const masonryTheme = {
-    // Container styles
+    // Container styles. No `overflow-hidden`: children are absolutely positioned within an
+    // explicitly-set height and columns are sized to fit the width, so nothing overflows the
+    // box except each card's elevation shadow/ring — clipping that sheared the edges off the
+    // left-column and bottom-row cards. Their layout footprint is already accounted for.
     container: {
-        base: "relative w-full overflow-hidden",
+        base: "relative w-full",
         loading: "opacity-70 pointer-events-none",
     },
-    // Item wrapper styles (auto-applied to each child wrapper)
+    // Item wrapper styles (auto-applied to each child wrapper). Structurally neutral —
+    // just the absolutely-positioned layout box. It must NOT paint a border/radius or clip:
+    // the child (Card, image, etc.) owns its own frame, and a baked-in border doubled up with
+    // the child's own edge (and its overflow-hidden clipped the child's elevation shadow).
     item: {
-        base: "relative rounded-[var(--form-radius)] border border-[var(--color-border)] overflow-hidden",
+        base: "relative",
     },
     // Animation classes
     animations: {

package/dist/components/core/MenuItem/MenuItem.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -9,12 +10,28 @@ import { menuItemTheme } from './MenuItem.theme.js';
  * Handles visual layout, base styling, keyboard activation, and focus tracking.
  * Context-specific behavior (selection, checked state) is handled by consumers.
  */
-const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
+const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, selected = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const theme = {
         ...menuItemTheme,
         ...themeOverrides,
     };
+    // Resolve state to plain utility classes (not data-[state] variants) so a
+    // consumer `className` always wins the cascade. See MenuItem.theme.ts.
+    const stateKey = disabled ? "disabled" : selected ? "selected" : "default";
+    // Expose `selected` to assistive tech via the ARIA attribute that actually
+    // matches this item's role, instead of leaving it as a purely visual
+    // `data-selected` hook. Per the ARIA spec: `option` items use
+    // `aria-selected`; `menuitemcheckbox`/`menuitemradio` items use
+    // `aria-checked`. Plain `menuitem` has no selected/checked ARIA state at
+    // all, so nothing is added for it — a consumer that needs that semantic
+    // should render the item with one of the checkable/selectable roles
+    // (see DropdownItem, which already switches `role` based on selectionMode).
+    const ariaSelectionProps = role === "option"
+        ? { "aria-selected": selected }
+        : role === "menuitemcheckbox" || role === "menuitemradio"
+            ? { "aria-checked": selected }
+            : {};
     const handleClick = useCallback(() => {
         if (disabled)
             return;
@@ -26,7 +43,11 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
             handleClick();
         }
     }, [handleClick]);
-    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && jsx("div", { className: theme.subtitleStyle, children: subtitle })] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
+    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, ...ariaSelectionProps, "data-focused": isFocused, "data-disabled": disabled, "data-selected": selected, className: cn(theme.baseStyle, theme.states[stateKey], 
+        // Focus fill composites over any state (incl. selected) — see focusedStyle note.
+        isFocused && !disabled && theme.focusedStyle, isDanger && theme.dangerStyle, theme.focusStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
+                        ? jsx("div", { className: theme.subtitleStyle, children: subtitle })
+                        : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
 });
 MenuItem.displayName = "MenuItem";
 

package/dist/components/core/MenuItem/MenuItem.theme.d.ts

@@ -1,5 +1,11 @@
 export interface MenuItemTheme {
     baseStyle: string;
+    states: {
+        default: string;
+        selected: string;
+        disabled: string;
+    };
+    focusedStyle: string;
     dangerStyle: string;
     focusStyle: string;
     subtitleStyle: string;

package/dist/components/core/MenuItem/MenuItem.theme.js

@@ -1,25 +1,32 @@
 const menuItemTheme = {
-    // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-2.5 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
-        "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
-        "data-[focused=true]:bg-[var(--color-background-secondary)] " +
-        "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
-        "mb-px last-of-type:mb-0 " +
-        "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none " +
-        // Dark mode
-        " " +
-        " " +
-        "dark:data-[focused=true]:bg-[var(--color-background-secondary)] " +
-        "dark:hover:bg-[var(--color-neutral-700)] " +
-        "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
+    // Structural base only — layout, spacing, radius, transition. No state colors:
+    // those are resolved in JS (see `states`) so a consumer `className` always wins.
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 mb-px last-of-type:mb-0",
+    // State styling resolved in JS to plain utility classes so `className` overrides
+    // win (data-[state] variants carry attribute-selector specificity and can't be
+    // overridden by a plain className — see Button.theme.ts / NavItem.theme.ts for
+    // the same rationale). data-* attributes are still emitted as hooks for
+    // consumer CSS + tests, just not used for styling here.
+    states: {
+        default: "text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]",
+        selected: "bg-[var(--color-primary)]/5 text-[var(--color-primary)] " +
+            "dark:bg-white/10 dark:text-[var(--color-text-primary)]",
+        disabled: "opacity-60 cursor-not-allowed pointer-events-none",
+    },
+    // Keyboard-focus highlight (item received roving focus). The shared interaction tint
+    // layered as a bg-IMAGE so it composites OVER the current fill instead of replacing it —
+    // so a focused item that is ALSO selected reads as "cursor is here" on top of its selected
+    // tint (a plain bg-color would swap the selected tint out and look dimmer). Same overlay
+    // trick the form controls use for hover (see CLAUDE.md §9).
+    focusedStyle: "bg-[image:linear-gradient(var(--color-surface-hover),var(--color-surface-hover))]",
     // Danger item styling (e.g., Delete actions)
-    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white " +
-        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-white",
+    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
+        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
     // Focus visible styling for keyboard navigation
-    focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
+    focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)] " +
+        "dark:focus-visible:ring-[var(--color-primary-400)]",
     // Description text below the label
-    subtitleStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0.5 truncate",
 };
 
 export { menuItemTheme };

package/dist/components/core/MenuItem/MenuItem.types.d.ts

@@ -10,13 +10,15 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Icon or element at the end (right side) */
     endContent?: ReactNode;
     /** Secondary text below the label */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /** Keyboard shortcut display */
     shortcut?: ReactNode;
     /** Whether the item is disabled */
     disabled?: boolean;
     /** Whether the item has danger/destructive styling */
     isDanger?: boolean;
+    /** Whether the item is in a selected state (drives selected styling) */
+    selected?: boolean;
     /** Called on click or Enter/Space keyboard activation */
     onActivate?: () => void;
     /** Theme overrides for styling */

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

@@ -2,8 +2,17 @@ import React from "react";
 import { MessageProps } from "./Message.types";
 export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> & {
     Avatar: React.ForwardRefExoticComponent<import("./MessageAvatar").MessageAvatarComponentProps & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<import("./MessageContent").MessageContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./MessageBody").MessageBodyProps & React.RefAttributes<HTMLDivElement>>;
     Actions: React.ForwardRefExoticComponent<import("./MessageActions").MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
     Timestamp: React.ForwardRefExoticComponent<import("./MessageTimestamp").MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;
     List: React.ForwardRefExoticComponent<import("./MessageList.types").MessageListProps & React.RefAttributes<import("..").ScrollAreaRef>>;
+    Status: React.FC<import("./MessageStatusIndicator").MessageStatusIndicatorProps>;
+    SenderName: React.FC<import("./MessageSenderName").MessageSenderNameProps>;
+    File: React.FC<import("./MessageFile").MessageFileProps>;
+    Image: React.FC<import("./MessageImage").MessageImageProps>;
+    Audio: React.FC<import("./MessageAudio").MessageAudioProps>;
+    Link: React.FC<import("./MessageLink").MessageLinkProps>;
+    Reply: React.FC<import("./MessageReply").MessageReplyProps>;
+    Reactions: React.FC<import("./MessageReactions").MessageReactionsProps>;
+    DateDivider: React.FC<import("./MessageDateDivider").MessageDateDividerProps>;
 };

package/dist/components/core/Message/Message.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -9,11 +10,20 @@ import { motion } from 'motion/react';
 import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { MessageContext } from './MessageContext.js';
 import { MessageAvatar } from './MessageAvatar.js';
-import { MessageContent } from './MessageContent.js';
+import { MessageBody } from './MessageBody.js';
 import { MessageActions } from './MessageActions.js';
 import { MessageTimestamp } from './MessageTimestamp.js';
 import { MessageList } from './MessageList.js';
 import { TypeWriter } from './TypeWriter.js';
+import { MessageStatusIndicator } from './MessageStatusIndicator.js';
+import { MessageSenderName } from './MessageSenderName.js';
+import { MessageFile } from './MessageFile.js';
+import { MessageImage } from './MessageImage.js';
+import { MessageAudio } from './MessageAudio.js';
+import { MessageLink } from './MessageLink.js';
+import { MessageReply } from './MessageReply.js';
+import { MessageReactions } from './MessageReactions.js';
+import { MessageDateDivider } from './MessageDateDivider.js';
 
 const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timestamp, actions, timestampStyle, streamingIndicatorStyle, actionsContainerStyle, variant, }) => {
     if (isStreaming) {
@@ -32,7 +42,26 @@ const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timesta
                         ? timestamp
                         : timestamp.toISOString(), className: "select-none", children: formatTimestamp(timestamp) }) })), actions && jsx("div", { className: cn(actionsContainerStyle), children: actions })] }));
 };
-const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, content, timestamp, avatar, showTimestamp = false, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, className, theme: customTheme = {}, children, ...props }, ref) => {
+/**
+ * Renders attachment sub-components based on attachment type
+ */
+const AttachmentsList = ({ attachments, containerClassName }) => {
+    return (jsx("div", { className: cn(messageTheme.attachmentContainerStyle, containerClassName), children: attachments.map((attachment, index) => {
+            switch (attachment.type) {
+                case "file":
+                    return (jsx(MessageFile, { name: attachment.name, url: attachment.url, size: attachment.size }, index));
+                case "image":
+                    return (jsx(MessageImage, { src: attachment.url, thumbnailUrl: attachment.thumbnailUrl, name: attachment.name, size: attachment.size }, index));
+                case "audio":
+                    return (jsx(MessageAudio, { name: attachment.name, duration: attachment.duration }, index));
+                case "link":
+                    return (jsx(MessageLink, { url: attachment.url, thumbnailUrl: attachment.thumbnailUrl, title: attachment.name, description: attachment.description, domain: attachment.domain }, index));
+                default:
+                    return null;
+            }
+        }) }));
+};
+const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, content, timestamp, avatar, showTimestamp = false, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, status, readAt, onRetry, attachments, reactions, onReactionClick, replyTo, sender, isGrouped, className, theme: customTheme = {}, children, ...props }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     // Determine the variant: role takes precedence over variant prop
     let variant;
@@ -57,7 +86,9 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
         variant,
         isStreaming,
         typingSpeed,
-    }), [role, variant, isStreaming, typingSpeed]);
+        status,
+        isGrouped,
+    }), [role, variant, isStreaming, typingSpeed, status, isGrouped]);
     const messageContent = content;
     // Determine if we should show default actions
     const shouldShowDefaultActions = showActions !== false &&
@@ -88,7 +119,7 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     // Backward compatibility
     variant === "sender" && customTheme.senderTimestampStyle, variant === "receiver" && customTheme.receiverTimestampStyle, variant === "system" && customTheme.systemTimestampStyle);
     // Build default action buttons if needed
-    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx(Button, { variant: "link", color: "neutral", size: "sm", onClick: onCopy, "aria-label": "Copy message", className: "opacity-40 hover:opacity-100", children: jsx(DocumentDuplicateIcon, { className: "size-4" }) })), onRegenerate && (jsx(Button, { variant: "link", color: "neutral", size: "sm", onClick: onRegenerate, "aria-label": "Regenerate response", className: "opacity-40 hover:opacity-100", children: jsx(ArrowPathIcon, { className: "size-4" }) }))] })) : undefined;
+    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: onCopy, "aria-label": "Copy message", className: "opacity-40 hover:opacity-100", children: jsx(DocumentDuplicateIcon, { className: "size-4" }) })), onRegenerate && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: onRegenerate, "aria-label": "Regenerate response", className: "opacity-40 hover:opacity-100", children: jsx(ArrowPathIcon, { className: "size-4" }) }))] })) : undefined;
     // Use custom actions if provided, otherwise use default actions
     const finalActions = actions !== null && actions !== void 0 ? actions : defaultActionButtons;
     // Use TypeWriter for streaming receiver/assistant messages with string content (props API)
@@ -98,18 +129,29 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     const renderedContent = shouldAnimate ? (jsx(TypeWriter, { text: messageContent, speed: typingSpeed, enabled: true, className: "break-words" })) : (messageContent);
     // System messages render differently (centered, no avatar)
     if (variant === "system") {
-        return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-sm", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
+        return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-base", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
     }
-    return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
+    const showAvatar = avatar && !isGrouped;
+    const showSenderName = (sender === null || sender === void 0 ? void 0 : sender.name) && variant === "receiver" && !isGrouped;
+    return (jsxs("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: [jsxs("div", { className: containerStyle, children: [showAvatar ? (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, size: "xs" }) })) : isGrouped && avatar ? (jsx("div", { className: "flex-shrink-0 size-8" })) : null, jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [showSenderName && jsx(MessageSenderName, { name: sender.name }), jsxs("div", { className: bubbleStyle, children: [replyTo && (jsx(MessageReply, { name: replyTo.name, content: replyTo.content, avatar: replyTo.avatar })), typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent), attachments && attachments.length > 0 && (jsx(AttachmentsList, { attachments: attachments, containerClassName: customTheme.attachmentContainerStyle }))] }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant }), status && variant === "sender" && (jsx(MessageStatusIndicator, { status: status, readAt: readAt, onRetry: onRetry, className: cn(variant === "sender" ? "self-end mr-1" : "self-start ml-1", customTheme.statusStyle) }))] })] }), reactions && reactions.length > 0 && (jsx("div", { className: cn("mt-0.5", avatar && !isGrouped ? "ml-11" : "", variant === "sender" ? "flex justify-end mr-1" : ""), children: jsx(MessageReactions, { reactions: reactions, onReactionClick: onReactionClick, className: customTheme.reactionsContainerStyle }) }))] }));
 });
 MessageRoot.displayName = "Message";
 // Attach compound components
 const Message = Object.assign(MessageRoot, {
     Avatar: MessageAvatar,
-    Content: MessageContent,
+    Body: MessageBody,
     Actions: MessageActions,
     Timestamp: MessageTimestamp,
     List: MessageList,
+    Status: MessageStatusIndicator,
+    SenderName: MessageSenderName,
+    File: MessageFile,
+    Image: MessageImage,
+    Audio: MessageAudio,
+    Link: MessageLink,
+    Reply: MessageReply,
+    Reactions: MessageReactions,
+    DateDivider: MessageDateDivider,
 });
 
 export { Message };

package/dist/components/core/Message/Message.theme.js

@@ -11,7 +11,7 @@ const messageTheme = {
     variants: {
         sender: {
             containerModifier: "flex-row-reverse", // Reverse direction for right alignment
-            bubbleStyle: "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
+            bubbleStyle: "bg-[var(--color-neutral-900)] text-[var(--color-neutral-100)] " +
                 "rounded-tr-xs  " +
                 // Dark mode - slightly darker gradient for better contrast
                 " ",
@@ -39,6 +39,28 @@ const messageTheme = {
     streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs " +
         "dark:text-[var(--color-neutral-500)]",
     actionsContainerStyle: "flex items-start gap-3",
+    // Status styles
+    statusStyle: "flex items-center gap-1 text-xs mt-1",
+    statusSending: "text-[var(--color-text-placeholder)] animate-pulse",
+    statusSent: "text-[var(--color-text-placeholder)]",
+    statusDelivered: "text-[var(--color-text-placeholder)]",
+    statusRead: "text-[var(--color-primary)]",
+    statusFailed: "text-[var(--color-danger)]",
+    // Attachment styles
+    attachmentContainerStyle: "flex flex-col gap-2 mt-2",
+    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-xs",
+    imageStyle: "rounded-lg overflow-hidden max-w-xs",
+    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-xs",
+    linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-xs max-w-xs",
+    // Reactions styles
+    reactionsContainerStyle: "flex flex-wrap items-center gap-1.5 mt-1.5",
+    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-surface-hover)]",
+    reactionPillActiveStyle: "border-[var(--color-primary-200)] bg-[var(--color-primary-50)] text-[var(--color-primary)]",
+    // Reply/quote styles
+    replyStyle: "border-l-2 border-[var(--color-border)] pl-2.5 mb-2 text-xs text-[var(--color-text-muted)]",
+    // Grouping styles
+    dateDividerStyle: "flex items-center gap-3 text-xs text-[var(--color-text-muted)] select-none",
+    senderNameStyle: "text-xs font-medium text-[var(--color-text-secondary)] mb-1 pl-1",
 };
 
 export { messageTheme };