@vezham/react 26.0.0-alpha.4 → 26.0.0-alpha.6

package/dist/lib/components/workspace-navigation/index.js

@@ -0,0 +1,74 @@
+import { useCommand } from "../command/index.js";
+import { useInfoPanel } from "../panel/info-panel/provider.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useHotkey } from "@tanstack/react-hotkeys";
+//#region src/lib/components/workspace-navigation/index.tsx
+var WorkspaceNavigationContext = createContext(null);
+/**
+* Coordinates every persistent navigation surface in the application. Keeping
+* this state in one provider means a collapse starts as one React update rather
+* than each sidebar reacting independently.
+*/
+var WorkspaceNavigationProvider = ({ children }) => {
+	const [isNavigationCollapsed, setIsNavigationCollapsed] = useState(false);
+	const { closeInfoPanel } = useInfoPanel();
+	const { closeCommand } = useCommand();
+	const sidebarShortcutHandlers = useRef(/* @__PURE__ */ new Set());
+	const [mobileSidebar, setMobileSidebar] = useState(null);
+	const registerMobileSidebar = useCallback((sidebar) => {
+		setMobileSidebar(sidebar);
+		return () => {
+			setMobileSidebar((current) => current === sidebar ? null : current);
+		};
+	}, []);
+	const registerSidebarShortcut = useCallback((handler) => {
+		sidebarShortcutHandlers.current.add(handler);
+		return () => {
+			sidebarShortcutHandlers.current.delete(handler);
+		};
+	}, []);
+	const toggleNavigation = useCallback(() => {
+		setIsNavigationCollapsed((isCollapsed) => !isCollapsed);
+		closeInfoPanel();
+		closeCommand();
+	}, [closeCommand, closeInfoPanel]);
+	useHotkey("Meta+S", () => {
+		const handlers = [...sidebarShortcutHandlers.current];
+		(handlers[handlers.length - 1] ?? toggleNavigation)();
+	});
+	const value = useMemo(() => ({
+		isNavigationCollapsed,
+		toggleNavigation,
+		registerSidebarShortcut,
+		mobileSidebar,
+		registerMobileSidebar
+	}), [
+		isNavigationCollapsed,
+		toggleNavigation,
+		registerSidebarShortcut,
+		mobileSidebar,
+		registerMobileSidebar
+	]);
+	return /* @__PURE__ */ jsx(WorkspaceNavigationContext.Provider, {
+		value,
+		children
+	});
+};
+var useWorkspaceNavigation = () => {
+	const context = useContext(WorkspaceNavigationContext);
+	if (!context) throw new Error("useWorkspaceNavigation must be used within WorkspaceNavigationProvider");
+	return context;
+};
+var useSidebarShortcut = (handler, enabled = true) => {
+	const { registerSidebarShortcut } = useWorkspaceNavigation();
+	useEffect(() => {
+		if (enabled) return registerSidebarShortcut(handler);
+	}, [
+		enabled,
+		handler,
+		registerSidebarShortcut
+	]);
+};
+//#endregion
+export { WorkspaceNavigationProvider, useSidebarShortcut, useWorkspaceNavigation };

