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

package/dist/components/core/Calendar/CalendarMini/CalendarMini.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { cn } from '../../../../utils/cn.js';
@@ -199,7 +199,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
     };
     const MonthRow = enableAnimations ? motion.div : "div";
     const DateItem = enableAnimations ? motion.button : "button";
-    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
+    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "mono", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(CaretLeft, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
                                     maskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                     WebkitMaskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                 }, children: jsx("div", { ref: monthScrollRef, className: cn(mergedTheme.monthRowStyle), role: "tablist", "aria-label": "Month selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(MonthRow, { custom: direction, ...(enableAnimations && {
@@ -247,7 +247,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
                                             }), children: [jsx("div", { className: "text-sm font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
-                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
+                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "mono", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(CaretRight, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";
 

package/dist/components/core/Calendar/CalendarMini/CalendarMini.theme.js

@@ -1,9 +1,9 @@
 const calendarMiniTheme = {
-    baseStyle: "flex items-center justify-center gap-1 transition-all duration-300 text-sm",
+    baseStyle: "flex items-center justify-center gap-1 transition-all duration-[var(--motion-duration-slow)] text-sm",
     monthRowStyle: "flex flex-1 gap-4 overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory px-4 ml-3",
     monthItemStyle: "font-semibold text-[var(--color-text-secondary)] cursor-pointer transition-colors hover:text-[var(--color-text-primary)] flex-shrink-0 snap-center data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:opacity-100",
     dateRowStyle: "relative overflow-hidden px-4 py-0.5",
-    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-background-secondary)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-background-secondary)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-background-secondary)]",
+    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-surface)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-surface)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-surface)]",
 };
 
 export { calendarMiniTheme };

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

@@ -8,9 +8,10 @@ import { CardTitle } from './CardTitle.js';
 import { CardSubtitle } from './CardSubtitle.js';
 import { CardBody } from './CardBody.js';
 import { CardFooter } from './CardFooter.js';
+import { CardContext } from './CardContext.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, title, subtitle, actions, footer, elevation, lift, ...props }, ref) => {
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, title, subtitle, actions, footer, elevation, lift, inset = false, ...props }, ref) => {
     // Relative elevation: a Card lifts two rungs above its host substrate (base = 3, so a
     // standalone card on the floor reads rung 3). shadow:true (the engine default) supplies the
     // hairline ring + doubling shadow — the ONLY elevation cue in light mode, where rungs 3–8 are
@@ -20,11 +21,15 @@ const CardRoot = React__default.forwardRef(({ children, className, theme: custom
         ...cardTheme,
         ...customTheme,
     }), [customTheme]);
+    const cardContext = useMemo(() => ({ inset }), [inset]);
     const hasHeader = Boolean(title || subtitle || actions);
     // Slot-prop mode: any header/footer slot composes Header/Body/Footer for us.
     // Otherwise children render raw — the compound API path, unchanged.
     const managed = hasHeader || Boolean(footer);
-    return (jsx("div", { ref: ref, className: cn(surfaceClasses(surfaceLevel), theme.baseStyle, darkMode && "dark", className), ...props, children: jsx(SurfaceProvider, { level: surfaceLevel, children: managed ? (jsxs(Fragment, { children: [hasHeader && (jsxs(CardHeader, { className: actions ? "flex-row items-start justify-between gap-4" : undefined, children: [(title || subtitle) && (jsxs("div", { className: "flex flex-col", children: [title && jsx(CardTitle, { children: title }), subtitle && jsx(CardSubtitle, { children: subtitle })] })), actions && (jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions }))] })), children != null && jsx(CardBody, { children: children }), footer && jsx(CardFooter, { className: "justify-end gap-2", children: footer })] })) : (children) }) }));
+    return (jsx("div", { ref: ref, className: cn(surfaceClasses(surfaceLevel), 
+        // Overrides only the rung bg from surfaceClasses (twMerge, last wins) — its
+        // shadow and --field-fill survive, and `className` still wins over both.
+        inset && theme.baseStyleInset, theme.baseStyle, darkMode && "dark", className), ...props, children: jsx(CardContext.Provider, { value: cardContext, children: jsx(SurfaceProvider, { level: surfaceLevel, children: managed ? (jsxs(Fragment, { children: [hasHeader && (jsxs(CardHeader, { className: actions ? "flex-row items-start justify-between gap-4" : undefined, children: [(title || subtitle) && (jsxs("div", { className: "flex flex-col", children: [title && jsx(CardTitle, { children: title }), subtitle && jsx(CardSubtitle, { children: subtitle })] })), actions && (jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions }))] })), children != null && jsx(CardBody, { children: children }), footer && jsx(CardFooter, { className: "justify-end gap-2", children: footer })] })) : (children) }) }) }));
 });
 CardRoot.displayName = 'Card';
 // Create compound component with proper typing

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

