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

package/dist/components/forms/Mention/Mention.types.d.ts

@@ -71,26 +71,21 @@ export interface MentionTheme {
     inputGroupStyle: string;
     /** JS-driven focus ring style */
     inputGroupFocusStyle: string;
+    /** Invalid state style (inset box-shadow + danger fill) */
+    invalidStyle: string;
+    /** Invalid + focused style (danger inset shadow + ring glow) */
+    invalidFocusStyle: string;
     /** Base editable div style */
     editableStyle: string;
     /** Size variants for the editable div */
     sizes: Record<MentionSize, string>;
-    /** Inline mention Tag chip style */
-    mentionTagStyle: string;
     /** Dropdown container style */
     dropdownStyle: string;
-    /** Individual suggestion item style */
+    /** Suggestion row style — used only by the custom `renderSuggestion` path
+     *  (default rows render via the shared MenuItem primitive). */
     suggestionStyle: string;
-    /** Highlighted (keyboard-focused) suggestion style */
+    /** Highlighted (keyboard-focused) suggestion style — custom renderSuggestion path */
     suggestionHighlightedStyle: string;
-    /** Avatar style inside a suggestion */
-    suggestionAvatarStyle: string;
-    /** Avatar fallback (initials) style */
-    suggestionAvatarFallbackStyle: string;
-    /** Suggestion label text style */
-    suggestionLabelStyle: string;
-    /** Suggestion description text style */
-    suggestionDescriptionStyle: string;
     /** Empty state message style */
     emptyMessageStyle: string;
     /** Loading state style */
@@ -153,6 +148,11 @@ export interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     mentionTagSize?: TagSize;
     /** Additional className for inline mention Tag chips */
     mentionTagClassName?: string;
+    /**
+     * Show a remove (×) button on each inline mention chip so it can be deleted
+     * by click as well as by keyboard. Defaults to `true`.
+     */
+    mentionTagRemovable?: boolean;
     /** Number of visible text rows (controls min-height) */
     rows?: number;
     /** Label rendered above the mention input */

package/dist/components/forms/Mention/Mention.utils.js

@@ -1,5 +1,23 @@
 // Data attribute used to identify mention nodes in the DOM
 const MENTION_ATTR = "data-mention-id";
+/**
+ * True when `node` lives inside a mention chip (its avatar/label text nodes),
+ * as opposed to being the mention element itself. A TreeWalker descends into a
+ * FILTER_ACCEPTed mention element, so without rejecting these inner nodes the
+ * offset walkers would count a chip's inner text and land the caret inside it
+ * (chips are contentEditable=false). Stops at `container` (the walker root).
+ */
+const isInsideMention = (node, container) => {
+    let parent = node.parentNode;
+    while (parent && parent !== container) {
+        if (parent.nodeType === Node.ELEMENT_NODE &&
+            parent.hasAttribute(MENTION_ATTR)) {
+            return true;
+        }
+        parent = parent.parentNode;
+    }
+    return false;
+};
 /**
  * Serialize segments to a plain text string.
  * Mentions become `trigger + label` (e.g. "@Sarah Wilson").
@@ -111,12 +129,17 @@ const getPlainTextOffset = (container) => {
     let offset = 0;
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
         acceptNode: (node) => {
-            if (node.nodeType === Node.TEXT_NODE)
-                return NodeFilter.FILTER_ACCEPT;
+            // Mention element: count it atomically (its inner nodes are rejected below)
             if (node.nodeType === Node.ELEMENT_NODE &&
                 node.hasAttribute(MENTION_ATTR)) {
                 return NodeFilter.FILTER_ACCEPT;
             }
+            // Reject the chip's inner avatar/label nodes so the walker never
+            // descends into a mention or counts its inner text twice.
+            if (isInsideMention(node, container))
+                return NodeFilter.FILTER_REJECT;
+            if (node.nodeType === Node.TEXT_NODE)
+                return NodeFilter.FILTER_ACCEPT;
             // Skip non-mention element nodes but traverse their children
             return NodeFilter.FILTER_SKIP;
         },
@@ -234,12 +257,17 @@ const setCaretAtOffset = (container, targetOffset) => {
     let remaining = targetOffset;
     const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
         acceptNode: (node) => {
-            if (node.nodeType === Node.TEXT_NODE)
-                return NodeFilter.FILTER_ACCEPT;
+            // Mention element: count it atomically (its inner nodes are rejected below)
             if (node.nodeType === Node.ELEMENT_NODE &&
                 node.hasAttribute(MENTION_ATTR)) {
                 return NodeFilter.FILTER_ACCEPT;
             }
+            // Reject the chip's inner avatar/label nodes so the caret is never
+            // placed inside a mention (chips are contentEditable=false).
+            if (isInsideMention(node, container))
+                return NodeFilter.FILTER_REJECT;
+            if (node.nodeType === Node.TEXT_NODE)
+                return NodeFilter.FILTER_ACCEPT;
             return NodeFilter.FILTER_SKIP;
         },
     });

package/dist/components/forms/RichTextEditor/RichTextEditor.js

@@ -1437,11 +1437,11 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                                     : false;
         switch (tool) {
             case "bold":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "size-4" }) }, toolKey));
             case "italic":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "size-4" }) }, toolKey));
             case "underline":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "size-4" }) }, toolKey));
             case "fontFamily": {
                 // The `fontFamily` tool is opt-in via toolbar config, but
                 // `fontFamilies` is also a public prop — if a consumer passes an

package/dist/components/forms/RichTextEditor/RichTextEditor.theme.js

@@ -97,16 +97,16 @@ const richTextEditorTheme = {
     // `rounded-t-[var(--form-radius)]` matches the container's radius so the
     // toolbar's own bg/backdrop-blur respects the top corners — prevents the
     // 1px bleed past the parent's `overflow-hidden` clip in Safari/Chromium.
-    toolbarStyle: "flex items-center gap-1 p-1 rounded-t-[var(--form-radius)] border-b border-[var(--color-border)] dark:bg-[var(--color-background-secondary)]",
+    toolbarStyle: "flex items-center m-0.5 gap-0.5 p-0.5 rounded-[var(--form-radius)] dark:bg-[var(--color-surface)]/0",
     // Toolbar styling (floating variant — selection-anchored)
-    floatingToolbarStyle: "flex items-center gap-1 p-1 rounded-xl border border-[var(--color-border)] bg-white/90 backdrop-blur-sm shadow-real-xl overflow-hidden dark:bg-[var(--color-background-secondary)]/80",
+    floatingToolbarStyle: "flex items-center gap-1 p-1 rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/70 backdrop-blur-sm shadow-real-xl overflow-hidden",
     // Toolbar button — single source of truth via data-[state=active]
     // (aria-pressed remains as proper ARIA on toggle buttons, but styling is decoupled)
-    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.85)] border border-transparent bg-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-secondary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:border-[var(--color-border)] data-[state=active]:shadow-inner",
+    toolbarButtonStyle: "inline-flex items-center justify-center rounded-[calc(var(--radius-base)*0.85)] border border-transparent bg-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-secondary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:border-[var(--color-border)] data-[state=active]:shadow-inner",
     // Dropdown surface (visual only — positioning handled at use site via portal)
-    dropdownStyle: "min-w-[120px] max-h-[18rem] overflow-y-auto py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
+    dropdownStyle: "min-w-[120px] max-h-[18rem] overflow-y-auto py-1 bg-[var(--color-surface-overlay)]/70 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
     // Dropdown item — uses data-[active=true] for selected state
-    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary-900)]",
+    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary-900)] data-[active=true]:dark:bg-[var(--color-primary-400)]/10 data-[active=true]:dark:text-[var(--color-primary-400)]",
     // Separator between toolbar sections
     separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
     // Color picker layout — column of family rows, plus optional Recent + Mono rows

package/dist/components/forms/Select/Select.js

@@ -96,7 +96,7 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
     // Use either the themed focus state or directly apply the focus classes if the theme is not working
     const activeFocusState = isOpen
         ? focusStateStyle ||
-            "shadow-[inset_0_0_0_2px_var(--color-primary)] ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_1px_var(--color-primary)] ring-4 ring-[var(--color-primary)]/10"
         : "";
     return (jsxs("div", { className: cn(buttonWrapperStyle, "flex items-stretch"), children: [contentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentSlotStyle, "pr-0 border-r border-[var(--color-border)]"), children: contentStart })), jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, "flex-1 min-w-0", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, "aria-labelledby": ariaLabelledby, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }), contentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentSlotStyle, "pl-0 border-l border-[var(--color-border)]"), children: contentEnd }))] }));
 };
@@ -287,7 +287,7 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
                         } }) })), children] })) }));
     // Use portal if enabled and client-side - wrap with dark class for dark mode support
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
     }
     return optionsContent;
 };

package/dist/components/forms/Select/Select.theme.js

@@ -11,12 +11,12 @@ const selectTheme = {
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " items-center justify-between",
     // Button wrapper style
     buttonWrapperStyle: "relative w-full",
-    // Button style - bg-white for light mode only; dark mode bg comes from baseStyle (inputGroupBaseStyle)
-    buttonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Button style - surface flips automatically between light/dark
+    buttonStyle: "w-full cursor-pointer bg-[var(--color-surface)]",
     // Placeholder text style - matches Input placeholder styling
     placeholderTextStyle: formsBaseTheme.placeholderStyle,
     // Selected value text style
-    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    valueTextStyle: "text-[var(--color-text-primary)]",
     // Size variants - composed from atomic tokens
     sizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,

package/dist/components/forms/TimePicker/TimePickerContent.js

@@ -35,6 +35,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';
@@ -86,6 +87,8 @@ 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';

package/dist/components/forms/TimePicker/TimePickerTrigger.js

@@ -25,7 +25,7 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     const periodToggleStyle = theme.periodToggleStyle || "";
     // Apply focused styles when open — same pattern as SelectButton and DatePickerTrigger
     const activeFocusState = isOpen
-        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
+        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
         : "";
     // Determine whether start icon is present (for input padding)
     const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;

package/dist/components/forms/forms.theme.js

@@ -9,11 +9,13 @@ const formsBaseTheme = {
     wrapperStyle: "relative w-full",
     // Common input group style with focus, hover, and state variations
     inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "focus-within:shadow-[inset_0_0_0_2px_var(--color-primary-600)] " +
-        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all " +
-        // Dark mode
-        "dark:bg-[var(--color-neutral-900)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] " +
-        "dark:focus-within:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
+        "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-[var(--color-surface)] transition-all " +
+        // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
+        // not-focus-within so focus (primary border) always wins; the token flips for dark mode.
+        "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
+        // Dark focus mirror (fill comes from --color-surface, which flips automatically)
+        "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
     controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
         "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
@@ -45,24 +47,28 @@ const formsBaseTheme = {
     states: {
         default: "",
         disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
+            // Suppress the hover-edge change while disabled (keep the resting border)
+            "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border)] " +
             "[&_input]:text-[var(--color-text-disabled)] [&_textarea]:text-[var(--color-text-disabled)] " +
             "[&_select]:text-[var(--color-text-disabled)] [&_input]:cursor-not-allowed " +
             "[&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed " +
             "[&_input]:placeholder:text-[var(--color-text-placeholder)] " +
             "[&_textarea]:placeholder:text-[var(--color-text-placeholder)] " +
-            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed " +
-            // Dark mode
-            "dark:bg-[var(--color-neutral-800)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]",
-        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] focus-within:shadow-[inset_0_0_0_2px_var(--color-danger)] " +
+            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed",
+        // (--color-background-disabled already flips for dark mode)
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
+            // Keep the danger border on hover (don't let the hover edge override it)
+            "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
             // Dark mode
-            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
+            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] " +
+            "dark:not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Common focus state variants
     focusStates: {
-        default: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
-            "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+        default: "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
+            "dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
         disabled: "shadow-none",
-        invalid: "shadow-[inset_0_0_0_2px_var(--color-danger-500)] ring-4 ring-[var(--color-danger-500)]/10 " +
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger-500)] ring-4 ring-[var(--color-danger-500)]/10 " +
             "dark:ring-[var(--color-danger-500)]/20",
     },
     // Common hover state variants
@@ -89,9 +95,8 @@ const formsBaseTheme = {
     dropdownStyles: {
         // Container for dropdown panel
         container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
-            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
-            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none " +
-            "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
+            "rounded-[var(--form-radius)] bg-[var(--color-surface-overlay)]/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
+            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none",
         // Base option style
         option: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
             "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +

package/dist/components/forms/index.js

@@ -58,6 +58,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';
@@ -108,6 +109,8 @@ 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';

package/dist/components/layout/AppShell/AppShell.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { AppShellProps } from "./AppShell.types";
+export declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>> & {
+    Topbar: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellTopbarProps & React.RefAttributes<HTMLElement>>;
+    Sidebar: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellSidebarProps & React.RefAttributes<HTMLElement>>;
+    Header: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
+    Main: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellMainProps & React.RefAttributes<HTMLElement>>;
+    RightPanel: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellRightPanelProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./AppShell.types").AppShellFooterProps & React.RefAttributes<HTMLElement>>;
+};

package/dist/components/layout/AppShell/AppShell.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+import { AppShellProvider } from './AppShellContext.js';
+import { AppShellTopbar } from './AppShellTopbar.js';
+import { AppShellSidebar } from './AppShellSidebar.js';
+import { AppShellHeader } from './AppShellHeader.js';
+import { AppShellMain } from './AppShellMain.js';
+import { AppShellRightPanel } from './AppShellRightPanel.js';
+import { AppShellFooter } from './AppShellFooter.js';
+
+const AppShellRoot = React__default.forwardRef(({ className, theme: customTheme, scroll = "viewport", topbarSpan = "full", footerSpan = "full", contentWidth = "full", contentPadding = "md", children, ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    const contextValue = React__default.useMemo(() => ({ scroll, contentWidth, contentPadding }), [scroll, contentWidth, contentPadding]);
+    // Bucket children by slot type. Header is intentionally NOT bucketed —
+    // it is user-composed inside AppShell.Main.
+    let topbar = null;
+    let sidebar = null;
+    let main = null;
+    let rightPanel = null;
+    let footer = null;
+    React__default.Children.forEach(children, (child) => {
+        if (!React__default.isValidElement(child))
+            return;
+        const type = child.type;
+        if (type === AppShellTopbar) {
+            if (topbar === null)
+                topbar = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Topbar children; keeping the first.");
+            }
+        }
+        else if (type === AppShellSidebar) {
+            if (sidebar === null)
+                sidebar = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Sidebar children; keeping the first.");
+            }
+        }
+        else if (type === AppShellMain) {
+            if (main === null)
+                main = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Main children; keeping the first.");
+            }
+        }
+        else if (type === AppShellRightPanel) {
+            if (rightPanel === null)
+                rightPanel = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.RightPanel children; keeping the first.");
+            }
+        }
+        else if (type === AppShellFooter) {
+            if (footer === null)
+                footer = child;
+            else if (process.env.NODE_ENV !== "production") {
+                console.warn("[AppShell]: multiple AppShell.Footer children; keeping the first.");
+            }
+        }
+        else if (process.env.NODE_ENV !== "production") {
+            console.warn("[AppShell]: unknown child rendered; expected one of " +
+                "AppShell.Topbar / Sidebar / Main / RightPanel / Footer. " +
+                "AppShell.Header is composed inside AppShell.Main.");
+        }
+    });
+    const topbarInChrome = topbar !== null && topbarSpan === "full";
+    const topbarInMain = topbar !== null && topbarSpan === "main";
+    const footerInChrome = footer !== null && footerSpan === "full";
+    const footerInMain = footer !== null && footerSpan === "main";
+    return (jsx(AppShellProvider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(theme.root, scroll === "viewport" && theme.rootViewport, className), ...props, children: [topbarInChrome && topbar, jsxs("div", { className: theme.shell, children: [sidebar, jsxs("div", { className: theme.mainColumn, children: [topbarInMain && topbar, main, footerInMain && footer] }), rightPanel] }), footerInChrome && footer] }) }));
+});
+AppShellRoot.displayName = "AppShell";
+const AppShell = Object.assign(AppShellRoot, {
+    Topbar: AppShellTopbar,
+    Sidebar: AppShellSidebar,
+    Header: AppShellHeader,
+    Main: AppShellMain,
+    RightPanel: AppShellRightPanel,
+    Footer: AppShellFooter,
+});
+
+export { AppShell };

package/dist/components/layout/AppShell/AppShell.theme.d.ts

@@ -0,0 +1,3 @@
+import type { AppShellTheme, AppShellThemeOverrides } from "./AppShell.types";
+export declare const appShellTheme: AppShellTheme;
+export declare const getAppShellTheme: (customTheme?: AppShellThemeOverrides) => AppShellTheme;

package/dist/components/layout/AppShell/AppShell.theme.js

@@ -0,0 +1,42 @@
+const appShellTheme = {
+    root: "flex flex-col bg-[var(--color-background)] text-[var(--color-text-primary)]",
+    rootViewport: "h-screen overflow-hidden",
+    shell: "flex flex-1 min-h-0 min-w-0",
+    mainColumn: "flex flex-col flex-1 min-h-0 min-w-0",
+    topbar: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
+    sidebar: "flex flex-col shrink-0 overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-background)]/95 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/85",
+    sidebarScroll: "min-h-0 flex-1",
+    sidebarCollapsed: "hidden lg:flex",
+    header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
+    main: "flex flex-col flex-1 min-h-0 min-w-0",
+    mainScroll: "min-h-0 flex-1",
+    mainInner: "mx-auto w-full",
+    rightPanel: "flex flex-col shrink-0 overflow-hidden border-l border-[var(--color-border)] bg-[var(--color-background)]/95 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/85",
+    rightPanelScroll: "min-h-0 flex-1",
+    footer: "shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
+    contentPadding: {
+        none: "p-0",
+        sm: "p-3 sm:p-4",
+        md: "p-4 sm:p-6 lg:p-8",
+        lg: "p-5 sm:p-8 lg:p-10",
+    },
+    contentWidth: {
+        full: "max-w-none",
+        wide: "max-w-7xl",
+        contained: "max-w-5xl",
+    },
+};
+const getAppShellTheme = (customTheme) => ({
+    ...appShellTheme,
+    ...customTheme,
+    contentPadding: {
+        ...appShellTheme.contentPadding,
+        ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.contentPadding,
+    },
+    contentWidth: {
+        ...appShellTheme.contentWidth,
+        ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.contentWidth,
+    },
+});
+
+export { appShellTheme, getAppShellTheme };

package/dist/components/layout/AppShell/AppShell.types.d.ts

@@ -0,0 +1,127 @@
+import React from "react";
+export type AppShellScroll = "viewport" | "page";
+export type AppShellSpan = "full" | "main";
+export type AppShellContentWidth = "full" | "wide" | "contained";
+export type AppShellContentPadding = "none" | "sm" | "md" | "lg";
+export interface AppShellTheme {
+    /** Outer root container (column layout). */
+    root: string;
+    /** Extra classes applied when `scroll="viewport"`. */
+    rootViewport: string;
+    /** Row container holding sidebar / main column / right panel. */
+    shell: string;
+    /** The middle column (Topbar-in-main? Main, Footer-in-main?). */
+    mainColumn: string;
+    topbar: string;
+    sidebar: string;
+    sidebarScroll: string;
+    sidebarCollapsed: string;
+    header: string;
+    main: string;
+    mainScroll: string;
+    mainInner: string;
+    rightPanel: string;
+    rightPanelScroll: string;
+    footer: string;
+    contentPadding: Record<AppShellContentPadding, string>;
+    contentWidth: Record<AppShellContentWidth, string>;
+}
+export interface AppShellThemeOverrides {
+    root?: string;
+    rootViewport?: string;
+    shell?: string;
+    mainColumn?: string;
+    topbar?: string;
+    sidebar?: string;
+    sidebarScroll?: string;
+    sidebarCollapsed?: string;
+    header?: string;
+    main?: string;
+    mainScroll?: string;
+    mainInner?: string;
+    rightPanel?: string;
+    rightPanelScroll?: string;
+    footer?: string;
+    contentPadding?: Partial<Record<AppShellContentPadding, string>>;
+    contentWidth?: Partial<Record<AppShellContentWidth, string>>;
+}
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Scroll model. `"viewport"` makes the root `h-screen overflow-hidden`
+     * and only `Main` scrolls. `"page"` lets the whole document scroll.
+     * @default "viewport"
+     */
+    scroll?: AppShellScroll;
+    /**
+     * Whether the Topbar spans the full viewport width (over the Sidebar)
+     * or only sits above Main + RightPanel.
+     * @default "full"
+     */
+    topbarSpan?: AppShellSpan;
+    /**
+     * Whether the Footer spans the full viewport width (under the Sidebar)
+     * or only sits below Main + RightPanel.
+     * @default "full"
+     */
+    footerSpan?: AppShellSpan;
+    /**
+     * Max content width applied to AppShell.Main when not overridden.
+     * @default "full"
+     */
+    contentWidth?: AppShellContentWidth;
+    /**
+     * Responsive content padding applied to AppShell.Main when not overridden.
+     * @default "md"
+     */
+    contentPadding?: AppShellContentPadding;
+    /**
+     * Theme overrides for the AppShell root wrapper (root, shell, mainColumn).
+     * Style individual slots via their own `theme` props on each sub-component.
+     */
+    theme?: AppShellThemeOverrides;
+}
+export interface AppShellTopbarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Stick to top of chrome. Only meaningful when `scroll="page"`. @default true */
+    sticky?: boolean;
+    /** Theme overrides. */
+    theme?: AppShellThemeOverrides;
+}
+export interface AppShellSidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /** CSS width value. @default "16rem" */
+    width?: string;
+    /** Hide on mobile (below `lg`). @default true */
+    collapsedOnMobile?: boolean;
+    /** Theme overrides. */
+    theme?: AppShellThemeOverrides;
+}
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Stick to top of the scrolling Main region. Header sticks at its position
+     * inside Main's content padding; for a flush edge-to-edge sticky bar, use
+     * AppShell.Topbar instead.
+     * @default true
+     */
+    sticky?: boolean;
+    /** Theme overrides. */
+    theme?: AppShellThemeOverrides;
+}
+export interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {
+    /** Max content width. Inherits from AppShell when omitted. */
+    contentWidth?: AppShellContentWidth;
+    /** Responsive padding. Inherits from AppShell when omitted. */
+    contentPadding?: AppShellContentPadding;
+    /** Theme overrides. */
+    theme?: AppShellThemeOverrides;
+}
+export interface AppShellRightPanelProps extends React.HTMLAttributes<HTMLElement> {
+    /** CSS width value. @default "20rem" */
+    width?: string;
+    /** Theme overrides. */
+    theme?: AppShellThemeOverrides;
+}
+export interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** Stick to bottom of chrome. Only meaningful when `scroll="page"`. @default true */
+    sticky?: boolean;
+    /** Theme overrides. */
+    theme?: AppShellThemeOverrides;
+}

