@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.33

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

@@ -7,6 +7,12 @@ export interface CardTheme {
     subtitleStyle: string;
     bodyStyle: string;
     footerStyle: string;
+    /** Applied on top of `baseStyle` when `inset` — sinks the frame to a tray. */
+    baseStyleInset: string;
+    /** Applied on top of `headerStyle` when `inset` — collapses the seam to the panel. */
+    headerStyleInset: string;
+    /** Replaces `bodyStyle` when `inset` — the floating panel. */
+    bodyStyleInset: string;
 }
 export interface CardThemeOverrides {
     baseStyle?: string;
@@ -15,6 +21,9 @@ export interface CardThemeOverrides {
     subtitleStyle?: string;
     bodyStyle?: string;
     footerStyle?: string;
+    baseStyleInset?: string;
+    headerStyleInset?: string;
+    bodyStyleInset?: string;
 }
 export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /**
@@ -53,6 +62,17 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     elevation?: SurfaceElevation;
     /** `false` opts out of the relative lift — paints at the card's base rung. */
     lift?: boolean;
+    /**
+     * Sink the card frame to a recessed tray and float the body as its own panel.
+     * Header and footer stay on the tray; body content remains flush with them.
+     *
+     * Works in both API modes — the root broadcasts it, so a compound
+     * `<Card.Body>` picks it up without being told twice. Has no effect on raw
+     * children (no slot-props and no `Card.Body`), since there is no body region
+     * to turn into a panel.
+     * @default false
+     */
+    inset?: boolean;
     /**
      * Custom class name for the card
      */

package/dist/components/core/Card/CardBody.js

@@ -1,10 +1,18 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
+import { useCardContext } from './CardContext.js';
+import { useSurfaceLevel, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
 const CardBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(cardTheme.bodyStyle, className), ...props, children: children }));
+    const { inset } = useCardContext();
+    // The rung the root already computed and re-provided. In inset mode the frame gives
+    // that rung up to sink to a tray, so the panel is what paints it — bg, hairline ring
+    // and --field-fill all land here instead of on the frame.
+    const surfaceLevel = useSurfaceLevel();
+    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(inset && surfaceClasses(surfaceLevel), inset ? cardTheme.bodyStyleInset : cardTheme.bodyStyle, className), ...props, children: children }));
 });
 CardBody.displayName = 'Card.Body';
 

package/dist/components/core/Card/CardContext.d.ts

@@ -0,0 +1,13 @@
+export interface CardContextValue {
+    /** `true` when the root Card is in inset mode (sunken tray + floating body panel). */
+    inset: boolean;
+}
+/**
+ * Lives in its own module (not `Card.tsx`) so the sub-components can read it without
+ * importing the root — the zero-circular-dependency rule in CLAUDE.md §23.
+ *
+ * Defaults to `inset: false` so a bare `<Card.Body>` used outside a `<Card>` (which the
+ * existing API allows) keeps rendering exactly as it does today.
+ */
+export declare const CardContext: import("react").Context<CardContextValue>;
+export declare const useCardContext: () => CardContextValue;

package/dist/components/core/Card/CardContext.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+/**
+ * Lives in its own module (not `Card.tsx`) so the sub-components can read it without
+ * importing the root — the zero-circular-dependency rule in CLAUDE.md §23.
+ *
+ * Defaults to `inset: false` so a bare `<Card.Body>` used outside a `<Card>` (which the
+ * existing API allows) keeps rendering exactly as it does today.
+ */
+const CardContext = createContext({ inset: false });
+const useCardContext = () => useContext(CardContext);
+
+export { CardContext, useCardContext };

package/dist/components/core/Card/CardHeader.js

@@ -1,10 +1,13 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
+import { useCardContext } from './CardContext.js';
 
 const CardHeader = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(cardTheme.headerStyle, className), ...props, children: children }));
+    const { inset } = useCardContext();
+    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(cardTheme.headerStyle, inset && cardTheme.headerStyleInset, className), ...props, children: children }));
 });
 CardHeader.displayName = 'CardHeader';
 

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

