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

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>>;

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';
@@ -77,17 +78,19 @@ import '../../core/Sidebar/SidebarContent.js';
 import '../../core/Sidebar/SidebarFooter.js';
 import '../../core/Sidebar/SidebarNav.js';
 import '../../core/Sidebar/SidebarNavGroup.js';
-import 'motion/react';
 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 { formLayoutTheme } from './FormLayout.theme.js';
 import { FormLayoutSection } from './FormLayoutSection.js';
 import { FormLayoutFooter } from './FormLayoutFooter.js';
@@ -95,13 +98,15 @@ import { FormLayoutFooter } from './FormLayoutFooter.js';
 const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
 const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
     const theme = { ...formLayoutTheme, ...customTheme };
-    // Inject <Separator /> between any adjacent children, unless one of them is Footer
-    // (Footer already has border-t, so no separator needed before it)
+    // Inject <Separator /> between any adjacent children, unless one of them is Footer.
     const childArray = React__default.Children.toArray(children).filter(Boolean);
     const rendered = childArray.map((child, index) => {
         const prev = childArray[index - 1];
         const needsSeparator = index > 0 && !isFooter(child) && !isFooter(prev);
-        return (jsxs(React__default.Fragment, { children: [needsSeparator && jsx(Separator, {}), child] }, index));
+        const childKey = React__default.isValidElement(child) && child.key != null
+            ? child.key
+            : `form-layout-child-${index}`;
+        return (jsxs(React__default.Fragment, { children: [needsSeparator && jsx(Separator, {}), child] }, childKey));
     });
     return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: rendered }));
 });

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

@@ -25,11 +25,11 @@ export interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Theme overrides for the root container. */
     theme?: FormLayoutThemeOverrides;
 }
-export interface FormLayoutSectionProps extends React.HTMLAttributes<HTMLElement> {
+export interface FormLayoutSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     /** Optional section title. If omitted along with subtitle and action, the sidebar column is hidden. */
-    title?: string;
+    title?: React.ReactNode;
     /** Optional subtitle displayed below the title. */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** Optional action element rendered below the subtitle. */
     action?: React.ReactNode;
     /** Additional className applied to the content area. */

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

@@ -4,9 +4,14 @@ import { cn } from '../../../utils/cn.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 
 const FormLayoutSection = React__default.forwardRef(({ title, subtitle, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
+    var _a;
     const theme = { ...formLayoutTheme, ...customTheme };
     const hasSidebar = !!(title || subtitle || action);
-    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [hasSidebar && (jsxs("div", { className: theme.sectionSidebar, children: [title && jsx("div", { className: theme.sectionTitle, children: title }), subtitle && (jsx("div", { className: theme.sectionSubtitle, children: subtitle })), action && jsx("div", { className: theme.sectionAction, children: action })] })), jsx("div", { className: cn(hasSidebar ? theme.sectionContent : theme.sectionContentFull, contentClassName), children: children })] }));
+    const generatedTitleId = React__default.useId();
+    const titleId = title
+        ? (_a = props["aria-labelledby"]) !== null && _a !== void 0 ? _a : generatedTitleId
+        : props["aria-labelledby"];
+    return (jsxs("section", { ref: ref, className: cn(theme.section, className), "aria-labelledby": titleId, ...props, children: [hasSidebar && (jsxs("div", { className: theme.sectionSidebar, children: [title && (jsx("h2", { id: titleId, className: theme.sectionTitle, children: title })), subtitle && (jsx("div", { className: theme.sectionSubtitle, children: subtitle })), action && jsx("div", { className: theme.sectionAction, children: action })] })), jsx("div", { className: cn(hasSidebar ? theme.sectionContent : theme.sectionContentFull, contentClassName), children: children })] }));
 });
 FormLayoutSection.displayName = "FormLayout.Section";
 

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

@@ -1,7 +1,7 @@
 import React from "react";
