@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

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

@@ -211,7 +211,7 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
         // Otherwise render flat list
         return displayCommands.map((command, index) => (jsx(CommandItem, { command: command, index: index, isHighlighted: index === highlightedIndex, onSelect: handleSelectCommand, onMouseEnter: setHighlightedIndex, theme: theme }, command.id)));
     };
-    return (jsxs(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: overlayClassName, contentClassName: cn(theme.container, className), animations: {
+    return (jsxs(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: cn(theme.overlay, overlayClassName), contentClassName: cn(theme.container, className), animations: {
             overlay: overlayAnimations,
             content: containerAnimations,
         }, 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: {

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

@@ -1,8 +1,12 @@
 const commandPaletteTheme = {
-    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 " +
-        "flex items-start justify-center pt-[min(10vh,4rem)] px-4",
+    // Applied to the Overlay backdrop (positioning/z-index come from Overlay).
+    // Overrides the shared 65%-black scrim (--overlay-bg) with a lighter dim so
+    // real page content sits behind the container — that's what the container's
+    // backdrop-blur frosts into the glass effect. A heavy scrim would leave only
+    // a flat dark layer to blur, making backdrop-blur look like it does nothing.
+    overlay: "",
     container: "relative w-full max-h-[calc(100vh-2rem)] max-w-lg " +
-        "bg-[var(--color-background)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 " +
+        "bg-[var(--color-surface-overlay)]/80 rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 " +
         "border border-[var(--color-border)] ring-4 ring-[var(--color-background)]/20 " +
         "flex flex-col my-4 min-h-0 overflow-hidden " +
         // Dark mode
@@ -11,18 +15,12 @@ const commandPaletteTheme = {
     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
-        "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
+        // 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)]",
-    commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
-        "hover:bg-[var(--color-primary)] " +
-        "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
-        "data-[highlighted=true]:text-[var(--color-primary-contrast)] " +
-        "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
-        // Dark mode - adjust hover state
-        "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
-        "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
+    // 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)]",
     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

@@ -86,8 +86,6 @@ export interface CommandPaletteThemeOverrides {
     searchInput?: string;
     /** Style for group labels */
     groupLabel?: string;
-    /** Style for command items (uses data-[highlighted] and data-[disabled] selectors) */
-    commandItem?: string;
     /** Style for empty state */
     emptyState?: string;
     /** Style for the footer area */

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

@@ -5,21 +5,20 @@ const contextMenuTheme = {
     ...dropdownTheme,
     // Content uses the same styling as Dropdown menu
     contentStyle: dropdownTheme.menuStyle.replace("flex", "flex-col p-1"),
-    // Items use exact same styling as Dropdown items (with space for check icon)
-    itemStyle: `${dropdownTheme.itemBaseStyle} data-[checked=true]:pl-8`,
-    // Checked state - tick icon positioning (absolute left)
-    itemCheckedStyle: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-primary)] " +
-        "dark:text-[var(--color-neutral-200)]",
-    // Submenu trigger - based on Dropdown item style with chevron space
-    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-surface-hover)] ` +
-        "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
-    // Submenu content - matches main dropdown menu style
-    subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
-        "bg-[var(--color-background)] shadow-real-xl flex flex-col p-1 focus:outline-none " +
-        "dark:bg-[var(--color-background-secondary)]",
-    // Separator - horizontal divider
-    separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
-        "dark:bg-[var(--color-neutral-700)]",
+    // Items use exact same styling as Dropdown items. The left padding for the
+    // check icon is applied per-item in ContextMenuItem (className) when checked.
+    itemStyle: dropdownTheme.itemBaseStyle,
+    // Checked state - tick icon positioning (absolute left).
+    // --color-text-primary flips for dark mode on its own.
+    itemCheckedStyle: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-primary)]",
+    // Submenu trigger - based on Dropdown item style with chevron space.
+    // --color-surface-hover is a translucent tint that lightens in dark on its own.
+    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-surface-hover)]`,
+    // Submenu content - floating anchored overlay, matches main dropdown menu
+    subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] ml-1 " +
+        "bg-[var(--color-surface-overlay)]/80 backdrop-blur-md shadow-real-xl flex flex-col p-1 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)
     labelStyle: dropdownTheme.sectionTitleStyle,
 };

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

@@ -23,7 +23,7 @@ const ContextMenuItem = React__default.forwardRef(({ children, className, checke
     // Build end content: user's endContent OR shortcut display
     const resolvedEndContent = endContent ||
         (shortcut ? (jsx("span", { className: "text-sm text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
-    return (jsx(MenuItem, { ref: ref, role: "menuitem", disabled: disabled, isDanger: isDanger, startContent: resolvedStartContent, endContent: resolvedEndContent, subtitle: subtitle, onActivate: handleActivate, "data-checked": checked, "aria-checked": checked ? "true" : undefined, className: cn(checked && "pl-8", className), theme: {
+    return (jsx(MenuItem, { ref: ref, role: "menuitem", disabled: disabled, isDanger: isDanger, startContent: resolvedStartContent, endContent: resolvedEndContent, subtitle: subtitle, onActivate: handleActivate, "data-checked": checked, "aria-checked": checked ? "true" : undefined, className: cn(checked && "pl-6", className), theme: {
             baseStyle: theme.itemStyle,
             dangerStyle: theme.itemDangerStyle,
             focusStyle: theme.itemFocusStyle,

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

@@ -53,7 +53,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: [jsx("span", { className: "flex-1 truncate", children: children }), jsx(ChevronRightIcon, { className: "absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-muted)]", "aria-hidden": "true" })] }));
+    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: [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 })] }));
 });
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DotSeparatorProps } from './DotSeparator.types';
+export declare const DotSeparator: React.ForwardRefExoticComponent<DotSeparatorProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/core/DotSeparator/DotSeparator.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { dotSeparatorTheme } from './DotSeparator.theme.js';
+
+const DotSeparator = React__default.forwardRef(({ size = 'md', className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...dotSeparatorTheme,
+        ...customTheme,
+        sizes: {
+            ...dotSeparatorTheme.sizes,
+            ...customTheme.sizes,
+        },
+    }), [customTheme]);
+    return (jsx("span", { ref: ref, "aria-hidden": "true", className: cn(theme.baseStyle, theme.sizes[size], className), ...props }));
+});
+DotSeparator.displayName = 'DotSeparator';
+
+export { DotSeparator };

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

@@ -0,0 +1,2 @@
+import { DotSeparatorTheme } from './DotSeparator.types';
+export declare const dotSeparatorTheme: DotSeparatorTheme;

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

@@ -0,0 +1,10 @@
+const dotSeparatorTheme = {
+    baseStyle: 'inline-block shrink-0 rounded-full align-middle bg-[var(--color-text-muted)]',
+    sizes: {
+        sm: 'size-0.5 mx-1', // 2px dot
+        md: 'size-1 mx-1.5', // 4px dot
+        lg: 'size-1.5 mx-2', // 6px dot
+    },
+};
+
+export { dotSeparatorTheme };

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+export type DotSeparatorSize = 'sm' | 'md' | 'lg';
+export interface DotSeparatorTheme {
+    baseStyle: string;
+    sizes: Record<DotSeparatorSize, string>;
+}
+export interface DotSeparatorThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<DotSeparatorSize, string>>;
+}
+export interface DotSeparatorProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The size of the dot (also scales its horizontal spacing)
+     * @default 'md'
+     */
+    size?: DotSeparatorSize;
+    /**
+     * Custom class name for the dot
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: DotSeparatorThemeOverrides;
+}

package/dist/components/core/DotSeparator/index.d.ts

@@ -0,0 +1,3 @@
+export { DotSeparator } from './DotSeparator';
+export type { DotSeparatorProps, DotSeparatorSize, DotSeparatorTheme, DotSeparatorThemeOverrides, } from './DotSeparator.types';
+export { dotSeparatorTheme } from './DotSeparator.theme';

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

@@ -2,19 +2,18 @@ import { menuItemTheme } from '../MenuItem/MenuItem.theme.js';
 
 const dropdownTheme = {
     // Menu container - similar to Popover but with menu-specific styling
-    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-[var(--color-surface-overlay)] shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
-        "dark:bg-[var(--color-surface-overlay)]",
+    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/80 backdrop-blur-md shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
+        "dark:bg-[var(--color-surface-overlay)]/80",
     // Delegate item styles to shared MenuItem theme
     itemBaseStyle: menuItemTheme.baseStyle,
     itemDangerStyle: menuItemTheme.dangerStyle,
     itemFocusStyle: menuItemTheme.focusStyle,
     // Section title styling
-    sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
+    sectionTitleStyle: "px-2 py-1.5 text-[11px] font-medium text-[var(--color-text-secondary)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
-    // Separator between sections
-    separatorStyle: "my-1 h-px bg-[var(--color-border)] " +
-        "dark:bg-[var(--color-neutral-700)]",
+    // Separator between sections (--color-border flips for dark mode on its own)
+    separatorStyle: "my-1 h-px bg-[var(--color-border)]",
 };
 
 export { dropdownTheme };

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

@@ -63,7 +63,7 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
     // 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);
-    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
+    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,
             focusStyle: theme.itemFocusStyle,

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
@@ -23,7 +23,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     const [typeaheadString, setTypeaheadString] = useState("");
     const typeaheadTimeoutRef = useRef(null);
     // Use the positioning hook from Popover/Select
-    const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
+    const { position, cssVariables, contentRef: portalContentRef, actualPlacement, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
         placement,
@@ -31,6 +31,22 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
         autoWidth: false,
         stickyTracking: true,
     });
+    // Escape must close the menu even when focus never entered it — after a
+    // mouse-open, focus stays on the trigger, so the menu's own onKeyDown
+    // (which also handles Escape) never fires.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const onDocKeyDown = (e) => {
+            var _a;
+            if (e.key !== "Escape")
+                return;
+            onOpenChange(false);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        document.addEventListener("keydown", onDocKeyDown);
+        return () => document.removeEventListener("keydown", onDocKeyDown);
+    }, [isOpen, onOpenChange, triggerRef]);
     // Get all menu items (not separators or sections)
     const getMenuItems = useCallback(() => {
         if (!localRef.current)
@@ -121,21 +137,32 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
         }
         onOpenChange(false);
     });
-    // Focus first item when menu opens
+    // Focus first item when menu opens. Retry until focus actually LANDS:
+    // useSelectPortal keeps the menu `visibility: hidden` until positioning
+    // completes, and focus() on a hidden element is a silent no-op — a
+    // single-shot focus fires inside that window, leaving focus on the
+    // trigger, which kills the whole keyboard layer (arrows, Enter, and
+    // typeahead all hang off focus being inside the menu).
     useEffect(() => {
-        if (isOpen) {
-            // Focus first item after a small delay to allow render
-            requestAnimationFrame(() => {
-                const items = getMenuItems();
-                if (items.length > 0) {
-                    focusItem(0);
-                }
-            });
-        }
-        else {
+        if (!isOpen) {
             setFocusedIndex(-1);
             setTypeaheadString("");
+            return;
         }
+        let raf = 0;
+        let tries = 0;
+        const tryFocus = () => {
+            const items = getMenuItems();
+            if (items.length > 0) {
+                focusItem(0);
+                if (document.activeElement === items[0])
+                    return; // focus landed
+            }
+            if (++tries < 10)
+                raf = requestAnimationFrame(tryFocus);
+        };
+        raf = requestAnimationFrame(tryFocus);
+        return () => cancelAnimationFrame(raf);
     }, [isOpen, getMenuItems, focusItem]);
     // Combine refs
     const handleRef = useCallback((el) => {
@@ -156,23 +183,23 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 el;
         }
     }, [ref, menuRef, portalContentRef]);
-    // Animation variants
+    // Animation variants — enter/exit from the trigger's side. A menu opening
+    // above the trigger slides up into place and scales from its bottom edge;
+    // a hardcoded top-down drop reads backwards there. `actualPlacement` (not
+    // the prop) so a viewport-flipped menu animates from its real side.
+    const side = (actualPlacement || placement || "bottom").split("-")[0];
+    const closedShift = side === "top"
+        ? { y: 10 }
+        : side === "left"
+            ? { x: 10 }
+            : side === "right"
+                ? { x: -10 }
+                : { y: -10 };
+    const transformOrigin = side === "top" ? "bottom" : side === "left" ? "right" : side === "right" ? "left" : "top";
     const menuVariants = {
-        hidden: {
-            opacity: 0,
-            scale: 0.95,
-            y: -10,
-        },
-        visible: {
-            opacity: 1,
-            scale: 1,
-            y: 0,
-        },
-        exit: {
-            opacity: 0,
-            scale: 0.95,
-            y: -10,
-        },
+        hidden: { opacity: 0, scale: 0.95, x: 0, y: 0, ...closedShift },
+        visible: { opacity: 1, scale: 1, x: 0, y: 0 },
+        exit: { opacity: 0, scale: 0.95, x: 0, y: 0, ...closedShift },
     };
     // Extract DOM props to avoid type conflicts with Framer Motion
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
@@ -180,6 +207,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
+                transformOrigin,
             }, id: menuId, role: "menu", "aria-label": ariaLabel || undefined, "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : {
@@ -189,7 +217,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 }, "data-state": isOpen ? "open" : "closed", "data-placement": placement, ...domProps, children: children })) }));
     // Use portal if specified - wrap with dark class for dark mode support
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: menuContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: menuContent }), document.body);
     }
     return menuContent;
 });

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { HeroCardProps } from "./HeroCard.types";
+/** Default backdrop — one of the bundled `@flikk/ui/bg/*` blobs. */
+export declare const HERO_CARD_DEFAULT_IMAGE = "/bg/1.webp";
+export declare const HeroCard: React.ForwardRefExoticComponent<HeroCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { heroCardTheme } from './HeroCard.theme.js';
+
+/** Default backdrop — one of the bundled `@flikk/ui/bg/*` blobs. */
+const HERO_CARD_DEFAULT_IMAGE = "/bg/1.webp";
+const HeroCard = React__default.forwardRef(({ image = HERO_CARD_DEFAULT_IMAGE, imageBlur = 40, imageScale = 1.5, imageOpacity = 0.25, imageBlend = "multiply", imagePosition = "center", parallax = false, parallaxIntensity = 32, contentClassName, theme, className, children, ...rest }, ref) => {
+    const outerRef = useRef(null);
+    const bgRef = useRef(null);
+    // Merge the forwarded ref with our internal one (we need the node for the listener)
+    const setOuterRef = useCallback((node) => {
+        outerRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const prefersReducedMotion = useReducedMotion();
+    const parallaxOn = parallax && !!image && !prefersReducedMotion;
+    // Resting transform — also the SSR/no-JS value; the parallax loop overrides it imperatively.
+    const baseTransform = imageScale !== 1 ? `scale(${imageScale})` : undefined;
+    useEffect(() => {
+        const outer = outerRef.current;
+        const bg = bgRef.current;
+        if (!parallaxOn || !outer || !bg)
+            return;
+        let disposed = false;
+        // Travel can't exceed the overscan or the card edge would show through.
+        const maxTravel = (size) => Math.min(parallaxIntensity, ((imageScale - 1) / 2) * size);
+        let pointer = null;
+        const st = { tx: 0, ty: 0, x: 0, y: 0, raf: 0, running: false, last: 0 };
+        const apply = () => {
+            bg.style.transform = `translate3d(${st.x.toFixed(2)}px, ${st.y.toFixed(2)}px, 0) scale(${imageScale})`;
+        };
+        const loop = (now) => {
+            if (disposed)
+                return;
+            const dt = Math.min(Math.max((now - st.last) / 1000, 0.001), 0.05);
+            st.last = now;
+            const a = 1 - Math.exp(-9 * dt); // dt-normalized easing — same feel at 60/120Hz
+            st.x += (st.tx - st.x) * a;
+            st.y += (st.ty - st.y) * a;
+            apply();
+            if (Math.abs(st.tx - st.x) < 0.1 && Math.abs(st.ty - st.y) < 0.1 && !pointer) {
+                st.running = false;
+                return; // settled at rest, pointer gone → idle (no per-frame cost)
+            }
+            st.raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (st.running || disposed)
+                return;
+            st.running = true;
+            st.last = performance.now();
+            st.raf = requestAnimationFrame(loop);
+        };
+        const onMove = (e) => {
+            if (e.pointerType !== "mouse")
+                return;
+            const r = outer.getBoundingClientRect();
+            pointer = { x: e.clientX, y: e.clientY };
+            const nx = (e.clientX - r.left) / r.width - 0.5; // -0.5 … 0.5
+            const ny = (e.clientY - r.top) / r.height - 0.5;
+            // Opposite the cursor → parallax depth; full intensity at the edges.
+            st.tx = -nx * 2 * maxTravel(r.width);
+            st.ty = -ny * 2 * maxTravel(r.height);
+            start();
+        };
+        const onLeave = () => {
+            pointer = null;
+            st.tx = 0;
+            st.ty = 0;
+            start(); // ease back to rest, then the loop self-stops
+        };
+        outer.addEventListener("pointermove", onMove, { passive: true });
+        outer.addEventListener("pointerleave", onLeave);
+        return () => {
+            disposed = true;
+            outer.removeEventListener("pointermove", onMove);
+            outer.removeEventListener("pointerleave", onLeave);
+            cancelAnimationFrame(st.raf);
+            bg.style.transform = baseTransform !== null && baseTransform !== void 0 ? baseTransform : "";
+        };
+    }, [parallaxOn, imageScale, parallaxIntensity, baseTransform]);
+    return (jsxs("div", { ref: setOuterRef, className: cn(heroCardTheme.baseStyle, theme === null || theme === void 0 ? void 0 : theme.baseStyle, className), ...rest, children: [image && (jsx("div", { ref: bgRef, "aria-hidden": "true", className: cn(heroCardTheme.imageStyle, theme === null || theme === void 0 ? void 0 : theme.imageStyle), style: {
+                    backgroundImage: `url(${image})`,
+                    backgroundPosition: imagePosition,
+                    // Numeric knobs go inline — no dynamic Tailwind classes to purge-miss.
+                    filter: imageBlur > 0 ? `blur(${imageBlur}px)` : undefined,
+                    transform: baseTransform,
+                    opacity: imageOpacity,
+                    mixBlendMode: imageBlend,
+                } })), jsx("div", { className: cn(heroCardTheme.contentStyle, theme === null || theme === void 0 ? void 0 : theme.contentStyle, contentClassName), children: children })] }));
+});
+HeroCard.displayName = "HeroCard";
+
+export { HERO_CARD_DEFAULT_IMAGE, HeroCard };

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

@@ -0,0 +1,3 @@
+import type { HeroCardThemeOverrides } from "./HeroCard.types";
+export type HeroCardTheme = Required<HeroCardThemeOverrides>;
+export declare const heroCardTheme: HeroCardTheme;

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

@@ -0,0 +1,8 @@
+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-white 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",
+};
+
+export { heroCardTheme };

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

@@ -0,0 +1,70 @@
+import React from "react";
+/** How the backdrop image composites over the gradient fill. */
+export type HeroCardBlendMode = "multiply" | "overlay" | "soft-light" | "hard-light" | "screen" | "luminosity" | "normal";
+export interface HeroCardThemeOverrides {
+    baseStyle?: string;
+    imageStyle?: string;
+    contentStyle?: string;
+}
+/**
+ * HeroCard — a gradient hero shell with an ambient blurred backdrop image.
+ * Children are the content (anything) and render above the backdrop.
+ *
+ * @example Default (bundled image + gradient)
+ * ```tsx
+ * <HeroCard>
+ *   <h2 className="text-3xl font-semibold">Good morning, Maya</h2>
+ * </HeroCard>
+ * ```
+ *
+ * @example Full backdrop control
+ * ```tsx
+ * <HeroCard
+ *   image="/bg/7.webp"
+ *   imageBlur={32}
+ *   imageScale={1.5}
+ *   imageOpacity={0.35}
+ *   imageBlend="overlay"
+ *   imagePosition="top right"
+ *   className="from-rose-500 via-purple-700 to-indigo-900"
+ * >
+ *   …
+ * </HeroCard>
+ * ```
+ */
+export interface HeroCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Backdrop image src. Defaults to the bundled `/bg/3.webp`
+     * (ship the `@flikk/ui/bg/*` assets at `/bg/` or pass your own URL).
+     * Pass `null` for a gradient-only hero.
+     */
+    image?: string | null;
+    /** Backdrop blur radius in px. @default 24 */
+    imageBlur?: number;
+    /** Backdrop scale factor — zooming the abstract blobs in/out reframes the texture. @default 1.25 */
+    imageScale?: number;
+    /** Backdrop opacity, 0–1. @default 0.5 */
+    imageOpacity?: number;
+    /** Blend mode compositing the image over the gradient. @default "multiply" */
+    imageBlend?: HeroCardBlendMode;
+    /** CSS `background-position` — e.g. `"top right"`, `"30% 70%"`. @default "center" */
+    imagePosition?: string;
+    /**
+     * On pointer hover, drift the backdrop image opposite the cursor (damped) for a
+     * parallax-depth effect. Pairs with a `TiltCard` wrapper. Mouse-driven; respects
+     * `prefers-reduced-motion`; no-op without an `image`. Travel is bounded by the
+     * `imageScale` overscan so card edges never show.
+     * @default false
+     */
+    parallax?: boolean;
+    /**
+     * Max backdrop travel in px (each direction) when `parallax` is on. Auto-clamped
+     * to the available `imageScale` overscan.
+     * @default 32
+     */
+    parallaxIntensity?: number;
+    /** className for the content wrapper (the layer lifted above the backdrop). */
+    contentClassName?: string;
+    /** Theme overrides (shadcn approach — `className` still wins). */
+    theme?: HeroCardThemeOverrides;
+}

package/dist/components/core/HeroCard/index.d.ts

@@ -0,0 +1,4 @@
+export { HeroCard, HERO_CARD_DEFAULT_IMAGE } from "./HeroCard";
+export { heroCardTheme } from "./HeroCard.theme";
+export type { HeroCardTheme } from "./HeroCard.theme";
+export type { HeroCardProps, HeroCardThemeOverrides, HeroCardBlendMode } from "./HeroCard.types";

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

@@ -2,7 +2,7 @@
  * Default theme configuration for Kbd component
  */
 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-background-secondary)] border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
+    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)]',
     sizes: {
         sm: 'text-xs px-1 min-w-5 h-5',
         md: 'text-xs px-1.5 min-w-6 h-6',

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

@@ -9,12 +9,15 @@ import { menuItemTheme } from './MenuItem.theme.js';
  * Handles visual layout, base styling, keyboard activation, and focus tracking.
  * Context-specific behavior (selection, checked state) is handled by consumers.
  */
-const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
+const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, selected = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const theme = {
         ...menuItemTheme,
         ...themeOverrides,
     };
+    // Resolve state to plain utility classes (not data-[state] variants) so a
+    // consumer `className` always wins the cascade. See MenuItem.theme.ts.
+    const stateKey = disabled ? "disabled" : selected ? "selected" : "default";
     const handleClick = useCallback(() => {
         if (disabled)
             return;
@@ -26,7 +29,7 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
             handleClick();
         }
     }, [handleClick]);
-    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
+    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, "data-selected": selected, className: cn(theme.baseStyle, theme.states[stateKey], isFocused && !disabled && !selected && theme.focusedStyle, isDanger && theme.dangerStyle, theme.focusStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: theme.subtitleStyle, children: subtitle })
                         : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
 });

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

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