package/dist/lib/layouts/app/frame.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type AppFrameProps = {
+    children: ReactNode;
+    contentClassName?: string;
+    navigation?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const AppFrame: ({ children, className, contentClassName, navigation, ...props }: AppFrameProps) => import("react").JSX.Element;
+//# sourceMappingURL=frame.d.ts.map

package/dist/lib/layouts/app/frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/app/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMhE,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,eAAO,MAAM,QAAQ,GAAI,iEAMtB,aAAa,gCAwBf,CAAA"}

package/dist/lib/layouts/app/frame.js

@@ -0,0 +1,20 @@
+import { useMobileControls } from "../../components/mobile-controls/index.js";
+import { Surface, cn } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/layouts/app/frame.tsx
+var AppFrame = ({ children, className, contentClassName, navigation, ...props }) => {
+	const { isFooterHidden } = useMobileControls();
+	return /* @__PURE__ */ jsxs(Surface, {
+		variant: "transparent",
+		"data-vx": "app-layout",
+		className: cn("bg-background flex h-[100dvh] min-h-0 w-full flex-col overflow-hidden md:flex-row", className),
+		...props,
+		children: [navigation, /* @__PURE__ */ jsx("main", {
+			"data-slot": "app-layout-content",
+			className: cn("min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-18 transition-transform duration-300 ease-out md:p-0", isFooterHidden ? "pb-0" : "pb-20", contentClassName),
+			children
+		})]
+	});
+};
+//#endregion
+export { AppFrame };

package/dist/lib/layouts/app/index.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type AppMenuItem } from '../../components/app-menu';
+import type { ControlCenterConfig, ControlCenterI18n } from '../../components/panel/footer/control-center/types';
+import type { AppNavigationItem } from '../../navigation';
+import { type User } from '../../store/users/useUserStore';
+import { type AppFrameProps } from './frame';
+export type AppLayoutProps = Omit<AppFrameProps, 'navigation' | 'children'> & {
+    children?: ReactNode;
+    navigationItems: AppNavigationItem[];
+    appMenu?: AppMenuItem[];
+    user?: User | null;
+    settings?: boolean;
+    controlCenter?: ControlCenterConfig;
+    controlCenterSlot?: ReactElement;
+    i18n?: ControlCenterI18n;
+};
+type AppLayoutViewProps = Omit<AppFrameProps, 'navigation'> & {
+    navigationItems: AppNavigationItem[];
+    controlCenterSlot?: ReactElement;
+};
+export declare const AppLayoutProviders: ({ children, navigationItems, appMenu, user }: Pick<AppLayoutProps, "children" | "navigationItems" | "appMenu" | "user">) => import("react").JSX.Element;
+export declare const AppLayoutView: ({ children, navigationItems, controlCenterSlot, ...frameProps }: AppLayoutViewProps) => import("react").JSX.Element;
+declare const AppLayout: ({ children, navigationItems, appMenu, user, settings, controlCenter, controlCenterSlot, i18n, ...frameProps }: AppLayoutProps) => import("react").JSX.Element;
+export { AppLayout };
+export { AppFrame } from './frame';
+export type { AppFrameProps } from './frame';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/layouts/app/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/app/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAe,MAAM,OAAO,CAAA;AAItE,OAAO,EAAE,KAAK,WAAW,EAAmB,MAAM,2BAA2B,CAAA;AAI7E,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,oDAAoD,CAAA;AAQ3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAMzD,OAAO,EAAE,KAAK,IAAI,EAAgB,MAAM,gCAAgC,CAAA;AAGxE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,SAAS,CAAA;AAEtD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,UAAU,CAAC,GAAG;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,eAAe,EAAE,iBAAiB,EAAE,CAAA;IACpC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,iBAAiB,CAAC,EAAE,YAAY,CAAA;IAChC,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB,CAAA;AAED,KAAK,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC,GAAG;IAC5D,eAAe,EAAE,iBAAiB,EAAE,CAAA;IACpC,iBAAiB,CAAC,EAAE,YAAY,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,8CAKhC,IAAI,CACL,cAAc,EACd,UAAU,GAAG,iBAAiB,GAAG,SAAS,GAAG,MAAM,CACpD,gCAkBA,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,iEAK3B,kBAAkB,gCAQpB,CAAA;AAED,QAAA,MAAM,SAAS,GAAI,+GAUhB,cAAc,gCA2ChB,CAAA;AA+BD,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA"}

package/dist/lib/layouts/app/index.js