-import type { PageLayoutProps } from "./PageLayout.types";
+import type { PageLayoutContentProps, PageLayoutProps } from "./PageLayout.types";
 export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>> & {
     Sidebar: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutSidebarProps & React.RefAttributes<HTMLElement>>;
     Header: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutHeaderProps & React.RefAttributes<HTMLElement>>;
-    Content: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutContentProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<PageLayoutContentProps & React.RefAttributes<HTMLElement>>;
 };

package/dist/components/layout/PageLayout/PageLayout.js

@@ -1,13 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
+import { getPageLayoutTheme } from './PageLayout.theme.js';
 import { PageLayoutSidebar } from './PageLayoutSidebar.js';
 import { PageLayoutHeader } from './PageLayoutHeader.js';
 import { PageLayoutContent } from './PageLayoutContent.js';
 
-const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
-    const theme = { ...pageLayoutTheme, ...customTheme };
+const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, variant = "auto", contentWidth = "full", contentPadding = "md", children, ...props }, ref) => {
+    const theme = getPageLayoutTheme(customTheme);
     // Separate Sidebar children from the rest (Header, Content)
     // so we can wrap non-sidebar children in a vertical main column.
     const childArray = React__default.Children.toArray(children);
@@ -21,7 +21,25 @@ const PageLayoutRoot = React__default.forwardRef(({ className, theme: customThem
             main.push(child);
         }
     });
-    return (jsxs("div", { ref: ref, className: cn(theme.root, className), ...props, children: [sidebar, jsx("div", { className: cn(theme.main), children: main })] }));
+    const resolvedVariant = variant === "auto"
+        ? sidebar.length > 0
+            ? "sidebar"
+            : "topbar"
+        : variant;
+    const mainChildren = main.map((child) => {
+        var _a, _b;
+        if (React__default.isValidElement(child) &&
+            child.type === PageLayoutContent) {
+            return React__default.cloneElement(child, {
+                contentWidth: (_a = child.props.contentWidth) !== null && _a !== void 0 ? _a : contentWidth,
+                contentPadding: (_b = child.props.contentPadding) !== null && _b !== void 0 ? _b : contentPadding,
+            });
+        }
+        return child;
+    });
+    return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: jsxs("div", { className: cn(theme.shell, resolvedVariant === "sidebar"
+                ? theme.sidebarLayout
+                : theme.topbarLayout), children: [resolvedVariant === "sidebar" && sidebar, jsx("div", { className: cn(theme.main), children: mainChildren })] }) }));
 });
 PageLayoutRoot.displayName = "PageLayout";
 const PageLayout = Object.assign(PageLayoutRoot, {

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

@@ -1,2 +1,3 @@
-import type { PageLayoutTheme } from "./PageLayout.types";
+import type { PageLayoutTheme, PageLayoutThemeOverrides } from "./PageLayout.types";
 export declare const pageLayoutTheme: PageLayoutTheme;
+export declare const getPageLayoutTheme: (customTheme?: PageLayoutThemeOverrides) => PageLayoutTheme;

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

@@ -1,10 +1,39 @@
 const pageLayoutTheme = {
-    root: "flex h-screen overflow-hidden bg-[var(--color-background)]",
-    sidebar: "flex flex-col shrink-0 border-r border-[var(--color-border)] bg-[var(--color-background-secondary)] overflow-y-auto",
+    root: "min-h-screen overflow-hidden bg-white text-[var(--color-text-primary)]",
+    shell: "h-full min-h-[inherit] min-w-0",
+    sidebarLayout: "flex",
+    topbarLayout: "flex flex-col",
+    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",
-    main: "flex flex-col flex-1 min-w-0 overflow-hidden",
-    header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]",
-    content: "flex-1 overflow-y-auto",
+    main: "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden",
+    header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
+    content: "flex flex-1 min-h-0 min-w-0",
+    contentScroll: "min-h-0 flex-1",
+    contentInner: "mx-auto w-full",
+    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 getPageLayoutTheme = (customTheme) => ({
+    ...pageLayoutTheme,
+    ...customTheme,
+    contentPadding: {
+        ...pageLayoutTheme.contentPadding,
+        ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.contentPadding,
+    },
+    contentWidth: {
+        ...pageLayoutTheme.contentWidth,
+        ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.contentWidth,
+    },
+});
 
-export { pageLayoutTheme };
+export { getPageLayoutTheme, pageLayoutTheme };

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

@@ -1,21 +1,56 @@
 import React from "react";
 export interface PageLayoutTheme {
     root: string;
+    shell: string;
+    sidebarLayout: string;
+    topbarLayout: string;
     sidebar: string;
+    sidebarScroll: string;
     sidebarCollapsed: string;
     main: string;
     header: string;
     content: string;
+    contentScroll: string;
+    contentInner: string;
+    contentPadding: Record<PageLayoutContentPadding, string>;
+    contentWidth: Record<PageLayoutContentWidth, string>;
 }
 export interface PageLayoutThemeOverrides {
     root?: string;
+    shell?: string;
+    sidebarLayout?: string;
+    topbarLayout?: string;
     sidebar?: string;
+    sidebarScroll?: string;
     sidebarCollapsed?: string;
     main?: string;
     header?: string;
     content?: string;
+    contentScroll?: string;
+    contentInner?: string;
+    contentPadding?: Partial<Record<PageLayoutContentPadding, string>>;
+    contentWidth?: Partial<Record<PageLayoutContentWidth, string>>;
 }
+export type PageLayoutVariant = "auto" | "sidebar" | "topbar";
+export type PageLayoutContentWidth = "full" | "wide" | "contained";
+export type PageLayoutContentPadding = "none" | "sm" | "md" | "lg";
 export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout variant. "auto" uses sidebar layout when a PageLayout.Sidebar child
+     * is present, otherwise it uses the topbar layout.
+     * @default "auto"
+     */
+    variant?: PageLayoutVariant;
+    /**
+     * Maximum content width applied to PageLayout.Content children.
+     * @default "full"
+     */
+    contentWidth?: PageLayoutContentWidth;
+    /**
+     * Responsive padding applied to PageLayout.Content children.
+     * @default "md"
+     */
+    contentPadding?: PageLayoutContentPadding;
     /** Theme overrides for the root container. */
     theme?: PageLayoutThemeOverrides;
 }
@@ -34,6 +69,16 @@ export interface PageLayoutHeaderProps extends React.HTMLAttributes<HTMLElement>
     theme?: PageLayoutThemeOverrides;
 }
 export interface PageLayoutContentProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Maximum content width. Inherits from PageLayout when omitted.
