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

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

@@ -3,13 +3,12 @@ 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 { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, } = useDrawerContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-4" }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "mono", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(X, { className: "size-4" }) }))] }));
 };
 DrawerHeader.displayName = "Drawer.Header";
 

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

@@ -4,7 +4,9 @@ const dropdownTheme = {
     // Menu container - similar to Popover but with menu-specific styling.
     // bg + shadow come from the relative-elevation engine (surfaceClasses) at runtime so
     // a nested menu lifts above its host; keep the frosted blur + border + radius here.
-    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] backdrop-blur-md focus:outline-none flex disabled:cursor-not-allowed gap-0.5",
+    // max-w caps runaway labels so MenuItem's `truncate` can engage (an unbounded
+    // menu can never ellipsize — it just stretches to fit the longest row).
+    menuStyle: "min-w-[200px] max-w-[20rem] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] backdrop-blur-md focus:outline-none flex disabled:cursor-not-allowed gap-0.5",
     // Delegate item styles to shared MenuItem theme
     itemBaseStyle: menuItemTheme.baseStyle,
     itemDangerStyle: menuItemTheme.dangerStyle,

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useCallback } from 'react';
-import { CheckIcon } from '@heroicons/react/16/solid';
+import { Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useDropdownContext } from './DropdownContext.js';
 import { MenuItem } from '../MenuItem/MenuItem.js';
@@ -63,7 +63,7 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
             : "menuitem";
     // Build end content: user's endContent OR selection checkmark
     const resolvedEndContent = endContent ||