@@ -3,8 +3,9 @@ import { dropdownTheme } from '../Dropdown/Dropdown.theme.js';
 const contextMenuTheme = {
     // Inherit all Dropdown styles for consistency
     ...dropdownTheme,
-    // Content uses the same styling as Dropdown menu
-    contentStyle: dropdownTheme.menuStyle.replace("flex", "flex-col p-1"),
+    // Content uses the same styling as Dropdown menu. The padding is the token, not a
+    // literal p-1 — it also feeds --dropdown-inner-radius (the first/last row's corner).
+    contentStyle: dropdownTheme.menuStyle.replace("flex", "flex-col p-[var(--dropdown-padding)]"),
     // Items use exact same styling as Dropdown items.
     itemStyle: dropdownTheme.itemBaseStyle,
     // Checked tick — sits in the leading icon slot (same gutter as startContent icons),
@@ -17,7 +18,7 @@ const contextMenuTheme = {
     // bg + shadow come from the relative-elevation engine (surfaceClasses) at
     // runtime so the submenu lifts above its parent menu; keep blur + border here.
     subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] ml-1 " +
-        "backdrop-blur-md flex flex-col p-1 focus:outline-none",
+        "backdrop-blur-md flex flex-col p-[var(--dropdown-padding)] focus:outline-none",
     // Separator - horizontal divider (--color-border flips for dark on its own)
     separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1",
     // Label - section header (matches Dropdown section title)

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

@@ -16,6 +16,14 @@ export interface SubMenuContextValue {
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
     triggerRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Cancel a pending close. The trigger and the submenu body are separate DOM
+     * subtrees (the body portals to `document.body`), so hovering either one has to
+     * call this to survive the hand-off across the gap between them.
+     */
+    cancelClose: () => void;
+    /** Start the short grace period before the submenu closes. */
+    scheduleClose: () => void;
 }
 export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
@@ -54,7 +62,6 @@ export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivE
 }
 export interface ContextMenuSubProps {
     children: ReactNode;
-    className?: string;
 }
 export interface ContextMenuSubTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;

package/dist/components/core/ContextMenu/ContextMenuSub.d.ts

@@ -1,6 +1,16 @@
 import React from "react";
 import { ContextMenuSubProps } from "./ContextMenu.types";
 /**
- * ContextMenuSub - Wrapper for nested submenu with hover logic
+ * ContextMenuSub - Wrapper for nested submenu with hover logic.
+ *
+ * Renders NO element of its own: the sub-trigger has to stay a direct sibling of the
+ * surrounding ContextMenu.Item rows, because MenuItem expresses its corner radius with
+ * `first:`/`last:` variants and those resolve against DOM siblings. Wrapping the trigger
+ * made it both the first AND the last child of that wrapper, so a mid-list sub-trigger
+ * rounded all four corners at --radius-base instead of the flat 4px its neighbours use.
+ *
+ * Hover coordination therefore lives here instead of on a wrapper's mouse handlers: the
+ * trigger and the (portalled) submenu body each cancel a pending close on enter and
+ * schedule one on leave, so the pointer can cross the gap between them.
  */
 export declare const ContextMenuSub: React.FC<ContextMenuSubProps>;

package/dist/components/core/ContextMenu/ContextMenuSub.js

@@ -1,40 +1,53 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useMemo } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { SubMenuContext } from './ContextMenuContext.js';
 
+/** Grace period before a hovered-away submenu closes, in ms. */
+const CLOSE_DELAY = 150;
 /**
- * ContextMenuSub - Wrapper for nested submenu with hover logic
+ * ContextMenuSub - Wrapper for nested submenu with hover logic.
+ *
+ * Renders NO element of its own: the sub-trigger has to stay a direct sibling of the
+ * surrounding ContextMenu.Item rows, because MenuItem expresses its corner radius with
+ * `first:`/`last:` variants and those resolve against DOM siblings. Wrapping the trigger
+ * made it both the first AND the last child of that wrapper, so a mid-list sub-trigger
+ * rounded all four corners at --radius-base instead of the flat 4px its neighbours use.
+ *
+ * Hover coordination therefore lives here instead of on a wrapper's mouse handlers: the
+ * trigger and the (portalled) submenu body each cancel a pending close on enter and
+ * schedule one on leave, so the pointer can cross the gap between them.
  */