+     * @default "full"
+     */
+    contentWidth?: PageLayoutContentWidth;
+    /**
+     * Responsive padding. Inherits from PageLayout when omitted.
+     * @default "md"
+     */
+    contentPadding?: PageLayoutContentPadding;
     /** Theme overrides for the content area. */
     theme?: PageLayoutThemeOverrides;
 }

package/dist/components/layout/PageLayout/PageLayoutContent.js

@@ -1,11 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { pageLayoutTheme } from './PageLayout.theme.js';
+import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import { getPageLayoutTheme } from './PageLayout.theme.js';
 
-const PageLayoutContent = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
-    const theme = { ...pageLayoutTheme, ...customTheme };
-    return (jsx("main", { ref: ref, className: cn(theme.content, className), ...props, children: children }));
+const PageLayoutContent = React__default.forwardRef(({ className, theme: customTheme, contentWidth = "full", contentPadding = "md", children, ...props }, ref) => {
+    const theme = getPageLayoutTheme(customTheme);
+    return (jsx("main", { ref: ref, className: cn(theme.content, className), ...props, children: jsx(ScrollArea, { type: "hover", size: "thin", className: theme.contentScroll, children: jsx("div", { className: cn(theme.contentInner, theme.contentWidth[contentWidth], theme.contentPadding[contentPadding]), children: children }) }) }));
 });
 PageLayoutContent.displayName = "PageLayout.Content";