package/dist/components/layout/AppShell/AppShellContext.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { AppShellContentPadding, AppShellContentWidth, AppShellScroll } from "./AppShell.types";
+export interface AppShellContextValue {
+    scroll: AppShellScroll;
+    contentWidth: AppShellContentWidth;
+    contentPadding: AppShellContentPadding;
+}
+export declare const AppShellProvider: React.Provider<AppShellContextValue | undefined>;
+/**
+ * Reads AppShell root context. Returns sensible defaults when used outside
+ * an `<AppShell>` (so individual slot components remain usable standalone
+ * for testing or partial composition).
+ */
+export declare const useAppShellContext: () => AppShellContextValue;

package/dist/components/layout/AppShell/AppShellContext.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+
+const AppShellContext = React__default.createContext(undefined);
+const AppShellProvider = AppShellContext.Provider;
+/**
+ * Reads AppShell root context. Returns sensible defaults when used outside
+ * an `<AppShell>` (so individual slot components remain usable standalone
+ * for testing or partial composition).
+ */
+const useAppShellContext = () => {
+    const ctx = React__default.useContext(AppShellContext);
+    return (ctx !== null && ctx !== void 0 ? ctx : {
+        scroll: "viewport",
+        contentWidth: "full",
+        contentPadding: "md",
+    });
+};
+
+export { AppShellProvider, useAppShellContext };

package/dist/components/layout/AppShell/AppShellFooter.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { AppShellFooterProps } from "./AppShell.types";
+export declare const AppShellFooter: React.ForwardRefExoticComponent<AppShellFooterProps & React.RefAttributes<HTMLElement>>;