@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.27

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -1,5 +1,5 @@
 const codeBlockTheme = {
-    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-background)]",
+    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-sunken)]",
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
@@ -10,7 +10,7 @@ const codeBlockTheme = {
     highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
-    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     copySuccess: "text-[var(--color-success)]",
 };
 

package/dist/components/ai/PromptInput/PromptInput.js

@@ -50,6 +50,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/DotSeparator/DotSeparator.js';
 import '../../core/Kbd/Kbd.js';
 import '../../core/MenuItem/MenuItem.js';
 import '../../core/Link/Link.js';
@@ -100,12 +101,15 @@ import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
 import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarSearch.js';
+import '../../core/Sidebar/SidebarCard.js';
 import '../../core/Sidebar/SidebarContext.js';
 import '../../core/OfflineIndicator/OfflineIndicator.js';
 import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import '../../forms/TimePicker/WheelColumn.js';
 import '../../forms/TimePicker/TimePicker.theme.js';
 import '../../forms/Slider/Slider.js';

package/dist/components/ai/PromptInput/VoiceRecorder.js

@@ -32,6 +32,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/DotSeparator/DotSeparator.js';
 import '../../core/Kbd/Kbd.js';
 import '../../core/MenuItem/MenuItem.js';
 import '../../core/Link/Link.js';
@@ -82,12 +83,15 @@ import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
 import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarSearch.js';
+import '../../core/Sidebar/SidebarCard.js';
 import '../../core/Sidebar/SidebarContext.js';
 import '../../core/OfflineIndicator/OfflineIndicator.js';
 import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 
 /**
  * Format seconds into MM:SS display

package/dist/components/ai/StreamingResponse/MarkdownRenderer.js

@@ -73,7 +73,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
                 return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), jsx(Prism, { style: syntaxTheme === 'dark' ? oneDark : oneLight, language: language, PreTag: "div", className: "rounded-lg my-3", ...props, children: String(children).replace(/\n$/, '') })] }));
             }
             // Inline code — skip word animation for code tokens
-            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-(--color-background-tertiary) text-(--color-primary) px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
+            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-(--color-surface-sunken) text-(--color-primary) px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
         },
         // Paragraphs — word-level animation
         p({ children }) {

package/dist/components/ai/TokenCounter/TokenCounter.theme.js

@@ -4,7 +4,7 @@ const tokenCounterTheme = {
     countStyle: "font-medium text-[var(--color-text-primary)]",
     labelStyle: "text-[var(--color-text-muted)]",
     costStyle: "text-[var(--color-text-muted)] font-mono",
-    progressStyle: "h-1 bg-[var(--color-background-tertiary)] rounded-full overflow-hidden",
+    progressStyle: "h-1 bg-[var(--color-surface-sunken)] rounded-full overflow-hidden",
     progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
     sizes: {
         sm: {

package/dist/components/charts/BarChart/BarChart.js

@@ -353,9 +353,9 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 originY: isNegative ? 0 : 1,
                 transformOrigin: isNegative ? "top" : "bottom",
                 fill: isNull
-                    ? "var(--color-background-tertiary)"
+                    ? "var(--color-surface-sunken)"
                     : shouldReduceOpacity
-                        ? "var(--color-background-tertiary)"
+                        ? "var(--color-surface-sunken)"
                         : fillColor,
                 opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
                 stroke: isFocused ? "var(--color-primary)" : "none",

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -234,7 +234,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                         originY: 1,
                         transformOrigin: "bottom",
                         fill: shouldReduceOpacity
-                            ? "var(--color-background-tertiary)"
+                            ? "var(--color-surface-sunken)"
                             : fillColor,
                         opacity: shouldReduceOpacity ? 0.9 : 1,
                         stroke: isFocused ? "var(--color-primary)" : "none",

package/dist/components/charts/shared/BarRenderer/BarRenderer.js

@@ -148,9 +148,9 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
                 originY: isNegative ? 0 : 1,
                 transformOrigin: isNegative ? "top" : "bottom",
                 fill: isNull
-                    ? "var(--color-background-tertiary)"
+                    ? "var(--color-surface-sunken)"
                     : shouldReduceOpacity
-                        ? "var(--color-background-tertiary)"
+                        ? "var(--color-surface-sunken)"
                         : fillColor,
                 opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
                 stroke: isFocused ? "var(--color-primary)" : "none",

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

@@ -10,7 +10,7 @@ const breadcrumbsTheme = {
     link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
     current: "text-[var(--color-text-primary)] font-medium",
     separator: "text-[var(--color-text-muted)] select-none",
-    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
+    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-surface-hover)]",
 };
 /**
  * Variant styles for different breadcrumb appearances

package/dist/components/core/Button/Button.js

@@ -107,7 +107,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "link" &&
                 resolvedVariant !== "ghost" &&
-                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60 blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
                 ripples.map((ripple) => {
                     const animation = getRippleAnimation(effect, ripple, rippleScale);
                     return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||

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

@@ -3,7 +3,7 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
         filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
@@ -152,19 +152,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            default: "font-medium min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
             link: "font-semibold p-0 text-sm h-fit",
         },
         md: {
-            default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            default: "font-medium min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
             link: "font-semibold p-0 text-sm h-fit",
         },
         lg: {
-            default: "font-semibold min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            default: "font-medium min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "font-semibold p-0 text-base h-fit",
+            link: "font-medium p-0 text-base h-fit",
         },
     },
     // State styles

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

@@ -3,7 +3,7 @@
  * Uses design tokens and data-[state=*] selectors
  */
 const calendarTheme = {
-    baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
+    baseStyle: "select-none w-full bg-[var(--color-surface)]",
     headerStyle: "flex items-center justify-between mb-4",
     titleStyle: "text-sm font-semibold text-[var(--color-text-primary)] " + "",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",

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

@@ -3,7 +3,7 @@ const calendarMiniTheme = {
     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-background-tertiary)] 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-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)]",
 };
 
 export { calendarMiniTheme };

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