@@ -0,0 +1,89 @@
+import { AppMenuProvider } from "../../components/app-menu/index.js";
+import { CommandProvider } from "../../components/command/command-provider.js";
+import { MobileControlsProvider } from "../../components/mobile-controls/index.js";
+import { ToolbarActionsProvider, useToolbarActions } from "../../components/toolbar-actions/index.js";
+import { SettingsNavigationContext } from "../../pages/settings/navigation.js";
+import { ConfiguredControlCenter } from "../../components/panel/footer/control-center/configured.js";
+import { InfoPanelProvider } from "../../components/panel/info-panel/provider.js";
+import { ResponsiveToolbarActionProvider } from "../../components/responsive-toolbar-action/index.js";
+import { WorkspaceNavigationProvider } from "../../components/workspace-navigation/index.js";
+import { getNavigationPageKey } from "../../navigation.js";
+import { UserProvider } from "../../store/users/useUserStore.js";
+import { MenuLayout } from "../menu-layout/index.js";
+import { AppFrame } from "./frame.js";
+import { SettingsLayout } from "../settings/index.js";
+import { Outlet, useLocation, useMatches, useNavigate } from "@tanstack/react-router";
+import { useCallback } from "react";
+import { toast } from "@vezham/react-v3";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/layouts/app/index.tsx
+var AppLayoutProviders = ({ children, navigationItems, appMenu = [], user }) => /* @__PURE__ */ jsx(ToolbarActionsProvider, { children: /* @__PURE__ */ jsx(AppMenuShell, {
+	items: appMenu,
+	navigationItems,
+	children: /* @__PURE__ */ jsx(UserProvider, {
+		initialUser: user,
+		children: /* @__PURE__ */ jsx(CommandProvider, {
+			items: navigationItems,
+			children: /* @__PURE__ */ jsx(InfoPanelProvider, { children: /* @__PURE__ */ jsx(WorkspaceNavigationProvider, { children: /* @__PURE__ */ jsx(MobileControlsProvider, { children: /* @__PURE__ */ jsx(ResponsiveToolbarActionProvider, { children }) }) }) })
+		})
+	})
+}) });
+var AppLayoutView = ({ children, navigationItems, controlCenterSlot, ...frameProps }) => /* @__PURE__ */ jsx(AppFrame, {
+	...frameProps,
+	navigation: /* @__PURE__ */ jsx(MenuLayout, {
+		items: navigationItems,
+		controlCenter: controlCenterSlot
+	}),
+	children
+});
+var AppLayout = ({ children, navigationItems, appMenu, user, settings = false, controlCenter, controlCenterSlot, i18n, ...frameProps }) => {
+	const navigate = useNavigate();
+	const isSettings = useMatches({ select: (matches) => settings && matches.some((match) => match.routeId === "/settings") });
+	const openSettings = useCallback((section) => navigate({
+		to: "/settings",
+		search: { section }
+	}), [navigate]);
+	const content = children === void 0 ? /* @__PURE__ */ jsx(Outlet, {}) : children;
+	const center = controlCenterSlot !== void 0 ? controlCenterSlot : controlCenter ? /* @__PURE__ */ jsx(ConfiguredControlCenter, {
+		config: controlCenter,
+		context: { i18n },
+		placement: "right bottom",
+		preview: true
+	}) : void 0;
+	return /* @__PURE__ */ jsx(AppLayoutProviders, {
+		navigationItems,
+		appMenu,
+		user,
+		children: /* @__PURE__ */ jsx(SettingsNavigationContext.Provider, {
+			value: settings ? openSettings : null,
+			children: isSettings ? /* @__PURE__ */ jsx(SettingsLayout, { children: content }) : /* @__PURE__ */ jsx(AppLayoutView, {
+				...frameProps,
+				navigationItems,
+				controlCenterSlot: center,
+				children: content
+			})
+		})
+	});
+};
+var AppMenuShell = ({ items, navigationItems, children }) => {
+	const { pathname } = useLocation();
+	const { emit } = useToolbarActions();
+	const pageKey = getNavigationPageKey(navigationItems, pathname);
+	return /* @__PURE__ */ jsx(AppMenuProvider, {
+		items,
+		onAction: useCallback((action) => {
+			if (!emit({
+				actionKey: action.key,
+				pageKey,
+				pathname
+			})) toast.info(`TODO: ${action.label.replace(/…$/, "")} is not implemented yet.`);
+		}, [
+			emit,
+			pageKey,
+			pathname
+		]),
+		children
+	});
+};
+//#endregion
+export { AppFrame, AppLayout, AppLayoutProviders, AppLayoutView };

package/dist/lib/layouts/menu-layout/home-navigation-bubble.d.ts

@@ -0,0 +1,7 @@
+import { type User } from '../../components/panel/header/types';
+declare const HomeNavigationBubble: ({ onToggleDock, users }: {
+    onToggleDock: () => void;
+    users: User;
+}) => import("react").JSX.Element;
+export { HomeNavigationBubble };
+//# sourceMappingURL=home-navigation-bubble.d.ts.map

package/dist/lib/layouts/menu-layout/home-navigation-bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-navigation-bubble.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/menu-layout/home-navigation-bubble.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,qCAAqC,CAAA;AAE/D,QAAA,MAAM,oBAAoB,GAAI,yBAG3B;IACD,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,KAAK,EAAE,IAAI,CAAA;CACZ,gCAiBA,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/lib/layouts/menu-layout/home-navigation-bubble.js