-        (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
+        (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(Check, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
     return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, selected: isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
             baseStyle: theme.itemBaseStyle,
             dangerStyle: theme.itemDangerStyle,

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/Dropdown/DropdownTrigger.js

@@ -13,8 +13,14 @@ import { useDropdownContext } from './DropdownContext.js';
  * `data-state` (idle/loading), clobbering the open flag — `aria-expanded` is the reliable hook.
  *
  * Injected FIRST in the className merge, so a consumer's own `className` on the trigger child
- * always wins (shadcn override model). `hover` + `dark:hover` are both set because a Button
- * variant declares each as a separate variant, and twMerge only dedupes matching ones.
+ * always wins (shadcn override model).
+ *
+ * 🔴 Applied ONLY to non-`Button` triggers. A `Button` is a complete, self-styled component
+ * (its own hover/active/variant states), and a *filled* Button hovers via a `brightness` filter
+ * rather than a `hover:bg-*`, so this translucent tint would have nothing to override and would
+ * replace the Button's solid fill on hover/open (a filled trigger going see-through). Buttons
+ * therefore keep their own styling; this convenience tint is for plain/custom trigger elements
+ * that have no interaction state of their own.
  */
 const triggerInteractionStyle = "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
     "dark:hover:bg-[var(--color-surface-hover)] " +
@@ -23,12 +29,17 @@ const triggerInteractionStyle = "hover:bg-[var(--color-surface-hover)] hover:tex
  * DropdownTrigger component - wraps the trigger element
  */
 const DropdownTrigger = ({ children, className }) => {
-    var _a;
+    var _a, _b;
     const { isOpen, onOpenChange, triggerRef, menuId } = useDropdownContext();
     const handleClick = useCallback(() => {
         onOpenChange(!isOpen);
     }, [isOpen, onOpenChange]);
     const childElement = children;
+    // A Button trigger brings its own complete interaction styling — don't inject
+    // the default tint over it (it would override a filled Button's fill). See the
+    // note on triggerInteractionStyle above.
+    const isButtonChild = React__default.isValidElement(childElement) &&
+        ((_a = childElement.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Button";
     // Clone the child element and add our props
     const trigger = React__default.cloneElement(childElement, {
         ref: (el) => {
@@ -56,8 +67,8 @@ const DropdownTrigger = ({ children, className }) => {
         "aria-controls": isOpen ? menuId : undefined,
         "data-state": isOpen ? "open" : "closed",
         // Default interaction style first → child's own className (and the Trigger's
-        // `className` prop) override it.
-        className: cn(triggerInteractionStyle, (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className),
+        // `className` prop) override it. Skipped for Button children (they self-style).
+        className: cn(!isButtonChild && triggerInteractionStyle, (_b = childElement.props) === null || _b === void 0 ? void 0 : _b.className, className),
     });
     return trigger;
 };

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

@@ -1,6 +1,9 @@
 const heroCardTheme = {
-    // Shares Card's radius token; gradient runs on the primary scale so it follows the app theme.
-    baseStyle: "relative overflow-hidden rounded-[calc(var(--card-radius)*2)] p-10 text-[var(--color-primary-contrast)] bg-gradient-to-br from-[var(--color-primary-600)] via-[var(--color-primary-700)] to-[var(--color-primary-500)] ring-4 ring-[var(--color-primary)]/20 ",
+    // Shares --card-radius (HeroCard is a Card presentation, not a distinct
+    // container) — a consumer overrides per-instance via `className`, same as
+    // every other component (shadcn override pattern).
+    // Gradient runs on the primary scale so it follows the app theme.
+    baseStyle: "relative overflow-hidden rounded-[var(--card-radius)] p-10 text-[var(--color-primary-contrast)] bg-gradient-to-br from-[var(--color-primary-600)] via-[var(--color-primary-700)] to-[var(--color-primary-500)] ring-4 ring-[var(--color-primary)]/20 ",
     imageStyle: "absolute inset-0 z-0 pointer-events-none bg-cover",
     contentStyle: "relative z-10",
 };

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

@@ -3,9 +3,11 @@
  */
 const kbdTheme = {
     baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-surface-raised)] border border-[var(--color-border)] text-[var(--color-text-secondary)]',
+    // px tokenised (--kbd-px-*) so a theme can widen keycaps; height/min-width
+    // stay the fixed keycap size (h-5/h-6) and radius derives from --radius-base.
     sizes: {
-        sm: 'text-xs px-1 min-w-5 h-5',
-        md: 'text-xs px-1.5 min-w-6 h-6',
+        sm: 'text-xs px-[var(--kbd-px-sm)] min-w-5 h-5',
+        md: 'text-xs px-[var(--kbd-px-md)] min-w-6 h-6',
     },
     separatorStyle: 'text-[var(--color-text-muted)] text-xs',
 };

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

@@ -14,18 +14,20 @@ 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.
-const LINK_UNDERLINE = "pointer-events-none absolute bottom-0 left-0 h-px w-full bg-current";
+// `-bottom-px` offsets the line 1px below the text so it doesn't crowd the
+// descenders — the pseudo-underline equivalent of `text-underline-offset`.
+const LINK_UNDERLINE = "pointer-events-none absolute -bottom-px left-0 h-px w-full bg-current";
 const UNDERLINE_VARIANTS = { rest: { scaleX: 0 }, hover: { scaleX: 1 } };
 // Text tint per semantic color — the one thing `color` drives.
 const LINK_COLORS = {
-    neutral: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] " +
+    mono: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] " +
         "focus-visible:outline-[var(--color-text-secondary)] dark:text-[var(--color-text-primary)]",
-    primary: "text-[var(--color-primary-600)] focus-visible:outline-[var(--color-primary-600)] " +
-        "dark:text-[var(--color-primary-300)]",
+    primary: "text-[var(--color-primary)]  " +
+        "dark:text-[var(--color-primary)]",
     success: "text-[var(--color-success-600)] focus-visible:outline-[var(--color-success-600)] " +
         "dark:text-[var(--color-success-300)]",
     warning: "text-[var(--color-warning-600)] focus-visible:outline-[var(--color-warning-600)] " +

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

@@ -7,7 +7,7 @@ import { messageTheme } from './Message.theme.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { Button } from '../Button/Button.js';
 import { motion } from 'motion/react';
-import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { Copy, ArrowsClockwise } from '@phosphor-icons/react';
 import { MessageContext } from './MessageContext.js';
 import { MessageAvatar } from './MessageAvatar.js';
 import { MessageBody } from './MessageBody.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,
@@ -119,7 +121,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: "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;
+    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, onClick: onCopy, "aria-label": "Copy message", className: "opacity-40 hover:opacity-100", children: jsx(Copy, { className: "size-4" }) })), onRegenerate && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, onClick: onRegenerate, "aria-label": "Regenerate response", className: "opacity-40 hover:opacity-100", children: jsx(ArrowsClockwise, { 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/Message.theme.js

@@ -4,14 +4,14 @@
  */
 const messageTheme = {
     // Shared base styles (apply to all variants)
-    bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
+    bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[var(--message-bubble-radius)] px-3 py-2 w-fit min-w-fit h-fit",
     containerBaseStyle: "flex items-start gap-3 h-fit text-sm",
-    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    timestampStyle: "text-xs text-[var(--color-text-placeholder)]",
     // Variant-specific modifiers (only differences)
     variants: {
         sender: {
             containerModifier: "flex-row-reverse", // Reverse direction for right alignment
-            bubbleStyle: "bg-[var(--color-neutral-900)] text-[var(--color-neutral-100)] " +
+            bubbleStyle: "bg-[var(--color-mono-900)] text-[var(--color-mono-100)] " +
                 "rounded-tr-xs  " +
                 // Dark mode - slightly darker gradient for better contrast
                 " ",
@@ -22,13 +22,12 @@ const messageTheme = {
             bubbleStyle: " text-[var(--color-text-secondary)] rounded-tl-xs py-0 px-0 " +
                 " " +
                 // Dark mode - dark background with lighter text
-                " " +
                 "",
             timestampModifier: "text-left pl-1",
         },
         system: {
             containerModifier: "justify-center", // Center alignment
-            bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
+            bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[min(calc(var(--radius-base)*0.75),var(--surface-radius-cap-xs))] px-1 py-0.5 " +
                 "text-xs border-none " +
                 // Dark mode
                 "",
@@ -36,8 +35,7 @@ const messageTheme = {
         },
     },
     // Feature styles (streaming, actions)
-    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs " +
-        "dark:text-[var(--color-neutral-500)]",
+    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs",
     actionsContainerStyle: "flex items-start gap-3",
     // Status styles
     statusStyle: "flex items-center gap-1 text-xs mt-1",
@@ -48,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/Message/MessageAudio.js

@@ -3,10 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
-import { PlayIcon } from '@heroicons/react/24/solid';
+import { Play } from '@phosphor-icons/react';
 
 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-[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 }))] })] }));