@@ -2,11 +2,47 @@ const cardTheme = {
     // bg comes from the relative-elevation engine (surfaceClasses) at runtime so a card
     // nested in a higher surface (e.g. a Modal) lifts; keep radius + overflow + border here.
     baseStyle: "rounded-[var(--card-radius)] overflow-hidden border-0 border-[var(--color-border)]",
-    headerStyle: "flex flex-col p-6 items-start",
-    titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
+    headerStyle: "flex flex-col px-[var(--card-px)] py-[var(--card-py)] items-start",
+    // text-[length:...] (not bare text-[var(...)]) is required — see TYPE ROLE
+    // SYSTEM in theme.css for why a bare var() would resolve to color instead.
+    titleStyle: "text-[length:var(--card-title-size)]/[var(--card-title-line-height)] font-semibold text-[var(--color-text-primary)]",
     subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-2",
-    bodyStyle: "p-6 pt-0 first:pt-6",
-    footerStyle: "flex items-center p-6 pt-0 first:pt-6",
+    // Default to full py (top included). [[data-card-region]~&]:pt-0 zeroes the seam
+    // ONLY when an actual region (Header/Body) precedes this one — a general-sibling
+    // selector keyed off data-card-region, not `:first-child`. `:first-child` broke
+    // when a decorative absolutely-positioned sibling (e.g. DotPattern) sat before
+    // Body in the DOM: it still counts as a structural first child even though it
+    // takes no layout space, so Body silently lost its top padding.
+    bodyStyle: "px-[var(--card-px)] py-[var(--card-py)] [[data-card-region]~&]:pt-0",
+    footerStyle: "flex items-center px-[var(--card-px)] py-[var(--card-py)] [[data-card-region]~&]:pt-0",
+    // ── inset mode ─────────────────────────────────────────────────────────────
+    // PROTOTYPE GEOMETRY: the 12px gap and the 16px panel radius are hardcoded on
+    // purpose so the look can be tuned by eye first. Tokenise both afterwards
+    // (--card-inset-gap + a --card-panel-radius on the sm cap tier, per §3's
+    // nested-well rule) — this is the only place the numbers appear.
+    //
+    // The frame sinks rather than the body rising: light-mode rungs 3-8 are all
+    // #ffffff, so lifting the body a rung would paint nothing. bg here overrides
+    // the rung bg from surfaceClasses via twMerge while its shadow + --field-fill
+    // survive; the panel then picks the rung bg back up.
+    baseStyleInset: "bg-[var(--color-surface-sunken)]",
+    // Header keeps its full top padding; only the seam down to the panel collapses
+    // to the gap. `pb-3` lands after `py-[…]` so twMerge resolves the bottom side.
+    headerStyleInset: "pb-3",
+    // Deliberately NOT carrying bodyStyle's `[[data-card-region]~&]:pt-0` — the
+    // panel is a closed box and keeps uniform padding on all four sides.
+    //
+    // ALIGNMENT CONTRACT: content inside the panel must stay flush with the header
+    // and footer text on the tray. The panel is offset by the gap, so its own
+    // padding is that gap subtracted from the card padding — 12 + (24-12) = 24,
+    // the same inset the header sits at. Derived from --card-px/--card-py rather
+    // than hardcoded so it holds when a theme redefines the card padding.
+    // The `_` are required: they become spaces, and calc() treats `-` as an operator
+    // ONLY when whitespace-separated. `calc(var(--card-px)-12px)` parses as the invalid
+    // `var(--card-px) -12px`, which Tailwind silently drops — no class is emitted at all.
+    // When these move to tokens, wrap in max(0px, …) so a theme that sets the card
+    // padding below the gap can't produce negative padding.
+    bodyStyleInset: "mx-3 mb-3 rounded-2xl px-[calc(var(--card-px)_-_12px)] py-[calc(var(--card-py)_-_12px)]",
 };
 
 export { cardTheme };

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, 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/CardFooter.js

@@ -4,7 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
 
 const CardFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: cn(cardTheme.footerStyle, className), ...props, children: children }));
+    return (jsx("div", { ref: ref, "data-card-region": "", className: cn(cardTheme.footerStyle, className), ...props, children: children }));
 });
 CardFooter.displayName = 'CardFooter';
 

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, 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/CommandPalette/CommandPalette.js

@@ -5,7 +5,7 @@ import { commandPaletteTheme } from './CommandPalette.theme.js';
 import { containerAnimations, overlayAnimations } from './CommandPalette.animations.js';
 import { cn } from '../../../utils/cn.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import { CommandItem } from './CommandItem.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