@@ -0,0 +1,22 @@
+import { Header } from "../../components/panel/header/index.js";
+import { Surface } from "@vezham/react-v3";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/layouts/menu-layout/home-navigation-bubble.tsx
+var HomeNavigationBubble = ({ onToggleDock, users }) => {
+	return /* @__PURE__ */ jsx(Surface, {
+		variant: "transparent",
+		role: "group",
+		"aria-label": "Home navigation",
+		className: "border-default-200 bg-background/90 fixed top-3 left-3 z-40 flex h-[50px] w-fit items-center rounded-full border px-2 py-0 shadow-[0_14px_28px_rgba(15,23,42,0.14)] backdrop-blur-xl",
+		children: /* @__PURE__ */ jsx(Header, {
+			compact: true,
+			users,
+			isDockHidden: true,
+			showBookamarks: true,
+			showStorage: true,
+			onToggleDock
+		})
+	});
+};
+//#endregion
+export { HomeNavigationBubble };

package/dist/lib/layouts/menu-layout/index-md.d.ts

@@ -0,0 +1,4 @@
+import type { MenuLayoutProps } from './index';
+declare const MenuMD: ({ items, controlCenter }: MenuLayoutProps) => import("react").JSX.Element;
+export { MenuMD };
+//# sourceMappingURL=index-md.d.ts.map

package/dist/lib/layouts/menu-layout/index-md.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-md.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/menu-layout/index-md.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAS9C,QAAA,MAAM,MAAM,GAAI,0BAA0B,eAAe,gCAgFxD,CAAA;AAkGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/lib/layouts/menu-layout/index-md.js