+    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(Play, { 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/MessageFile.js

@@ -3,10 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
-import { DocumentIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { File, DownloadSimple } from '@phosphor-icons/react';
 
 const MessageFile = ({ name = "File", url, size, onClick, className, }) => {
-    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(DocumentIcon, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(ArrowDownTrayIcon, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
+    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(File, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(DownloadSimple, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
     if (url) {
         return (jsx("a", { href: url, download: true, className: "no-underline", "aria-label": `Download ${name}`, children: content }));
     }

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

@@ -2,10 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
-import { LinkIcon } from '@heroicons/react/16/solid';
+import { Link } from '@phosphor-icons/react';
 
 const MessageLink = ({ url, thumbnailUrl, title, description, domain, className, }) => {
-    const content = (jsxs("div", { className: cn(messageTheme.linkStyle, className), children: [thumbnailUrl && (jsx("img", { src: thumbnailUrl, alt: title || "Link preview", className: "w-full h-32 object-cover" })), jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-0.5", children: [title && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] line-clamp-1", children: title })), description && (jsx("span", { className: "text-[var(--color-text-muted)] line-clamp-2", children: description })), domain && (jsxs("span", { className: "flex items-center gap-1 text-xs text-[var(--color-text-placeholder)] mt-0.5", children: [jsx(LinkIcon, { className: "size-3" }), domain] }))] })] }));
+    const content = (jsxs("div", { className: cn(messageTheme.linkStyle, className), children: [thumbnailUrl && (jsx("img", { src: thumbnailUrl, alt: title || "Link preview", className: "w-full h-32 object-cover" })), jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-0.5", children: [title && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] line-clamp-1", children: title })), description && (jsx("span", { className: "text-[var(--color-text-muted)] line-clamp-2", children: description })), domain && (jsxs("span", { className: "flex items-center gap-1 text-xs text-[var(--color-text-placeholder)] mt-0.5", children: [jsx(Link, { className: "size-3" }), domain] }))] })] }));
     if (url) {
         return (jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "no-underline", "aria-label": title ? `Open ${title}` : "Open link", children: content }));
     }

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