-const ContextMenuSub = ({ children, className, }) => {
+const ContextMenuSub = ({ children }) => {
     const [isOpen, setIsOpen] = useState(false);
     const triggerRef = useRef(null);
-    const hoverTimeoutRef = useRef(null);
-    const handleOpenChange = useCallback((value) => {
-        setIsOpen(value);
-    }, []);
-    // Handle mouse enter - clear any close timeout
-    const handleMouseEnter = useCallback(() => {
-        if (hoverTimeoutRef.current) {
-            clearTimeout(hoverTimeoutRef.current);
-            hoverTimeoutRef.current = null;
+    const closeTimeoutRef = useRef(null);
+    const cancelClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
         }
     }, []);
-    // Handle mouse leave - close submenu after delay
-    const handleMouseLeave = useCallback(() => {
-        if (hoverTimeoutRef.current) {
-            clearTimeout(hoverTimeoutRef.current);
-        }
-        hoverTimeoutRef.current = setTimeout(() => {
+    const scheduleClose = useCallback(() => {
+        cancelClose();
+        closeTimeoutRef.current = setTimeout(() => {
+            closeTimeoutRef.current = null;
             setIsOpen(false);
-        }, 150);
-    }, []);
+        }, CLOSE_DELAY);
+    }, [cancelClose]);
+    const handleOpenChange = useCallback((value) => {
+        cancelClose();
+        setIsOpen(value);
+    }, [cancelClose]);
+    useEffect(() => cancelClose, [cancelClose]);
     const contextValue = useMemo(() => ({
         isOpen,
         onOpenChange: handleOpenChange,
         triggerRef,
-    }), [isOpen, handleOpenChange, triggerRef]);
-    return (jsx(SubMenuContext.Provider, { value: contextValue, children: jsx("div", { className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: children }) }));
+        cancelClose,
+        scheduleClose,
+    }), [isOpen, handleOpenChange, cancelClose, scheduleClose]);
+    return (jsx(SubMenuContext.Provider, { value: contextValue, children: children }));
 };
 ContextMenuSub.displayName = "ContextMenuSub";
 

package/dist/components/core/ContextMenu/ContextMenuSubBody.js

@@ -15,7 +15,7 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
     // Relative elevation: lift above the parent menu surface (overlay base = 5).
     const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const { theme } = useContextMenuContext();
-    const { isOpen, triggerRef, onOpenChange } = useSubMenuContext();
+    const { isOpen, triggerRef, onOpenChange, cancelClose, scheduleClose } = useSubMenuContext();
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
     const localRef = useRef(null);
@@ -88,7 +88,18 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
         },
     };
     // Extract DOM props to avoid conflicts
-    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, onMouseEnter, onMouseLeave, ...domProps } = props;
+    // The body portals to <body>, so it is not a DOM descendant of the trigger: entering it
+    // has to cancel the close the trigger scheduled when the pointer left, and leaving it
+    // has to schedule one. Consumer handlers are composed, not replaced.
+    const handleMouseEnter = useCallback((e) => {
+        cancelClose();
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    }, [cancelClose, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        scheduleClose();
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    }, [scheduleClose, onMouseLeave]);
     // Detect dark mode from document
     const isDarkMode = typeof document !== "undefined" &&
         (document.documentElement.classList.contains("dark") ||
@@ -103,7 +114,7 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
                     type: "spring",
                     stiffness: 500,
                     damping: 30,
-                }, "data-state": isOpen ? "open" : "closed", "data-flikkui-portal": "", ...domProps, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) })) }));
+                }, "data-state": isOpen ? "open" : "closed", "data-flikkui-portal": "", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...domProps, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) })) }));
     // Always use portal for submenus
     const portalTarget = isClient ? document.body : null;
     return portalTarget ? createPortal(submenuContent, portalTarget) : null;

package/dist/components/core/ContextMenu/ContextMenuSubTrigger.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useCallback } from 'react';
+import React__default, { useRef, useCallback, useEffect } from 'react';
 import { CaretRight } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.js';