@@ -0,0 +1,142 @@
+import { useCommand } from "../../components/command/index.js";
+import { useInfoPanel } from "../../components/panel/info-panel/provider.js";
+import { InfoPanelContainer } from "../../components/panel/info-panel/container.js";
+import { useSidebarShortcut, useWorkspaceNavigation } from "../../components/workspace-navigation/index.js";
+import { getSelectedMenuKey } from "../../navigation.js";
+import { useUser } from "../../store/users/useUserStore.js";
+import { Footer } from "../../components/panel/footer/index.js";
+import { aiPanel } from "../../components/panel/footer/ai/index.js";
+import { NotificationDrawer } from "../../components/panel/footer/notification-center/index.js";
+import { UserInfoModal } from "../../components/panel/footer/preferences/modal.js";
+import { bookmarksPanel } from "../../components/panel/header/bookmarks/index.js";
+import { storagePanel } from "../../components/panel/header/storage/index.js";
+import { Header } from "../../components/panel/header/index.js";
+import { Menu } from "../../components/panel/menu/index.js";
+import { HomeNavigationBubble } from "./home-navigation-bubble.js";
+import { useLocation } from "@tanstack/react-router";
+import { useState } from "react";
+import { Surface } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/layouts/menu-layout/index-md.tsx
+var headerUsers = {
+	id: "1",
+	name: "Slack",
+	avatar: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
+};
+var MenuMD = ({ items, controlCenter }) => {
+	const [openSettings, setOpenSettings] = useState(false);
+	const [settingsEntryPoint, setSettingsEntryPoint] = useState("account");
+	const location = useLocation();
+	const [notificationsOpen, setNotificationsOpen] = useState(false);
+	const { openInfoPanel, closeInfoPanel } = useInfoPanel();
+	const { closeCommand } = useCommand();
+	const { toggleNavigation, isNavigationCollapsed: isWorkspaceCollapsed } = useWorkspaceNavigation();
+	const [isHomeCollapsed, setIsHomeCollapsed] = useState(false);
+	const isHome = location.pathname === (items[0]?.href ?? "/");
+	const isNavigationCollapsed = isHome ? isHomeCollapsed : isWorkspaceCollapsed;
+	const navigationWidth = isHome || !isNavigationCollapsed ? "w-[105px]" : "w-0";
+	const toggleDock = () => {
+		if (isHome) {
+			setIsHomeCollapsed((hidden) => !hidden);
+			closeInfoPanel();
+			closeCommand();
+		} else toggleNavigation();
+		setOpenSettings(false);
+		setNotificationsOpen(false);
+	};
+	useSidebarShortcut(toggleDock, isHome);
+	const selectedKey = getSelectedMenuKey(location.pathname, items);
+	const { user } = useUser();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(NavigationPanel, {
+			collapsed: isNavigationCollapsed,
+			footerUser: {
+				id: user?.id ?? "",
+				name: user ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() : "",
+				avatar: user?.avatar,
+				isOnline: user?.isOnline
+			},
+			items,
+			controlCenter,
+			navigationWidth,
+			selectedKey,
+			onAI: () => openInfoPanel("ai"),
+			onToggleDock: toggleDock,
+			onNotifications: () => setNotificationsOpen(true),
+			onUser: (entryPoint) => {
+				setSettingsEntryPoint(entryPoint);
+				setOpenSettings(true);
+			}
+		}),
+		/* @__PURE__ */ jsx(CollapsedNavigation, {
+			collapsed: isNavigationCollapsed,
+			isHome,
+			onToggleDock: toggleDock
+		}),
+		/* @__PURE__ */ jsx(UserInfoModal, {
+			open: openSettings && !isNavigationCollapsed,
+			onClose: () => setOpenSettings(false),
+			defaultActiveTab: settingsEntryPoint
+		}),
+		/* @__PURE__ */ jsx(NotificationDrawer, {
+			isOpen: notificationsOpen && !isNavigationCollapsed,
+			onClose: () => setNotificationsOpen(false)
+		}),
+		/* @__PURE__ */ jsx(InfoPanelContainer, { panels: {
+			bookmarks: bookmarksPanel,
+			storage: storagePanel,
+			ai: aiPanel
+		} })
+	] });
+};
+var NavigationPanel = ({ collapsed, footerUser, items, controlCenter, navigationWidth, selectedKey, onAI, onToggleDock, onNotifications, onUser }) => /* @__PURE__ */ jsx(Surface, {
+	variant: "transparent",
+	className: `border-default-300 sticky top-0 left-0 z-[10] flex h-[100dvh] shrink-0 flex-col overflow-hidden transition-[width,padding,gap] duration-300 ease-out ${navigationWidth} ${collapsed ? "border-0 p-0" : "gap-6 px-4 pt-3 pb-4"}`,
+	"data-vx": "menu-layout",
+	children: !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Header, {
+			users: headerUsers,
+			showSearch: true,
+			showBookamarks: true,
+			showStorage: true,
+			onToggleDock
+		}),
+		/* @__PURE__ */ jsx(Menu, {
+			collapsed: false,
+			items,
+			selectedKey
+		}),
+		/* @__PURE__ */ jsx(Footer, {
+			user: footerUser,
+			showAI: true,
+			showControlCenter: true,
+			controlCenter,
+			showNotifications: true,
+			showUserInfo: true,
+			onAI,
+			onNotificationsClick: onNotifications,
+			onUserClick: (_user, entryPoint = "account") => onUser(entryPoint)
+		})
+	] })
+});
+var CollapsedNavigation = ({ collapsed, isHome, onToggleDock }) => {
+	if (!collapsed) return null;
+	if (isHome) return /* @__PURE__ */ jsx(HomeNavigationBubble, {
+		users: headerUsers,
+		onToggleDock
+	});
+	return /* @__PURE__ */ jsx(Surface, {
+		variant: "transparent",
+		className: "border-default-200 bg-background/90 fixed top-3 left-3 z-40 flex h-[45px] w-fit items-center rounded-full border px-2 py-0 shadow-[0_14px_28px_rgba(15,23,42,0.14)] backdrop-blur-xl",
+		children: /* @__PURE__ */ jsx(Header, {
+			compact: true,
+			users: headerUsers,
+			isDockHidden: true,
+			showBookamarks: true,
+			showStorage: true,
+			onToggleDock
+		})
+	});
+};
+//#endregion
+export { MenuMD };

package/dist/lib/layouts/menu-layout/index-sm.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MenuLayoutProps } from './index';
+declare const MenuSM: ({ items, controlCenter }: MenuLayoutProps) => React.JSX.Element;
+export { MenuSM };
+//# sourceMappingURL=index-sm.d.ts.map