@@ -1,8 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
+import { MenuItem } from '../MenuItem/MenuItem.js';
 import { Kbd } from '../Kbd/Kbd.js';
-import { commandPaletteTheme } from './CommandPalette.theme.js';
 
 /**
  * Map string shortcuts to KbdKey types
@@ -100,7 +99,7 @@ const Shortcut = ({ keys }) => {
  * />
  * ```
  */
-const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, theme = commandPaletteTheme, }) => {
+const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, }) => {
     const handleClick = () => {
         if (!command.disabled) {
             onSelect(command);
@@ -126,7 +125,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), role: "option", "aria-selected": isHighlighted, "aria-disabled": command.disabled || false, onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
+    return (jsx(MenuItem, { role: "option", selected: isHighlighted, disabled: command.disabled, startContent: finalContentStart, subtitle: command.subtitle, endContent: renderContentEnd(), onActivate: handleClick, onMouseEnter: handleMouseEnter, "aria-selected": isHighlighted, "data-command-index": index, "data-highlighted": isHighlighted, className: className, children: command.label }));
 };
 
 export { CommandItem };

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: "bg-black/30",
     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)] backdrop-blur-md 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-background-tertiary)] ` +
-        "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
-    // Submenu content - matches main dropdown menu style
+    // 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)] " +
-        "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)]",
+        "bg-[var(--color-surface-overlay)] 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/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/Drawer/Drawer.theme.js

@@ -1,10 +1,10 @@
 const drawerTheme = {
     // Note: overlay styling is now handled by the shared Overlay component
     overlay: "",
-    container: "fixed bg-white shadow-2xl shadow-black/30 " +
+    container: "fixed bg-[var(--color-surface-raised)] shadow-2xl shadow-black/30 " +
         "border border-[var(--color-border)] ring-4 ring-white/10 " +
         "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
-        "dark:bg-[var(--color-background-secondary)] dark:ring-white/5",
+        "dark:bg-[var(--color-surface-raised)] 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",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",

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

@@ -2,8 +2,8 @@ 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-white shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
-        "dark:bg-[var(--color-background-secondary)]",
+    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)]",
     // Delegate item styles to shared MenuItem theme
     itemBaseStyle: menuItemTheme.baseStyle,
     itemDangerStyle: menuItemTheme.dangerStyle,
@@ -12,9 +12,8 @@ const dropdownTheme = {
     sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] 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

@@ -189,7 +189,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/Empty/Empty.js

@@ -11,7 +11,7 @@ const Empty = React__default.forwardRef(({ title, subtitle, image, imageAlt, ico
     if (children) {
         return (jsx("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: emptyTheme.subtitleStyle, children: subtitle }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
+    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto flex items-center justify-center text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: emptyTheme.subtitleStyle, children: subtitle }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
 });
 // Set display name for dev tools and Storybook
 Empty.displayName = "Empty";

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ImagePlaceholderProps } from "./ImagePlaceholder.types";
+/**
+ * ImagePlaceholder renders a striped placeholder surface used when a
+ * header / banner / cover image has not yet been uploaded.
+ *
+ * @example
+ * ```tsx
+ * <ImagePlaceholder ratio={16 / 9}>
+ *   <Button>Upload cover</Button>
+ * </ImagePlaceholder>
+ * ```
+ */
+export declare const ImagePlaceholder: React.ForwardRefExoticComponent<ImagePlaceholderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { AspectRatio } from '../AspectRatio/AspectRatio.js';
+import { StripePattern } from '../../effects/StripePattern/StripePattern.js';
+import { imagePlaceholderTheme } from './ImagePlaceholder.theme.js';
+
+/**
+ * ImagePlaceholder renders a striped placeholder surface used when a
+ * header / banner / cover image has not yet been uploaded.
+ *
+ * @example
+ * ```tsx
+ * <ImagePlaceholder ratio={16 / 9}>
+ *   <Button>Upload cover</Button>
+ * </ImagePlaceholder>
+ * ```
+ */
+const ImagePlaceholder = React__default.forwardRef(({ ratio = 16 / 9, bordered = true, rounded = true, pattern, children, className, ...rest }, ref) => {
+    const surface = (jsxs("div", { ref: ref, className: cn(imagePlaceholderTheme.surfaceStyle, rounded && imagePlaceholderTheme.roundedStyle, bordered && imagePlaceholderTheme.borderedStyle, className), ...rest, children: [jsx(StripePattern, { ...pattern }), children !== undefined && (jsx("div", { className: imagePlaceholderTheme.contentStyle, children: children }))] }));
+    if (ratio === undefined) {
+        return surface;
+    }
+    return jsx(AspectRatio, { ratio: ratio, children: surface });
+});
+ImagePlaceholder.displayName = "ImagePlaceholder";
+
+export { ImagePlaceholder };

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

@@ -0,0 +1,6 @@
+export declare const imagePlaceholderTheme: {
+    surfaceStyle: string;
+    borderedStyle: string;
+    roundedStyle: string;
+    contentStyle: string;
+};

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

@@ -0,0 +1,8 @@
+const imagePlaceholderTheme = {
+    surfaceStyle: "relative w-full h-full overflow-hidden bg-[var(--color-background-secondary)]",
+    borderedStyle: "border border-dashed border-[var(--color-border)]",
+    roundedStyle: "rounded-[var(--card-rounded)]",
+    contentStyle: "absolute inset-0 z-10 flex items-center justify-center text-[var(--color-text-muted)]",
+};
+
+export { imagePlaceholderTheme };

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

@@ -0,0 +1,32 @@
+import React from "react";
+import type { StripePatternProps } from "../../effects/StripePattern";
+export interface ImagePlaceholderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Aspect ratio (width / height) for the placeholder surface.
+     * Pass `undefined` to skip the AspectRatio wrapper and let the parent
+     * control the height (e.g. when used inside a fixed-height container).
+     * @default 16/9
+     */
+    ratio?: number;
+    /**
+     * Show the dashed outer border.
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Apply rounded corners.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Override props passed to the inner StripePattern (color, spacing, angle, etc.).
+     */
+    pattern?: Partial<StripePatternProps>;
+    /**
+     * Optional content rendered above the striped surface (e.g. an icon,
+     * caption, or upload button).
+     */
+    children?: React.ReactNode;
+    /** className override on the outer surface (shadcn pattern). */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ImagePlaceholder } from "./ImagePlaceholder";
+export type { ImagePlaceholderProps } from "./ImagePlaceholder.types";