@@ -10,21 +10,34 @@ import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.j
  */
 const ContextMenuSubTrigger = React__default.forwardRef(({ children, className, disabled = false, startContent, ...props }, ref) => {
     const { theme } = useContextMenuContext();
-    const { isOpen, onOpenChange, triggerRef } = useSubMenuContext();
+    const { isOpen, onOpenChange, triggerRef, cancelClose, scheduleClose } = useSubMenuContext();
     const hoverTimeoutRef = useRef(null);
+    const clearOpenTimeout = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+    }, []);
     // Handle mouse enter - open submenu after short delay
     const handleMouseEnter = useCallback(() => {
         if (disabled)
             return;
-        // Clear any existing timeout
-        if (hoverTimeoutRef.current) {
-            clearTimeout(hoverTimeoutRef.current);
-        }
+        // Re-entering the trigger cancels a close scheduled by leaving the submenu body.
+        cancelClose();
+        clearOpenTimeout();
         // Open submenu after short delay
         hoverTimeoutRef.current = setTimeout(() => {
+            hoverTimeoutRef.current = null;
             onOpenChange(true);
         }, 150);
-    }, [disabled, onOpenChange]);
+    }, [disabled, onOpenChange, cancelClose, clearOpenTimeout]);
+    // Handle mouse leave - hand off to the submenu body, which cancels the close if the
+    // pointer lands there; otherwise the submenu closes after the grace period.
+    const handleMouseLeave = useCallback(() => {
+        clearOpenTimeout();
+        scheduleClose();
+    }, [clearOpenTimeout, scheduleClose]);
+    useEffect(() => clearOpenTimeout, [clearOpenTimeout]);
     // Handle keyboard navigation
     const handleKeyDown = useCallback((e) => {
         if (disabled)
@@ -54,7 +67,7 @@ const ContextMenuSubTrigger = React__default.forwardRef(({ children, className,
             ref.current = el;
         }
     }, [ref, triggerRef]);
-    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsx("span", { className: "flex-1 truncate", children: children }), jsx(CaretRight, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", weight: "bold" })] }));
+    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onKeyDown: handleKeyDown, ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsx("span", { className: "flex-1 truncate", children: children }), jsx(CaretRight, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", weight: "bold" })] }));
 });
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 

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

@@ -1,6 +1,6 @@
 const dragDropTheme = {
-    draggableStyle: 'select-none rounded-[var(--radius-base)] transition-all duration-200',
-    droppableStyle: 'min-h-[120px] border-2 border-dashed border-[var(--color-border)] rounded-[var(--radius-base)] p-4 transition-all duration-200 bg-[var(--color-background)]',
+    draggableStyle: 'select-none rounded-[var(--radius-base)] transition-all duration-[var(--motion-duration-base)]',
+    droppableStyle: 'min-h-[120px] border-2 border-dashed border-[var(--color-border)] rounded-[var(--radius-base)] p-4 transition-all duration-[var(--motion-duration-base)] bg-[var(--color-background)]',
     dragOverStyle: 'border-[var(--color-primary)] bg-[var(--color-primary-50)]',
     dragPreviewStyle: 'opacity-60',
 };

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

@@ -10,7 +10,7 @@ const drawerTheme = {
     inner: "h-full flex flex-col",
     header: "flex items-start justify-between px-[var(--drawer-px)] py-[var(--drawer-py)] border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
-    title: "text-[length:var(--drawer-title-size)] font-semibold leading-6 text-[var(--color-text-primary)]",
+    title: "text-[length:var(--drawer-title-size)]/[var(--drawer-title-line-height)] font-semibold text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto px-[var(--drawer-px)] py-[var(--drawer-py)]",
     // Footer's vertical padding is deliberately lighter than header/body —

package/dist/components/core/Drawer/DrawerHeader.js

@@ -3,7 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './DrawerContext.js';
 import { Button } from '../Button/Button.js';
-import 'react';
 import { X } from '@phosphor-icons/react';
 
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -141,12 +141,22 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
             ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
-        // Ignore clicks that land inside any FlikkUI overlay portal (a nested
-        // Select/Tooltip/Dropdown/Popover renders to document.body, outside our
-        // menu's own DOM subtree — without this it would count as an outside
-        // click and dismiss the menu). See the `data-flikkui-portal` convention
-        // (CLAUDE.md §11) — mirrors PopoverBody's bail.
-        if ((_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]")) {
+        // Ignore clicks that land inside a DESCENDANT FlikkUI overlay portal (a
+        // nested Select/Tooltip/Dropdown/Popover renders to document.body,
+        // outside our menu's own DOM subtree — without this it would count as
+        // an outside click and dismiss the menu). See the `data-flikkui-portal`
+        // convention (CLAUDE.md §11) — mirrors PopoverBody's bail.
+        //
+        // The bail only protects against a DESCENDANT portal, not an ANCESTOR
+        // one: when this menu's own trigger lives inside another overlay (e.g.
+        // a Dropdown opened from inside a Modal), a click on that host
+        // overlay's body content also matches `closest("[data-flikkui-portal]")`
+        // — it finds the Modal's portal wrapper, which contains our trigger.
+        // That's a real outside click and must still close the menu. Only bail
+        // when the matched portal does NOT contain our trigger — i.e. it's a
+        // portal we opened ourselves, not the one hosting us.
+        const portalEl = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]");
+        if (portalEl && !portalEl.contains(triggerRef.current)) {
             return;
         }
         onOpenChange(false);
@@ -209,7 +219,12 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     });
     // Extract DOM props to avoid type conflicts with Framer Motion
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
-    const menuContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, className: cn("fixed z-50", surfaceClasses(surfaceLevel, { translucent: true }), theme.menuStyle, horizontal ? "flex-row p-1" : "flex-col p-1", className), style: {
+    const menuContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, className: cn("fixed z-50", surfaceClasses(surfaceLevel, { translucent: true }), theme.menuStyle, 
+            // --dropdown-padding (not a literal p-1): it also feeds
+            // --dropdown-inner-radius, which rounds the first/last row.
+            horizontal
+                ? "flex-row p-[var(--dropdown-padding)]"
+                : "flex-col p-[var(--dropdown-padding)]", className), style: {
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,

package/dist/components/core/Link/Link.js

@@ -14,7 +14,7 @@ import { cn } from '../../../utils/cn.js';
 // Resting link look (transparent; underline grows in on hover via the motion
 // span below). Kept minimal and open.
 const LINK_BASE = "relative inline-flex items-center justify-center gap-2 bg-transparent border-transparent cursor-pointer " +
-    "transition-colors duration-300 ease-in-out " +
+    "transition-colors duration-[var(--motion-duration-slow)] ease-in-out " +
     "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2";
 // Animated underline — a bottom-anchored line that scales in from the left on
 // hover/focus. `bg-current` inherits each color variant's text tint.

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

@@ -19,7 +19,7 @@ const masonryTheme = {
     },
     // Animation classes
     animations: {
-        transition: "transition-[left,top,width,height] duration-400 ease-in-out",
+        transition: "transition-[left,top,width,height] duration-[var(--motion-duration-slower)] ease-in-out",
         enter: "opacity-0 scale-95",
         exit: "opacity-100 scale-100",
     },

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

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { menuItemTheme } from './MenuItem.theme.js';
+import { Ripple } from '../shared/Ripple.js';
 
 /**
  * MenuItem - Shared base component for menu items used by Dropdown and ContextMenu.
@@ -47,7 +48,7 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
         // 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 }))] }));
+                        : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent })), jsx(Ripple, { disabled: disabled })] }));
 });
 MenuItem.displayName = "MenuItem";
 

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

@@ -1,7 +1,19 @@
 const menuItemTheme = {
     // 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",
+    //
+    // Radius: interior rows are a flat 4px; the first and last rows meet the panel's
+    // own corners, so they take --dropdown-inner-radius — the panel's radius minus its
+    // border and padding — which keeps their curve concentric with the panel's instead
+    // of bulging past it (same calc model as --segmented-inner-radius).
+    // 🔴 The first:/last: variants resolve against DOM SIBLINGS: any wrapper element
+    // around a row makes it both first and last of its own subtree and rounds all four
+    // corners (see ContextMenuSub, which renders no element for exactly this reason).
+    // 🔴 This assumes a --dropdown-radius panel. That holds for every host today —
+    // Mention's suggestion popover renders MenuItem rows too, and its panel's
+    // --form-dropdown-radius aliases --dropdown-radius for exactly that reason. A host
+    // that gives its panel a different radius has to re-derive this row radius with it.
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] cursor-pointer outline-none select-none first:rounded-t-[var(--dropdown-inner-radius)] last:rounded-b-[var(--dropdown-inner-radius)] rounded-[4px] transition-colors duration-[var(--motion-duration-slow)] 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

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

@@ -27,6 +27,8 @@ import { MessageDateDivider } from './MessageDateDivider.js';
 
 const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timestamp, actions, timestampStyle, streamingIndicatorStyle, actionsContainerStyle, variant, }) => {
     if (isStreaming) {
+        if (streamingIndicator === false)
+            return null;
         return (jsx("div", { className: cn("flex flex-row items-center gap-3 mt-1", variant === "receiver" ? "ml-2" : "mr-3"), children: jsx("div", { className: cn(timestampStyle, streamingIndicatorStyle), children: streamingIndicator || (jsxs(Fragment, { children: [jsx("span", { children: "Typing" }), jsx(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
                                 duration: 1.5,
                                 repeat: Infinity,

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

@@ -46,13 +46,13 @@ const messageTheme = {
     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",
+    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] 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",
+    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] 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)]",
+    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] 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)]",

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) with premium spring
+ * Restrained scale + lift with a matched, responsive exit.
  */
 export declare const modalContentAnimations: Variants;

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

@@ -1,21 +1,39 @@
 "use client";
 import '../../../theme/ThemeContext.js';
 import '../../../theme/SurfaceContext.js';
-import { springs, overlayBackdropAnimations } from '../../../theme/animations.js';
+import { easings, springs } from '../../../theme/animations.js';
 
 /**
  * Modal overlay animation variants
  */
-const modalOverlayAnimations = overlayBackdropAnimations;
+const modalOverlayAnimations = {
+    initial: { opacity: 0 },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.28,
+            ease: easings.easeOut,
+        },
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.22,
+            delay: 0.05,
+            ease: easings.easeInOut,
+        },
+    },
+};
 /**
  * Modal content animation variants
- * Scale + slight slide (Vercel/Notion style) with premium spring
+ * Restrained scale + lift with a matched, responsive exit.
  */
 const modalContentAnimations = {
     initial: {
         opacity: 0,
-        scale: 0.98,
-        y: 12,
+        scale: 0.975,
+        y: 10,
+        transformOrigin: "50% 45%",
         willChange: "transform, opacity",
     },
     animate: {
@@ -23,17 +41,38 @@ const modalContentAnimations = {
         scale: 1,
         y: 0,
         transition: {
-            ...springs.smooth,
-            delay: 0.05,
+            opacity: {
+                duration: 0.18,
+                delay: 0.07,
+                ease: easings.easeOut,
+            },
+            scale: {
+                ...springs.premium,
+                delay: 0.07,
+            },
+            y: {
+                ...springs.premium,
+                delay: 0.07,
+            },
         },
     },
     exit: {
         opacity: 0,
-        scale: 0.98,
-        y: 8,
+        scale: 0.985,
+        y: 6,
         transition: {
-            duration: 0.15,
-            ease: [0.4, 0, 1, 1],
+            opacity: {
+                duration: 0.14,
+                ease: easings.easeIn,
+            },
+            scale: {
+                duration: 0.18,
+                ease: easings.easeInOut,
+            },
+            y: {
+                duration: 0.18,
+                ease: easings.easeInOut,
+            },
         },
     },
 };

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

@@ -54,7 +54,11 @@ const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, c
         titleId,
         subtitleId,
     }), [isOpen, onClose, size, isSizeToken, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, isSizeToken ? modalSizeVariants[size] : size, darkMode && "dark", className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(
+        // Opaque: the panel sits behind Overlay's dimming scrim, and the blur lives on
+        // that scrim — not here. At /80 the scrim tinted the panel gray instead of
+        // frosting anything. Matches Drawer, the other backdrop-grounded dialog.
+        surfaceClasses(surfaceLevel, { translucent: false, shadow: false }), theme.container, isSizeToken ? modalSizeVariants[size] : size, darkMode && "dark", className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) }) }));