package/dist/lib/layouts/menu-layout/index-sm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-sm.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/menu-layout/index-sm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuBvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,QAAA,MAAM,MAAM,GAAI,0BAA0B,eAAe,sBAsHxD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/lib/layouts/menu-layout/index-sm.js

@@ -0,0 +1,124 @@
+import { useMobileControls } from "../../components/mobile-controls/index.js";
+import { useToolbarActions } from "../../components/toolbar-actions/index.js";
+import { useInfoPanel } from "../../components/panel/info-panel/provider.js";
+import { InfoPanelContainer } from "../../components/panel/info-panel/container.js";
+import { useResponsiveToolbarAction } from "../../components/responsive-toolbar-action/index.js";
+import { useWorkspaceNavigation } from "../../components/workspace-navigation/index.js";
+import { getNavigationPageKey } from "../../navigation.js";
+import { useUser } from "../../store/users/useUserStore.js";
+import { Footer } from "../../components/panel/footer/index.js";
+import { aiPanel } from "../../components/panel/footer/ai/index.js";
+import { NotificationDrawer } from "../../components/panel/footer/notification-center/index.js";
+import { UserInfoModal } from "../../components/panel/footer/preferences/modal.js";
+import { bookmarksPanel } from "../../components/panel/header/bookmarks/index.js";
+import { storagePanel } from "../../components/panel/header/storage/index.js";
+import { Header } from "../../components/panel/header/index.js";
+import { BottomNavbar } from "../../components/menu/index.js";
+import { getNavigationToolbar } from "../../navigation-toolbar.js";
+import { useLocation } from "@tanstack/react-router";
+import React, { useState } from "react";
+import { Surface, toast } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/layouts/menu-layout/index-sm.tsx
+var MenuSM = ({ items, controlCenter }) => {
+	const [selectedKey, setSelectedKey] = React.useState(items[0]?.key ?? "");
+	const [openSettings, setOpenSettings] = useState(false);
+	const [settingsEntryPoint, setSettingsEntryPoint] = useState("account");
+	const [notificationsOpen, setNotificationsOpen] = useState(false);
+	const { openInfoPanel } = useInfoPanel();
+	const { isFooterHidden } = useMobileControls();
+	const { mobileSidebar } = useWorkspaceNavigation();
+	const { action: toolbarAction } = useResponsiveToolbarAction();
+	const { pathname } = useLocation();
+	const toolbar = getNavigationToolbar(items, pathname);
+	const showSearch = Boolean(toolbar.search);
+	const { emit } = useToolbarActions();
+	const handleSearch = () => {
+		if (!emit({
+			actionKey: "search",
+			pageKey: getNavigationPageKey(items, pathname),
+			pathname
+		})) toast.info("Search is not implemented yet.");
+	};
+	const handleItemSelect = (key) => {
+		setSelectedKey(key);
+	};
+	const users = {
+		id: "1",
+		name: "Slack",
+		avatar: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
+	};
+	const { user } = useUser();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none fixed top-3 right-3 left-3 z-40 flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx(Surface, {
+				variant: "transparent",
+				role: "group",
+				"aria-label": "Mobile navigation controls",
+				className: "border-default-200 bg-background/90 pointer-events-auto flex h-12 shrink-0 items-center rounded-full border px-2 shadow-[0_14px_28px_rgba(15,23,42,0.14)] backdrop-blur-xl",
+				children: /* @__PURE__ */ jsx(Header, {
+					compact: true,
+					className: "flex-shrink-0",
+					users,
+					showBookamarks: true,
+					showStorage: true,
+					isSidebarOpen: mobileSidebar?.isOpen,
+					onToggleSidebar: mobileSidebar?.onToggle
+				})
+			}), /* @__PURE__ */ jsx(Surface, {
+				variant: "transparent",
+				role: "group",
+				"aria-label": "Mobile account actions",
+				className: "border-default-200 bg-background/90 pointer-events-auto flex h-12 shrink-0 items-center rounded-full border px-2 shadow-[0_14px_28px_rgba(15,23,42,0.14)] backdrop-blur-xl",
+				children: /* @__PURE__ */ jsx(Footer, {
+					user: {
+						id: user?.id ?? "",
+						name: user ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() : "",
+						avatar: user?.avatar,
+						isOnline: user?.isOnline
+					},
+					showAI: true,
+					showControlCenter: true,
+					controlCenter,
+					showNotifications: true,
+					showUserInfo: true,
+					onAI: () => openInfoPanel("ai"),
+					onNotificationsClick: () => setNotificationsOpen(true),
+					onUserClick: (_user, entryPoint = "account") => {
+						setSettingsEntryPoint(entryPoint);
+						setOpenSettings(true);
+					},
+					toolbarAction
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsx(UserInfoModal, {
+			open: openSettings,
+			onClose: () => setOpenSettings(false),
+			defaultActiveTab: settingsEntryPoint
+		}),
+		/* @__PURE__ */ jsx(NotificationDrawer, {
+			isOpen: notificationsOpen,
+			onClose: () => setNotificationsOpen(false)
+		}),
+		/* @__PURE__ */ jsx(InfoPanelContainer, { panels: {
+			bookmarks: bookmarksPanel,
+			storage: storagePanel,
+			ai: aiPanel
+		} }),
+		!isFooterHidden && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: /* @__PURE__ */ jsx(BottomNavbar, {
+				items,
+				showSearch,
+				hasPrimaryAction: Boolean(toolbar.primaryAction),
+				onSearch: handleSearch,
+				selectedKey,
+				onSelect: handleItemSelect
+			})
+		})
+	] });
+};
+//#endregion
+export { MenuSM };