@@ -107,7 +107,7 @@ const findNextEnabledIndex = (currentIndex, direction, commands) => {
  * />
  * ```
  */
-const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, footer, footerClassName, elevation, lift, }, ref) => {
+const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, footer, footerClassName, elevation, lift, onCommandSelect, }, ref) => {
     // Grounded backdrop overlay: the palette covers the viewport over a backdrop, so it
     // paints a FIXED rung 5 regardless of where its JSX sits. Content inside lifts relative.
     const surfaceLevel = useSurfaceElevation({ baseRung: 5, ground: true, elevation, lift });
@@ -190,8 +190,9 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
         if (command.disabled)
             return;
         command.onSelect();
+        onCommandSelect === null || onCommandSelect === void 0 ? void 0 : onCommandSelect(command.id);
         onClose();
-    }, [onClose]);
+    }, [onClose, onCommandSelect]);
     // Keep refs in sync for keydown handler to avoid re-attaching listener
     const flatFilteredCommandsRef = useRef(flatFilteredCommands);
     flatFilteredCommandsRef.current = flatFilteredCommands;
@@ -258,7 +259,7 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
     return (jsx(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: cn(theme.overlay, overlayClassName), contentClassName: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, className), animations: {
             overlay: overlayAnimations,
             content: containerAnimations,
-        }, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Search commands" })] }) }), jsx(ScrollArea, { ref: listContainerRef, type: "hover", className: "overscroll-contain px-1", style: {
+        }, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlass, { className: "w-5 h-5 text-[var(--color-text-muted)]", weight: "bold" }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Search commands" })] }) }), jsx(ScrollArea, { ref: listContainerRef, type: "hover", className: "overscroll-contain px-1", style: {
                         maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
                     }, children: jsx("div", { role: "listbox", "aria-label": "Commands", children: renderCommandsList() }) }), footer && (jsx("div", { className: cn(theme.footer, footerClassName), children: footer }))] }) }));
 });

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

@@ -16,15 +16,11 @@ const commandPaletteTheme = {
     searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
     searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
-        "focus:outline-none focus:ring-0 " +
-        // Dark mode — matches Input's controlBaseStyle text/placeholder tokens
-        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
-    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
-        "dark:text-[var(--color-neutral-500)]",
+        "focus:outline-none focus:ring-0",
+    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase",
     // Command rows render via the shared MenuItem primitive and use its default
     // styling (subtle highlight + standard padding) — no per-row theme here.
-    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-500)]",
+    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)]",
     footer: "border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-muted)]font-medium",
 };
 

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

@@ -79,6 +79,8 @@ export interface CommandPaletteProps {
     elevation?: SurfaceElevation;
     /** `false` opts out of the relative lift — paints at the palette's base rung. */
     lift?: boolean;
+    /** Fired with the selected command's id, in addition to that command's own onSelect. */
+    onCommandSelect?: (id: string) => void;
 }
 /**
  * Theme overrides for the CommandPalette component

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/ContextMenuItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useCallback } from 'react';
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { Check } from '@phosphor-icons/react';
 import { useContextMenuContext } from './ContextMenuContext.js';
 import { MenuItem } from '../MenuItem/MenuItem.js';
 
@@ -22,7 +22,7 @@ const ContextMenuItem = React__default.forwardRef(({ children, className, checke
     // with icon rows AND the label never shifts when toggled — a `size-4` spacer holds
     // the gutter while unchecked.
     const isCheckable = checked !== undefined;
-    const checkIndicator = isCheckable ? (checked ? (jsx(CheckIcon, { className: theme.itemCheckedStyle, "aria-hidden": "true" })) : (jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true" }))) : null;
+    const checkIndicator = isCheckable ? (checked ? (jsx(Check, { className: theme.itemCheckedStyle, "aria-hidden": "true" })) : (jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true" }))) : null;
     const resolvedStartContent = checkIndicator || startContent ? (jsxs(Fragment, { children: [checkIndicator, startContent] })) : undefined;
     // Build end content: user's endContent OR shortcut display
     const resolvedEndContent = endContent ||

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,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useCallback } from 'react';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
+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(ChevronRightIcon, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", strokeWidth: 2 })] }));
+    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

@@ -8,12 +8,15 @@ const drawerTheme = {
         "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
         "dark:ring-white/5",
     inner: "h-full flex flex-col",
-    header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
+    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-base 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 p-4",
-    footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
+    body: "flex-1 overflow-y-auto px-[var(--drawer-px)] py-[var(--drawer-py)]",
+    // Footer's vertical padding is deliberately lighter than header/body —
+    // proportional calc() off --drawer-py (today's ratio, 12/16) so it stays
+    // in that same relationship under a themed override; horizontal matches.
+    footer: "flex items-center justify-end gap-3 px-[var(--drawer-px)] py-[calc(var(--drawer-py)*0.75)] border-t border-[var(--color-border)] shrink-0 " +
         "",
 };
 // Position variants with margin support