@@ -4,20 +4,20 @@ import { cn } from '../../../utils/cn.js';
 import 'react';
 import { messageTheme } from './Message.theme.js';
 import { Link } from '../Link/Link.js';
-import { ExclamationCircleIcon, CheckIcon, ClockIcon } from '@heroicons/react/16/solid';
+import { WarningCircle, Check, Clock } from '@phosphor-icons/react';
 
-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" })] }));
+const DoubleCheck = ({ className }) => (jsxs("span", { className: cn("inline-flex items-center -space-x-2", className), children: [jsx(Check, { className: "size-3.5" }), jsx(Check, { className: "size-3.5" })] }));
 const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
     if (!status)
         return null;
     const statusConfig = {
         sending: {
-            icon: jsx(ClockIcon, { className: "size-3.5" }),
+            icon: jsx(Clock, { className: "size-3.5" }),
             style: messageTheme.statusSending,
             label: "Sending",
         },
         sent: {
-            icon: jsx(CheckIcon, { className: "size-3.5" }),
+            icon: jsx(Check, { className: "size-3.5" }),
             style: messageTheme.statusSent,
             label: "Sent",
         },
@@ -34,7 +34,7 @@ const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
                 : "Read",
         },
         failed: {
-            icon: jsx(ExclamationCircleIcon, { className: "size-3.5" }),
+            icon: jsx(WarningCircle, { className: "size-3.5" }),
             style: messageTheme.statusFailed,
             label: "Failed",
         },

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.d.ts

@@ -1,7 +1,7 @@
 import { ModalProps } from "./Modal.types";
 export { ModalContext, useModalContext } from "./ModalContext";
 export declare const Modal: {
-    ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, elevation, lift, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, elevation, lift, darkMode, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {

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

@@ -14,7 +14,7 @@ import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, elevation, lift, ...props }) => {
+const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, elevation, lift, darkMode = false, ...props }) => {
     // Grounded backdrop overlay: a Modal covers the viewport, so it paints a FIXED rung 4
     // regardless of where its <Modal> JSX sits (a Modal declared inside a Card must not
     // inherit the Card's rung). Content inside still lifts relative to the modal.
@@ -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, 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 }) }) }));

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

@@ -4,12 +4,17 @@ const modalTheme = {
     // bg comes from the relative-elevation engine (surfaceClasses) at runtime so a modal
     // lifts above its host substrate; keep the dramatic shadow + ring + border + radius here.
     container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden ring-6 !ring-white/10 border border-[var(--color-border)]",
-    header: "flex items-start justify-between p-4 pb-0 shrink-0 border-b border-transparent gap-6 relative",
+    header: "flex items-start justify-between px-[var(--modal-px)] pt-[var(--modal-py)] pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
+    title: "text-[length:var(--modal-title-size)]/[var(--modal-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 p-4 pb-3",
-    footer: "flex items-center justify-end gap-2 p-3 py-2 border-t border-transparent",
+    // pb-[...*0.75] is the gap before the footer — proportional to --modal-py
+    // (today's ratio, 12/16) so a themed --modal-py increase widens it too.
+    body: "flex-1 overflow-y-auto px-[var(--modal-px)] pt-[var(--modal-py)] pb-[calc(var(--modal-py)*0.75)]",
+    // Footer is deliberately lighter/tighter than header/body — expressed as a
+    // proportional calc() off the same tokens (today's ratios: 0.75x/0.5x) so
+    // that relationship survives a themed --modal-px/--modal-py override.
+    footer: "flex items-center justify-end gap-2 px-[calc(var(--modal-px)*0.75)] py-[calc(var(--modal-py)*0.5)] border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {

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

@@ -3,13 +3,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './ModalContext.js';
 import { Button } from '../Button/Button.js';
-import 'react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, isBodyScrollable, } = useModalContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-4" }) }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "mono", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full shrink-0", children: jsx(X, { className: "size-4" }) }) }))] }));
 };
 ModalHeader.displayName = "Modal.Header";