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

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+
+const AppShellFooter = React__default.forwardRef(({ sticky = true, className, theme: customTheme, children, ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    return (jsx("footer", { ref: ref, className: cn(theme.footer, sticky && "sticky bottom-0 z-20", className), ...props, children: children }));
+});
+AppShellFooter.displayName = "AppShell.Footer";
+
+export { AppShellFooter };

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

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

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+
+const AppShellHeader = React__default.forwardRef(({ sticky = true, className, theme: customTheme, children, ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    return (jsx("header", { ref: ref, className: cn(theme.header, sticky && "sticky top-0 z-10", className), ...props, children: children }));
+});
+AppShellHeader.displayName = "AppShell.Header";
+
+export { AppShellHeader };

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

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

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+import { useAppShellContext } from './AppShellContext.js';
+
+const AppShellMain = React__default.forwardRef(({ className, theme: customTheme, contentWidth, contentPadding, children, ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    const ctx = useAppShellContext();
+    const resolvedWidth = contentWidth !== null && contentWidth !== void 0 ? contentWidth : ctx.contentWidth;
+    const resolvedPadding = contentPadding !== null && contentPadding !== void 0 ? contentPadding : ctx.contentPadding;
+    const inner = (jsx("div", { className: cn(theme.mainInner, theme.contentWidth[resolvedWidth], theme.contentPadding[resolvedPadding]), children: children }));
+    return (jsx("main", { ref: ref, className: cn(theme.main, className), ...props, children: ctx.scroll === "viewport" ? (jsx(ScrollArea, { type: "hover", size: "thin", className: theme.mainScroll, children: inner })) : (inner) }));
+});
+AppShellMain.displayName = "AppShell.Main";
+
+export { AppShellMain };

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

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

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

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+import { useAppShellContext } from './AppShellContext.js';
+
+const AppShellRightPanel = React__default.forwardRef(({ width = "20rem", className, theme: customTheme, style, children, "aria-label": ariaLabel = "Secondary", ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    const ctx = useAppShellContext();
+    return (jsx("aside", { ref: ref, "aria-label": ariaLabel, className: cn(theme.rightPanel, className), style: { width, ...style }, ...props, children: ctx.scroll === "viewport" ? (jsx(ScrollArea, { type: "hover", size: "thin", className: theme.rightPanelScroll, children: children })) : (children) }));
+});
+AppShellRightPanel.displayName = "AppShell.RightPanel";
+
+export { AppShellRightPanel };

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

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

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

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+import { useAppShellContext } from './AppShellContext.js';
+
+const AppShellSidebar = React__default.forwardRef(({ width = "16rem", collapsedOnMobile = true, className, theme: customTheme, style, children, "aria-label": ariaLabel = "Primary", ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    const ctx = useAppShellContext();
+    return (jsx("aside", { ref: ref, "aria-label": ariaLabel, className: cn(theme.sidebar, collapsedOnMobile && theme.sidebarCollapsed, className), style: { width, ...style }, ...props, children: ctx.scroll === "viewport" ? (jsx(ScrollArea, { type: "hover", size: "thin", className: theme.sidebarScroll, children: children })) : (children) }));
+});
+AppShellSidebar.displayName = "AppShell.Sidebar";
+
+export { AppShellSidebar };

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

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

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { getAppShellTheme } from './AppShell.theme.js';
+
+const AppShellTopbar = React__default.forwardRef(({ sticky = true, className, theme: customTheme, children, ...props }, ref) => {
+    const theme = getAppShellTheme(customTheme);
+    return (jsx("header", { ref: ref, className: cn(theme.topbar, sticky && "sticky top-0 z-20", className), ...props, children: children }));
+});
+AppShellTopbar.displayName = "AppShell.Topbar";
+
+export { AppShellTopbar };

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

@@ -0,0 +1,3 @@
+export { AppShell } from "./AppShell";
+export type { AppShellProps, AppShellTopbarProps, AppShellSidebarProps, AppShellHeaderProps, AppShellMainProps, AppShellRightPanelProps, AppShellFooterProps, AppShellScroll, AppShellSpan, AppShellContentWidth, AppShellContentPadding, AppShellTheme, AppShellThemeOverrides, } from "./AppShell.types";
+export { appShellTheme, getAppShellTheme } from "./AppShell.theme";

package/dist/components/layout/FormLayout/FormLayout.js

@@ -30,6 +30,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';
@@ -81,6 +82,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/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./FormLayout";
 export * from "./PageLayout";
+export * from "./AppShell";

package/dist/components/layout/index.js

@@ -2,3 +2,5 @@ export { FormLayout } from './FormLayout/FormLayout.js';
 export { formLayoutTheme } from './FormLayout/FormLayout.theme.js';
 export { PageLayout } from './PageLayout/PageLayout.js';
 export { pageLayoutTheme } from './PageLayout/PageLayout.theme.js';
+export { AppShell } from './AppShell/AppShell.js';
+export { appShellTheme, getAppShellTheme } from './AppShell/AppShell.theme.js';

package/dist/hooks/useSelectPortal.d.ts

@@ -8,6 +8,14 @@ export interface UseSimpleDropdownOptions {
     autoWidth?: boolean;
     onClose?: () => void;
     stickyTracking?: boolean;
+    /**
+     * Clamp the dropdown horizontally so it never overflows the viewport edges.
+     * Runs even when `stickyTracking` is on, because horizontal position is
+     * independent of vertical scroll and so cannot fight the scroll-follow
+     * behavior. Vertical clamping remains gated on `!stickyTracking`.
+     * @default true
+     */
+    clampToViewport?: boolean;
 }
 export interface SimpleDropdownReturn {
     position: {
@@ -26,5 +34,5 @@ export interface SimpleDropdownReturn {
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
-export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;

package/dist/hooks/useSelectPortal.js

@@ -6,7 +6,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffec
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, stickyTracking = false, }) => {
+const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, stickyTracking = false, clampToViewport = true, }) => {
     const contentRef = useRef(null);
     const [position, setPosition] = useState({ top: -9999, left: -9999, width: 0 });
     const [cssVariables, setCssVariables] = useState({});
@@ -169,28 +169,31 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
                 left = rect.right + offset;
             }
         }
-        // Collision detection - handle both horizontal and vertical overflow
-        // Skip clamping for stickyTracking so the dropdown follows the trigger past viewport edges
-        if (!stickyTracking) {
+        // Collision detection. Horizontal clamping runs whenever `clampToViewport`
+        // is on (default) — even with stickyTracking — because horizontal position
+        // is independent of vertical scroll and so cannot fight scroll-follow.
+        // Vertical clamping stays gated on `!stickyTracking` so the dropdown can
+        // follow the trigger past the top/bottom viewport edges during scroll.
+        if (clampToViewport) {
             // Horizontal bounds checking
             const rightEdge = left + dropdownWidth;
             const overflow = rightEdge - (viewportWidth - margin);
             if (overflow > 0) {
                 // Shift left just enough to fit
                 const shiftedLeft = left - overflow;
-                if (shiftedLeft >= margin) {
-                    left = shiftedLeft;
-                }
-                else {
-                    // Clamp to viewport margin
-                    left = margin;
-                }
+                left = shiftedLeft >= margin ? shiftedLeft : margin;
             }
             // Handle left edge overflow
             if (left < margin) {
                 left = margin;
             }
-            // Vertical bounds checking
+        }
+        {
+            // Vertical clamp runs on every calculatePosition — initial open, resize,
+            // and the non-sticky scroll path. The sticky scroll-follow path
+            // (updatePositionInDOM) stays unclamped so the popover tracks the trigger
+            // past the top/bottom edges during scroll. Clamping here means a sticky
+            // popover still OPENS fully on-screen even in a short viewport.
             const bottomEdge = top + dropdownHeight;
             const verticalOverflow = bottomEdge - (viewportHeight - margin);
             if (verticalOverflow > 0) {
@@ -210,13 +213,19 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
             }
         }
         setPosition({ top, left, width: dropdownWidth });
-        // Calculate available space based on placement direction
+        // Calculate available space (drives the scrollable max-height var).
+        // Sticky overlays (Popover/Dropdown) clamp their open position to the
+        // viewport, so they can occupy the full usable viewport height regardless
+        // of which side of the trigger they sit on — size against that, not just
+        // the cramped space below. Non-sticky dropdowns (Select) keep per-side
+        // space so they never grow over their trigger.
+        const usableViewportHeight = viewportHeight - margin * 2 - offset;
         let availableSpace = 0;
         if (finalPlacement.startsWith("top")) {
-            availableSpace = spaceAbove - offset;
+            availableSpace = stickyTracking ? usableViewportHeight : spaceAbove - offset;
         }
         else if (finalPlacement.startsWith("bottom")) {
-            availableSpace = spaceBelow - offset;
+            availableSpace = stickyTracking ? usableViewportHeight : spaceBelow - offset;
         }
         else if (finalPlacement.startsWith("left")) {
             availableSpace = spaceLeft - offset;
@@ -240,7 +249,7 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         }
         setCssVariables(cssVars);
         // Mark initial render as complete after first calculation
-    }, [measureDropdownHeight, measureDropdownWidth, offset, placement, triggerRef, stickyTracking]);
+    }, [measureDropdownHeight, measureDropdownWidth, offset, placement, triggerRef, stickyTracking, clampToViewport]);
     // Direct DOM mutation for stickyTracking — bypasses React state for zero-lag scroll tracking
     const updatePositionInDOM = useCallback(() => {
         if (!triggerRef.current || !contentRef.current)
@@ -285,9 +294,22 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
                 left = rect.right + offset;
             }
         }
+        // Keep horizontal clamping consistent with calculatePosition so the popover
+        // doesn't re-overflow the right edge when scroll-tracking recomputes position.
+        if (clampToViewport) {
+            const margin = 16;
+            const viewportWidth = window.innerWidth;
+            const overflow = left + dropdownWidth - (viewportWidth - margin);
+            if (overflow > 0) {
+                const shiftedLeft = left - overflow;
+                left = shiftedLeft >= margin ? shiftedLeft : margin;
+            }
+            if (left < margin)
+                left = margin;
+        }
         contentRef.current.style.top = `${top}px`;
         contentRef.current.style.left = `${left}px`;
-    }, [triggerRef, measureDropdownHeight, measureDropdownWidth, offset]);
+    }, [triggerRef, measureDropdownHeight, measureDropdownWidth, offset, clampToViewport]);
     // Reset initial render flag when dropdown opens
     useIsomorphicLayoutEffect(() => {
         if (typeof window === 'undefined')
@@ -395,18 +417,17 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         if (typeof ResizeObserver === "undefined")
             return;
         const observer = new ResizeObserver(() => {
-            if (stickyTracking) {
-                updatePositionInDOM();
-            }
-            else {
-                calculatePosition();
-            }
+            // Content resize (incl. the initial settle right after open) goes through
+            // calculatePosition so the popover re-fits and stays vertically clamped to
+            // the viewport. Only the scroll path uses the unclamped updatePositionInDOM
+            // follow — otherwise the resize-on-open would immediately undo the clamp.
+            calculatePosition();
         });
         observer.observe(contentRef.current);
         return () => {
             observer.disconnect();
         };
-    }, [isOpen, calculatePosition, stickyTracking, updatePositionInDOM]);
+    }, [isOpen, calculatePosition]);
     return {
         position,
         cssVariables,

package/dist/index.js

@@ -32,6 +32,8 @@ export { DropdownItem } from './components/core/Dropdown/DropdownItem.js';
 export { DropdownSection } from './components/core/Dropdown/DropdownSection.js';
 export { DropdownSeparator } from './components/core/Dropdown/DropdownSeparator.js';
 export { dropdownTheme } from './components/core/Dropdown/Dropdown.theme.js';
+export { DotSeparator } from './components/core/DotSeparator/DotSeparator.js';
+export { dotSeparatorTheme } from './components/core/DotSeparator/DotSeparator.theme.js';
 export { Kbd } from './components/core/Kbd/Kbd.js';
 export { MenuItem } from './components/core/MenuItem/MenuItem.js';
 export { menuItemTheme } from './components/core/MenuItem/MenuItem.theme.js';
@@ -100,6 +102,8 @@ export { SidebarToggle } from './components/core/Sidebar/SidebarToggle.js';
 export { SidebarMobileTrigger } from './components/core/Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './components/core/Sidebar/SidebarUserProfile.js';
 export { SidebarLogo } from './components/core/Sidebar/SidebarLogo.js';
+export { SidebarSearch } from './components/core/Sidebar/SidebarSearch.js';
+export { SidebarCard } from './components/core/Sidebar/SidebarCard.js';
 export { SidebarProvider, useSidebarContext } from './components/core/Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './components/core/OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './components/core/OfflineIndicator/OfflineIndicator.theme.js';
@@ -200,6 +204,8 @@ export { FormLayout } from './components/layout/FormLayout/FormLayout.js';
 export { formLayoutTheme } from './components/layout/FormLayout/FormLayout.theme.js';
 export { PageLayout } from './components/layout/PageLayout/PageLayout.js';
 export { pageLayoutTheme } from './components/layout/PageLayout/PageLayout.theme.js';
+export { AppShell } from './components/layout/AppShell/AppShell.js';
+export { appShellTheme, getAppShellTheme } from './components/layout/AppShell/AppShell.theme.js';
 export { debounce } from './utils/debounce.js';
 export { useClickOutside } from './hooks/useClickOutside.js';
 export { useOverlay } from './hooks/useOverlay.js';