package/dist/lib/layouts/menu-layout/index.d.ts

@@ -0,0 +1,8 @@
+import type { FooterActionsProps } from '../../components/panel/footer/types';
+import type { AppNavigationItem } from '../../navigation';
+export type MenuLayoutProps = Pick<FooterActionsProps, 'controlCenter'> & {
+    items: AppNavigationItem[];
+};
+declare const MenuLayout: ({ items, controlCenter }: MenuLayoutProps) => import("react").JSX.Element;
+export { MenuLayout };
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/layouts/menu-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/menu-layout/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AAC7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAIzD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,eAAe,CAAC,GAAG;IACxE,KAAK,EAAE,iBAAiB,EAAE,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,UAAU,GAAI,0BAA0B,eAAe,gCAQ5D,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/lib/layouts/menu-layout/index.js

@@ -0,0 +1,17 @@
+import { MenuMD } from "./index-md.js";
+import { MenuSM } from "./index-sm.js";
+import { useMediaQuery } from "@vezham/react-v3";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/layouts/menu-layout/index.tsx
+var MenuLayout = ({ items, controlCenter }) => {
+	if (useMediaQuery("(max-width: 767px)")) return /* @__PURE__ */ jsx(MenuSM, {
+		items,
+		controlCenter
+	});
+	else return /* @__PURE__ */ jsx(MenuMD, {
+		items,
+		controlCenter
+	});
+};
+//#endregion
+export { MenuLayout };

package/dist/lib/layouts/section/index.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type AppNavigationItem } from '../../navigation';
+import type { SectionSort } from './sort-menu';
+import { type SectionAction, type SectionSearch, type SectionViewAction } from './toolbar';
+export type SectionLayoutProps = {
+    title: string;
+    sectionKey?: string;
+    navigationLabel?: string;
+    sidebarItems?: AppNavigationItem[];
+    tabs: AppNavigationItem[];
+    toolbar?: ReactNode;
+    search?: SectionSearch;
+    sync?: boolean;
+    filter?: boolean;
+    sort?: boolean;
+    onSortChange?: (value: SectionSort) => void;
+    view?: SectionViewAction[];
+    onSync?: () => void;
+    menuActions?: SectionAction[];
+    primaryAction?: SectionAction;
+    children: ReactNode;
+};
+declare const SectionLayout: (props: SectionLayoutProps) => import("react").JSX.Element;
+export type { SectionAction, SectionFilterKey, SectionSearch, SectionViewAction, SectionViewMode } from './toolbar';
+export { SectionLayout };
+export { useSectionToolbarContent } from './toolbar-content';
+export { useMobileToolbarNavigation } from './toolbar-more-sheet';
+export type { SectionSort } from './sort-menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/layouts/section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EAElB,KAAK,iBAAiB,EAEvB,MAAM,WAAW,CAAA;AAMlB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAClC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAudD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAI/C,CAAA;AAED,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,aAAa,EAAE,CAAA;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAEjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA"}