@flikk/ui 1.0.0-beta.29 → 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,63 +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 arrangeItemsRef = useRef(() => { });
+    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)
@@ -77,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) => {
@@ -112,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`;
@@ -127,67 +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
+        const scheduleRelayout = () => {
+            // Debounce to prevent excessive recalculations
             clearTimeout(resizeTimeoutId);
-            resizeTimeoutId = setTimeout(() => {
-                calculateLayout();
-            }, 100);
-        });
-        // Fallback window resize handler for older browsers
-        const handleWindowResize = () => {
-            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]);
-    // Keep ref in sync so the MutationObserver always calls the latest version
-    useEffect(() => {
-        arrangeItemsRef.current = arrangeItems;
-    }, [arrangeItems]);
-    // 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(() => {
-                arrangeItemsRef.current();
-            }, 10);
+            timeoutId = setTimeout(() => relayoutRef.current(), 10);
         });
         if (containerRef.current) {
             observer.observe(containerRef.current, {
@@ -208,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';
@@ -18,6 +19,19 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
     // 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;
@@ -29,7 +43,9 @@ 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, "data-selected": selected, className: cn(theme.baseStyle, theme.states[stateKey], isFocused && !disabled && !selected && 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'
+    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 }))] }));
 });

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

@@ -13,8 +13,12 @@ const menuItemTheme = {
             "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) — same fill as hover.
-    focusedStyle: "bg-[var(--color-surface-hover)]",
+    // 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-[var(--color-danger-contrast)] " +
         "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",

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';
@@ -118,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)

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
@@ -5,7 +6,7 @@ import { messageTheme } from './Message.theme.js';
 import { PlayIcon } from '@heroicons/react/24/solid';
 
 const MessageAudio = ({ duration, name, onClick, className, }) => {
-    return (jsxs("div", { className: cn(messageTheme.audioStyle, className), children: [jsx("button", { onClick: onClick, className: "flex items-center justify-center size-8 rounded-full bg-[var(--color-primary)] text-white flex-shrink-0 cursor-pointer", "aria-label": name ? `Play ${name}` : "Play audio", type: "button", children: jsx(PlayIcon, { className: "size-4 ml-0.5" }) }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [name && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name })), duration && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: duration }))] })] }));
+    return (jsxs("div", { className: cn(messageTheme.audioStyle, className), children: [jsx("button", { onClick: onClick, className: "flex items-center justify-center size-8 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] flex-shrink-0 cursor-pointer", "aria-label": name ? `Play ${name}` : "Play audio", type: "button", children: jsx(PlayIcon, { className: "size-4 ml-0.5" }) }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [name && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name })), duration && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: duration }))] })] }));
 };
 
 export { MessageAudio };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Avatar } from '../Avatar/Avatar.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 const MessageContext = createContext(undefined);

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useCallback, useEffect } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
-import { Button } from '../Button/Button.js';
+import { Link } from '../Link/Link.js';
 import { ExclamationCircleIcon, CheckIcon, ClockIcon } from '@heroicons/react/16/solid';
 
 const DoubleCheck = ({ className }) => (jsxs("span", { className: cn("inline-flex items-center -space-x-2", className), children: [jsx(CheckIcon, { className: "size-3.5" }), jsx(CheckIcon, { className: "size-3.5" })] }));
@@ -39,7 +40,7 @@ const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
         },
     };
     const config = statusConfig[status];
-    return (jsxs("div", { className: cn(messageTheme.statusStyle, config.style, className), "aria-label": config.label, children: [config.icon, status === "failed" && onRetry && (jsx(Button, { variant: "link", color: "danger", size: "sm", onClick: onRetry, className: "text-xs px-0 h-auto", "aria-label": "Retry sending message", children: "Retry" }))] }));
+    return (jsxs("div", { className: cn(messageTheme.statusStyle, config.style, className), children: [jsx("span", { "aria-hidden": "true", className: "inline-flex items-center", children: config.icon }), jsx("span", { className: "sr-only", children: config.label }), status === "failed" && onRetry && (jsx(Link, { color: "danger", size: "sm", onClick: onRetry, className: "text-xs px-0 h-auto", "aria-label": "Retry sending message", children: "Retry" }))] }));
 };
 
 export { MessageStatusIndicator };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -24,7 +24,7 @@ export interface TypeWriterProps {
     className?: string;
 }
 /**
- * TypeWriter component that animates text word-by-word
+ * TypeWriter component that animates text word-by-word with a smooth fade-in
  *
  * @example
  * ```tsx

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

@@ -1,8 +1,17 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useTypewriter } from '../../../hooks/useTypewriter.js';
+import { useMemo, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
 
+const tokenize = (text) => {
+    if (!text)
+        return [];
+    // Split on word boundaries, preserving whitespace with each token
+    return text.match(/\S+\s*/g) || [];
+};
 /**
- * TypeWriter component that animates text word-by-word
+ * TypeWriter component that animates text word-by-word with a smooth fade-in
  *
  * @example
  * ```tsx
@@ -13,14 +22,70 @@ import { useTypewriter } from '../../../hooks/useTypewriter.js';
  * />
  * ```
  */
-const TypeWriter = ({ text, speed = 100, enabled = true, onComplete, className, }) => {
-    const { displayText } = useTypewriter({
-        text,
-        speed,
-        enabled,
-        onComplete,
+const TypeWriter = ({ text, speed = 80, enabled = true, onComplete, className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const animate = enabled && !shouldReduceMotion;
+    const tokens = useMemo(() => tokenize(text), [text]);
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const fireComplete = useCallback(() => {
+        var _a;
+        (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
+    }, []);
+    // How many tokens have already been committed (and thus already animated). Updated AFTER
+    // commit in the effect below — NEVER mutated during render, so a StrictMode/concurrent
+    // double-render can't mark tokens "already animated" on a throwaway pass and suppress the
+    // entrance animation.
+    const revealedCountRef = useRef(0);
+    // Token count at the first render; only these original tokens get a staggered delay
+    // (tokens appended later — e.g. while streaming — fade in immediately).
+    const initialTokensCountRef = useRef(null);
+    if (initialTokensCountRef.current === null) {
+        initialTokensCountRef.current = tokens.length;
+    }
+    // Detect a non-append text change (shrink or full replace) so reveal tracking resets and the
+    // new text animates from scratch. Reading the ref during render is pure; it's written below.
+    const prevTextRef = useRef(text);
+    const isReplacement = !text.startsWith(prevTextRef.current) || text.length < prevTextRef.current.length;
+    const revealedBefore = isReplacement ? 0 : revealedCountRef.current;
+    // Commit the reveal bookkeeping after paint (pure render, side-effects in the effect).
+    useEffect(() => {
+        if (isReplacement)
+            initialTokensCountRef.current = tokens.length;
+        revealedCountRef.current = tokens.length;
+        prevTextRef.current = text;
     });
-    return jsx("p", { className: className, children: displayText });
+    // Reduced-motion / disabled: nothing animates, so the entrance can't drive completion —
+    // signal it after commit instead, otherwise callers that chain on onComplete hang forever.
+    useEffect(() => {
+        if (!animate && tokens.length > 0)
+            fireComplete();
+    }, [animate, tokens.length, fireComplete]);
+    if (!animate) {
+        return jsx("p", { className: cn("whitespace-pre-wrap wrap-break-word", className), children: text });
+    }
+    // Convert speed (ms per word) to seconds for stagger delay
+    const staggerDelay = speed / 1000;
+    const lastIndex = tokens.length - 1;
+    return (jsx("p", { className: cn("whitespace-pre-wrap wrap-break-word", className), children: tokens.map((token, index) => {
+            var _a;
+            // A token already revealed on a previous commit renders statically (no re-animation).
+            const isNew = index >= revealedBefore;
+            if (!isNew) {
+                return (jsx("span", { style: { display: 'inline' }, children: token }, `${index}-${token}`));
+            }
+            // Apply the stagger delay only to tokens present at the initial render.
+            const delay = index < ((_a = initialTokensCountRef.current) !== null && _a !== void 0 ? _a : 0) ? index * staggerDelay : 0;
+            return (jsx(motion.span, { initial: { opacity: 0, filter: 'blur(3px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, transition: {
+                    duration: 0.25,
+                    delay: delay,
+                    ease: 'easeOut',
+                }, 
+                // The last (highest-index) token settles last — its completion marks the whole
+                // current batch as done. Fires once per newly-revealed batch, never before the
+                // animation has actually run.
+                onAnimationComplete: index === lastIndex ? fireComplete : undefined, style: { display: 'inline' }, children: token }, `${index}-${token}`));
+        }) }));
 };
 TypeWriter.displayName = 'TypeWriter';
 

package/dist/components/core/Modal/Modal.animations.d.ts

@@ -5,6 +5,6 @@ import { Variants } from 'motion/react';
 export declare const modalOverlayAnimations: Variants;
 /**
  * Modal content animation variants
- * Scale + slight slide (Vercel/Notion style)
+ * Scale + slight slide (Vercel/Notion style) with premium spring
  */
 export declare const modalContentAnimations: Variants;

package/dist/components/core/Modal/Modal.animations.js

@@ -1,35 +1,21 @@
+"use client";
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs, overlayBackdropAnimations } from '../../../theme/animations.js';
+
 /**
  * Modal overlay animation variants
  */
-const modalOverlayAnimations = {
-    initial: {
-        opacity: 0,
-        willChange: "opacity",
-    },
-    animate: {
-        opacity: 1,
-        transition: {
-            duration: 0.2,
-            ease: 'easeOut'
-        }
-    },
-    exit: {
-        opacity: 0,
-        transition: {
-            duration: 0.15,
-            ease: 'easeIn'
-        }
-    }
-};
+const modalOverlayAnimations = overlayBackdropAnimations;
 /**
  * Modal content animation variants
- * Scale + slight slide (Vercel/Notion style)
+ * Scale + slight slide (Vercel/Notion style) with premium spring
  */
 const modalContentAnimations = {
     initial: {
         opacity: 0,
         scale: 0.98,
-        y: 8,
+        y: 12,
         willChange: "transform, opacity",
     },
     animate: {
@@ -37,15 +23,14 @@ const modalContentAnimations = {
         scale: 1,
         y: 0,
         transition: {
-            duration: 0.2,
-            ease: [0.4, 0, 0.2, 1],
+            ...springs.smooth,
             delay: 0.05,
         },
     },
     exit: {
         opacity: 0,
         scale: 0.98,
-        y: 4,
+        y: 8,
         transition: {
             duration: 0.15,
             ease: [0.4, 0, 1, 1],